更新 Redux 存储后，React.js 何时重新渲染组件？答案

【问题标题】：When does React.js rerenders a component after I update the Redux's store?更新 Redux 存储后，React.js 何时重新渲染组件？
【发布时间】：2018-06-08 07:37:31
【问题描述】：

当我 dispatch Redux 中的一个操作时，商店会按顺序更新，即如果我有以下 thunk：

function action(data) {
   return function(dispatch) {
      dispatch(anotherAction(data));
      dispatch(anotherActionAfterTheAboveUpdatesTheStore(data));
   };
}

store是按顺序更新的，也就是说dispatch(anotherAction(data));之后store已经改变了。

但是，我知道当我们在内部调度一个动作时，react-redux 通过其异步的setState 方法重新渲染一个连接的组件。因此，我在理解 React 何时使用新数据有效地重新渲染组件时遇到了一些困难。

它是否保证在每个 Redux 的 dispatch 之后调用 render()？

感谢您的关注。

【问题讨论】：

组件，如果定义为一个函数，每次状态更新都会被调用一次或多次。无论新状态与原始 afaik 相同还是不同，都会发生这种情况。要查看每个调用，您可以在组件返回之前放置 console.log 语句并查看它发生了多少次。将组件定义为类，除非您通过 shouldComponentUpdate 控制更新，否则它是相同的。
这个想法是组件必须在每次状态更新时返回。然后由协调者决定是否需要更新 DOM。
“它是否保证在每次 Redux 调度后调用 render()？”你可以简单地通过将console.log 添加到render 方法来测试它。我会说这是真的，因为在事件处理程序中反应批处理 setState 调用。但无论现在如何工作，这都是将来可能会改变的实现细节。我不建议无论如何依赖这种行为。

标签： javascript reactjs redux redux-thunk

【解决方案1】：

其实和redux没有太大关系。 Redux 只是更新状态，react-redux 将 状态的一部分作为 props 传递。现在由 React 来检测一些 props 是否发生了变化，并运行它的生命周期方法并在必要时重新渲染。

【讨论】：

因此在多次连续的dispatch 调用之后，可能会发生render 在两次连续调度之间甚至没有被调用？
@tonix 是的。正如@Tomasz Mularczyk 所说：在您的示例中可能永远不会调用render 方法。只有当组件状态/道具发生变化时才会调用它。
我明白了，现在这更有意义了。我经常想到的另一件事是，当我们将 Redux 的 store 的 props 映射到 React 组件的 props 而不是 React 组件的状态时，React 如何知道它需要重新渲染？我知道render() 是在有状态更改的setState 调用时调用的，但是在react-redux 中，映射到Redux 存储的组件道具发生了什么变化...react-redux 在下面发出一个花哨的setState引擎盖即使是组件道具而不是其状态发生了什么变化？
React-Redux 的 connect 函数订阅 Redux 存储，并在每次调度后重新运行您的 mapState 函数。如果您从mapState 返回的值发生变化，那么是的，connect 有效地调用setState() 来触发包装组件的重新渲染，它将新值作为道具传递给您自己的组件。