reactjs - 仅刷新从父级更改的组件

Question

我有一个 react 组件，它是一个列表，我们称之为列表，它有一个名为 items 的状态，它是以下形式的对象数组:

{ id: String, name: String }

它的渲染函数类似于

render () {
    return (
        <ul>
          { items.map((item) => {
            return (
              <Item key={item.id} item={item} />
            );
          })}
        </ul>
    );
}

当然，Item 也是一个 React 组件。

现在，我的问题是:假设在某一时刻，我知道数据发生了变化(当然，这只能是名称更改)，我如何根据父项的键触发 Item 刷新？

到目前为止我找到了两个解决方案:

1. 刷新整个状态，但我不喜欢它，因为它看起来有点矫枉过正。
2. 维护对子组件的引用数组，但我不喜欢它，因为感觉像是浪费内存。

那么什么是“响应式(Reactive)”的方法呢？

Answer 1

如果 items 数组发生更改，则调用 Parent 的渲染，因为 Item 组件的键相同，因此不会重新创建该组件，而是重新创建其 >componentWillReceiveProps 函数被调用，Item 组件被重新渲染。

您可以做的优化是将 Item 组件创建为 Pure 组件，您可以通过扩展 React.PureComponent 来实现。 React.PureComponent 的 shouldComponentUpdate() 仅浅层比较对象，因此如果 Props 未更改，则不会调用子组件的重新渲染。

According to the DOCS:

If your React component’s render() function renders the same result given the same props and state, you can use React.PureComponent for a performance boost in some cases.

React.PureComponent’s shouldComponentUpdate() only shallowly compares the objects. If these contain complex data structures, it may produce false-negatives for deeper differences. Only extend PureComponent when you expect to have simple props and state, or use forceUpdate() when you know deep data structures have changed. Or, consider using immutable objects to facilitate fast comparisons of nested data.

Furthermore, React.PureComponent’s shouldComponentUpdate() skips prop updates for the whole component subtree. Make sure all the children components are also “pure”.