Вычисляем поле в React?

Question

Я новичок в React / Redux, но это то, что я планирую использовать для будущего проекта. Есть ли у KnockoutJs эквивалентный ComputedObservable? Я планирую иметь внешний компонент с главным массивом, а затем несколько подкомпонентов, каждый из которых отвечает за отображение подмножества элементов в массиве родительского компонента на основе некоторых критериев. Представить:

[{id: 1, цвет: "синий"}, { id:2, цвет: "синий"}, { id:3, цвет: "зеленый"}]

(скажем, синие цвета отображаются в первом экземпляре компонента, зеленые цвета отображаются во втором экземпляре компонента). Я хочу убедиться, что зависимость между ними ясна, так что если значение элемента изменяется в родительском массиве, дочерний компонент, который отображает этот элемент, будет перерисован.

Я предполагаю, что родительский компонент будет передавать мастер-массив в каждый дочерний компонент через реквизиты, а затем каждый дочерний компонент будет отвечать за решение, какое подмножество отображать, но я все еще не уверен в том, как он будет знать, когда следует перерисовывать. (Представьте, что я обновляю "синий" на "зеленый")

Спасибо...

Answer 1

Вам не нужно беспокоиться о том, когда перерисовать. React сделает обновление за вас.

Я сделаю это в вашем случае:

Подкомпонент

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

Render() родительского компонента

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

Теперь, когда вы звоните setState() (или если data Это происходит из Redux, и вы отправляете действие для обновления данных), React выполнит повторную визуализацию родителя и всех подкомпонентов.

Вы можете увидеть рабочий пример здесь: https://codepen.io/CodinCat/pen/oebLjZ?editors=0010