该connect函数生成一个订阅商店的包装组件。当一个动作被分派时，包装器组件的回调被通知。然后它运行你的mapState函数，并浅比较这次的结果对象和上次的结果对象（所以如果你用相同的值重写redux 存储字段，它不会触发重新渲染）。如果结果不同，那么它会将结果作为props传递给您的“真实”组件。

Dan Abramov 编写了connectat ( connect.js ) 的一个很好的简化版本，它说明了基本思想，尽管它没有显示任何优化工作。我也有一些关于Redux 性能的文章的链接，这些文章讨论了一些相关的想法。

更新

React-Redux v6.0.0对连接组件从 store 接收数据的方式进行了一些重大的内部更改。

作为其中的一部分，我写了一篇文章，解释了connectAPI 及其内部结构的工作原理，以及它们如何随时间变化：

惯用的 Redux：React-Redux 的历史和实现

我的答案有点超出了左场。它揭示了导致我写这篇文章的一个问题。就我而言，该应用程序似乎没有重新渲染，即使它收到了新的props。
React 开发人员对这个经常被问到的问题有一个答案，即如果 (store) 发生了变异，99% 的时间这就是 react 不会重新渲染的原因。然而，其他 1% 却一无所知。突变不是这里的情况。

TLDR；

componentWillReceiveProps是如何state与新的props.

边缘情况：一旦state更新，然后应用程序不会再呈现！

事实证明，如果您的应用程序仅state用于显示其元素，则props可以更新，但state不会更新，因此无需重新渲染。

我有state这依赖于props从 redux 收到store。我需要的数据还没有在存储中，所以我从 获取它componentDidMount，这是正确的。当我的减速器更新存储时，我取回了props，因为我的组件是通过 mapStateToProps 连接的。但是页面没有渲染，状态仍然充满空字符串。

例如，假设用户从保存的 url 加载了“编辑帖子”页面。您可以postId从 url访问，但信息store尚未包含，因此您可以获取它。您页面上的项目是受控组件 - 因此您显示的所有数据都在state.

使用redux，获取数据，更新存储，connect编辑组件，但应用程序没有反映更改。仔细一看，props收到了，但应用程序没有更新。state没有更新。

嗯，props会更新和传播，但state不会。你需要特别告诉state更新。

您不能在 中执行此操作render()，并且componentDidMount已经完成了它的循环。

componentWillReceiveProps是您state根据更改的prop值更新属性的地方。

示例用法：

componentWillReceiveProps(nextProps){
  if (this.props.post.category !== nextProps.post.category){
    this.setState({
      title: nextProps.post.title,
      body: nextProps.post.body,
      category: nextProps.post.category,
    })
  }      
}

我必须对这篇文章大喊大叫，它让我明白了许多其他帖子、博客和存储库都没有提到的解决方案。任何其他人都无法找到这个明显晦涩的问题的答案，这是：

ReactJs 组件生命周期方法——深入探讨

componentWillReceiveProps是您将更新state以与props更新保持同步的地方。

一旦state更新，然后视域state 做重新呈现！

这个答案是对 Brian Vaughn 题为“你可能不需要派生状态”（2018 年 6 月 7 日）的文章的总结。

从 props 派生 state 是所有形式的反模式。包括使用较旧的componentWillReceiveProps和较新的getDerivedStateFromProps.

考虑以下解决方案，而不是从 props 派生状态。

两个最佳实践建议

function EmailInput(props) {
  return <input onChange={props.onChange} value={props.email} />;
}

// parent class
class EmailInput extends Component {
  state = { email: this.props.defaultEmail };

  handleChange = event => {
    this.setState({ email: event.target.value });
  };

  render() {
    return <input onChange={this.handleChange} value={this.state.email} />;
  }
}

// child instance
<EmailInput
  defaultEmail={this.props.user.email}
  key={this.props.user.id}
/>

如果出于某种原因，建议对您的情况不起作用，则有两种选择。

class EmailInput extends Component {
  state = {
    email: this.props.defaultEmail,
    prevPropsUserID: this.props.userID
  };

  static getDerivedStateFromProps(props, state) {
    // Any time the current user changes,
    // Reset any parts of state that are tied to that user.
    // In this simple example, that's just the email.
    if (props.userID !== state.prevPropsUserID) {
      return {
        prevPropsUserID: props.userID,
        email: props.defaultEmail
      };
    }
    return null;
  }

  // ...
}

class EmailInput extends Component {
  state = {
    email: this.props.defaultEmail
  };

  resetEmailForNewUser(newEmail) {
    this.setState({ email: newEmail });
  }

  // ...
}

据我所知，redux 唯一会做的事情是，如果您的组件依赖于变异状态，则在更改商店状态时调用 componentWillRecieveProps，然后您应该强制您的组件更新它，就像这样

1-store State change-2-call(componentWillRecieveProps(()=>{3-component state change}))