Question

我是React / Redux的新手，但这就是我打算用于即将推出的项目。是否有一个KnockoutJs的ComputedObservable的等价物？我计划有一个带有主数组的外部组件，然后是多个子组件，每个子组件负责根据某些条件显示父组件数组中项目的子集。想象：

[{ ID：1，颜色：'蓝色' }， { ID：2，颜色：'蓝色' }， { ID：3，颜色：'绿色' }]

（例如，第一个组件实例中显示的蓝色，第二个组件实例中显示的绿色）。我想确保它们之间的依赖关系是明确的，这样如果某个项的值在父数组中发生更改，则恰好显示该项的子组件将重新呈现。

我认为父组件会通过props将主数组传递给每个子组件，然后每个子组件将负责决定显示哪个子组，但我仍然不确定如何知道何时重新呈现。（想象一下，我将'蓝色'更新为'绿色'）

...谢谢

Answer 1

您无需担心何时重新渲染。 React会为您做更新。

我会在你的情况下这样做：

子组件

const Item = props => (
  <div style={{ color: props.color }}>
    {props.color}
  </div>
)

父组件的渲染（）

render() {
  return (
    <div>
      {this.state.data.map(d => <Item key={d.id} color={d.color} />)}
    </div>
  )
}

现在，当您调用setState()时（或者如果data来自Redux并且您发送操作以更新数据），React将重新呈现父项和所有子组件。< / p>