React：为什么父组件必须重新呈现以访问子状态更改？-Java 学习之路

我已经阅读了Flux文档，Redux文档，实现了Redux，构建了我自己的Connect版本，以及我自己的Flux模式版本，我发现自己对一个核心概念感到困惑，这是：

为什么父组件必须重新呈现才能访问子项的状态更改？

让我举个例子 . 假设我们有一个父组件呈现一个表单，以及两个表单字段元素，它们是组件 .

<Form>
  <Field />
  <Field />
</Form>

每个 Field 都可以拥有自己的onBlur SyntheticEvent处理程序，它将更改分派给全局状态对象（这里选择状态管理无关紧要） . 可以有单个对象或对象列表等 .

每个 Field 都可以在全局状态下注册一个侦听器，只要全局状态发生变化，就会重新发送 Field . 这可以通过为 Field 调用 setState() 来完成 .

在我假设的场景中，每个 Field 可以包装在HOC中，或者渲染道具可以用于为mount上的每个 Field 组件设置订阅并删除unMount上的订阅 .

父 Form 组件可以有一个处理程序，当提交 Form 时，它需要 Fields 的状态为 true 才能提交 Form .

有多种方法可以为 Form 组件提供 Fields 状态所需的数据 .

Form Form 可能有一个注册了全局状态的侦听器，该侦听器将导致 Form 更新，使用当前的 Field 状态刷新状态中的道具 .

Scenario 2 Form 可以将回调传递给 Fields ，允许他们更新模糊中 Form 内的状态 . Form 会检查 onSubmit .

Scenario 3 允许 Form 按需读取全局状态 .

我已经尝试了上面的所有三个场景，我无法理解为什么你会强迫 Form 在场景1中重新渲染，如果它没有 .

场景2效果很好但似乎不必要的复杂性 .

场景3运行良好，并且是最不复杂和最容易推理的，具有最少量的重新渲染 .

所以我的问题是，是否有理由我希望 Form 在场景1中重新渲染以更新其道具，其中包含每个 Field 对于按需访问全局状态的状态？这里有一些我失踪的模式吗？

注意：我知道React不一定会重新渲染组件，但是，为什么甚至强迫React调和任何东西呢？这似乎是不必要的计算 .

1 回答

场景4 - 使用ref

onSubmit()
{

 if(!this.field1.status || !this.field2.status) {
   //can't submit
 }

}

render() 
{
     return (
      <Form>
        <Field ref={(f) => this.field1 = f} />
        <Field ref={(f) => this.field2 = f} />
      </Form>
     );
}

回复于 2024-04-19T16:38:56+08:00

React：为什么父组件必须重新呈现以访问子状态更改？

1 回答

相关问题