Question

我是React的新手，但仍然在理解将Redux与React结合使用方面感到困惑。

例如，下面是一些代码：

   const mapStateToProps = (storeData) => ({
      editing: storeData.isEditMode;
   })

   const mapDispatchToProps = {
      saveCallback: xxx
   }

   const connectFunction = connect(mapStateToProps, mapDispatchToProps);

   export const ProductDisplay = connectFunction(
       class extends Component {
          render() {
             if (this.props.editing) {
                 ...
             } else {
                ...
             }
          }
      }
   )

和使用ProductDisplay

的组件

export default class App extends Component {
   render() {
       return <ProductDisplay/>
   }
}

比方说storeData.isEditMode已被其他组件更改，因此包装的组件props.editing也已更改。我们知道触发更新过程的唯一方法是使用setState()，但是如何反应知道ProductDisplay组件需要更新，因为不涉及任何setState()方法？

Answer 1

connect函数生成一个订阅商店的包装器组件。分派操作时，将通知包装器组件的回调。然后，它运行mapState函数，并将此时的结果对象与上一次的结果对象进行浅比较（因此，如果您要使用相同的值重写redux存储字段，则不会触发重新渲染）。如果结果不同，则将结果作为道具传递给您的“真实”组件。

Dan Abramov在（connect.js）上编写了一个很棒的connect简化版本，尽管没有显示任何优化工作，但它说明了基本思想。

更新

React-Redux v6.0.0对连接的组件如何从存储中接收数据进行了一些重大的内部更改。

有关更多详细信息：https://spin.atomicobject.com/2018/04/02/redux-rerendering/

数据存储更改时如何更新组件

1 个答案: