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() { 
    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