为什么在下面的伪代码示例中，当容器更改foo.bar时，子不重新呈现?
Container {
handleEvent() {
this.props.foo.bar = 123
},
render() {
return <Child bar={this.props.foo.bar} />
}
Child {
render() {
return <div>{this.props.bar}</div>
}
}
即使我在修改Container中的值后调用forceUpdate()， Child仍然显示旧值。
当前回答
如果Child不维护任何状态，而只是呈现道具，然后从父组件调用它，那么您可能应该将它作为功能组件。除此之外，您还可以使用与功能组件(useState)的挂钩，这将导致无状态组件重新呈现。
此外，您不应该更改propas，因为它们是不可变的。维护组件的状态。
Child = ({bar}) => (bar);
其他回答
确认，添加一个密钥工作。我看了所有的文件想弄清楚原因。
React希望在创建子组件时高效。如果新组件与另一个子组件相同，它就不会呈现新组件，这使得页面加载更快。
添加Key会迫使React呈现新组件，从而重置新组件的状态。
https://reactjs.org/docs/reconciliation.html#recursing-on-children
我也有同样的问题。 这是我的解决方案，我不确定这是一个好的实践，如果不是告诉我:
state = {
value: this.props.value
};
componentDidUpdate(prevProps) {
if(prevProps.value !== this.props.value) {
this.setState({value: this.props.value});
}
}
UPD:现在你可以用React Hooks做同样的事情: (仅当component是函数时)
const [value, setValue] = useState(propName);
// This will launch only if propName value has chaged.
useEffect(() => { setValue(propName) }, [propName]);
根据React的理念，组件不能改变它的道具。它们应该从父进程接收，并且应该是不可变的。只有父节点可以更改其子节点的道具。
关于国家和道具的解释很好
另外，阅读这篇文章为什么我不能在react.js中更新道具?
在我的例子中，我正在更新传递给组件的加载状态。在按钮内的道具。加载是通过预期的(从假切换为真)，但显示旋转器没有更新的三元。
我尝试添加一个键，添加一个状态，更新useEffect()等，但没有其他答案工作。
对我有效的是改变这一点:
setLoading(true);
handleOtherCPUHeavyCode();
:
setLoading(true);
setTimeout(() => { handleOtherCPUHeavyCode() }, 1)
我认为这是因为handleOtherCPUHeavyCode中的进程非常繁重和密集，所以应用程序会冻结一秒钟左右。添加1ms超时允许加载布尔值更新，然后繁重的代码函数可以完成它的工作。
如果Child不维护任何状态，而只是呈现道具，然后从父组件调用它，那么您可能应该将它作为功能组件。除此之外，您还可以使用与功能组件(useState)的挂钩，这将导致无状态组件重新呈现。
此外，您不应该更改propas，因为它们是不可变的。维护组件的状态。
Child = ({bar}) => (bar);
