React：为什么子组件在道具更改时不更新

Question

为什么在下面的伪代码示例中，当 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>
 }
 }

即使我在修改 Container 中的值后调用 forceUpdate() ，Child 仍然显示旧值。

原文由 Tuomas Toivonen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

考虑到 props 的渲染限制和 state 的好处，如果你使用 react hooks，你可以使用一些技巧。例如，您可以使用 useEffect 手动将道具转换为状态。它可能不应该是最佳实践，但在这些情况下它会有所帮助。

 import { isEqual } from 'lodash';
 import { useEffect, useState } from 'react';

 export const MyComponent = (props: { users: [] }) => {
 const [usersState, setUsersState] = useState([]);

 useEffect(() => {
 if (!isEqual(props.users, usersState)) {
 setUsersState(props.users);
 }
 }, [props.users]);

 <OtherComponent users={usersState} />;
 };

原文由 Lucas Simões 发布，翻译遵循 CC BY-SA 4.0 许可协议