为什么在下面的伪代码示例中，当 Container 更改 foo.bar 时，Child 不会重新渲染？
Container {
handleEvent() {
this.props.foo.bar = 123
},
render() {
return <Child bar={this.props.foo.bar} />
}
Child {
render() {
return <div>{this.props.bar}</div>
}
}
即使我forceUpdate()在修改Container中的值后调用，Child仍然显示旧值。
更新孩子的属性“key”等于名称。每次密钥更改时，组件都会重新渲染。
Child {
render() {
return <div key={this.props.bar}>{this.props.bar}</div>
}
}
因为如果父级的 props 发生变化，子级不会重新渲染，但是如果它的 STATE 发生变化:)
你展示的是这个：https : //facebook.github.io/react/tips/communicate-between-components.html
它将通过 props 将数据从父级传递给子级，但那里没有重新渲染逻辑。
您需要为父级设置一些状态，然后在父级更改状态时重新渲染子级。这可能会有所帮助。 https://facebook.github.io/react/tips/expose-component-functions.html
我有同样的问题。这是我的解决方案，我不确定这是好的做法，如果不是，请告诉我：
state = {
value: this.props.value
};
componentDidUpdate(prevProps) {
if(prevProps.value !== this.props.value) {
this.setState({value: this.props.value});
}
}
UPD：现在你可以使用 React Hooks 做同样的事情：（仅当组件是一个函数时）
const [value, setValue] = useState(propName);
// This will launch only if propName value has chaged.
useEffect(() => { setValue(propName) }, [propName]);
确认，添加一个 Key 有效。我浏览了文档以尝试了解原因。
React 希望在创建子组件时高效。如果它与另一个子组件相同，则不会呈现新组件，这会使页面加载速度更快。
添加一个 Key 会强制 React 渲染一个新组件，从而重置该新组件的 State。
https://reactjs.org/docs/reconciliation.html#recursing-on-children
当从functions和创建 React 组件时useState。
const [drawerState, setDrawerState] = useState(false);
const toggleDrawer = () => {
// attempting to trigger re-render
setDrawerState(!drawerState);
};
这确实不工作
<Drawer
drawerState={drawerState}
toggleDrawer={toggleDrawer}
/>
这确实有效（添加密钥）
<Drawer
drawerState={drawerState}
key={drawerState}
toggleDrawer={toggleDrawer}
/>