组件 props 改变时获取新数据答案

【问题标题】：Fetch new data when the component props change组件 props 改变时获取新数据
【发布时间】：2017-09-27 10:23:59
【问题描述】：

我有 4 个按钮，单击该按钮时会调用一个组件，在该组件中我会根据单击的按钮显示不同的数据。

当我第一次单击按钮时，会调用该组件的构造函数和 componentWillMount() 函数，但之后，直到我刷新页面或导航到其他页面并返回时才会调用它。

那么，有没有办法在每次调用特定组件时调用组件的componentWillMount() 函数或构造函数？

我没有附加代码，因为这个问题很简单。

【问题讨论】：

听起来您应该更改点击处理程序中的状态，以便 react 重新渲染页面
@Raulucco 但是它会重新渲染整个主页。
没必要，如果你改变父节点的状态，它只会重新渲染那个节点和它的子节点。但这取决于你的树

标签： reactjs

【解决方案1】：

看起来您正在为组件提供不同的道具，因此您需要使用componentWillReceiveProps 和componentDidMount

根据文档

componentWillReceiveProps(nextProps)

componentWillReceiveProps() 在挂载组件之前调用收到新道具。如果您需要更新状态以响应道具更改（例如，重置它），您可以比较this.props 和nextProps 并使用this.setState() 执行状态转换在这个方法中。

componentDidMount()

componentDidMount() 在组件运行后立即调用安装。需要 DOM 节点的初始化应该放在这里。如果你需要从远程端点加载数据，这是一个很好的地方实例化网络请求。

因此您需要更新检查子组件componentWillReceiveProps 中的道具是否已更改，并根据它采取措施。因为componentWillReceiveProps 在组件第一次挂载时没有被调用，所以你也需要使用componentDidMount，因为它只在第一次渲染时被调用

【讨论】：

【解决方案2】：

不，正如documentation 所述，该组件仅在页面生命周期中安装一次。

我认为您可能需要 componentWillUpdate 事件。确保 shouldComponentUpdate 方法在需要时返回 true。

【讨论】：

感谢您为我指明正确的方向。在componentWillUpdate 中，您无法更改状态。所以我使用了componentWillReceiveProps，它成功了。