React：父组件状态更新后如何让子组件同步状态？

javascript

2024-03-02 23:31:18

父组件状态更新后如何更新子组件状态？

问题

在 React 中，父组件状态更新后，子组件不会自动感知到这一变化。这意味着子组件无法根据父组件的最新状态更新其自身的状态。这可能导致应用程序的行为不一致和混乱。

解决方法

有两种常见的方法来解决这个问题：

1. 使用回调函数

这种方法涉及在父组件的状态更新操作中传递一个回调函数给子组件。当父组件的状态更新时，它将调用回调函数，子组件可以使用该函数更新其自身的状态。

2. 使用 Context API

Context API 是一种 React 中的全局状态管理机制。它允许你在应用程序中的任何位置创建和访问共享状态。通过使用 Context API，你可以将父组件的状态作为共享状态提供给子组件。当父组件的状态更新时，子组件将自动重新渲染以反映这些更改。

实施示例

使用回调函数

// Parent 组件
const Parent = () => {
  const [parentState, setParentState] = useState(0);

  const updateParentState = () => {
    setParentState(prevState => prevState + 1);
  };

  return (
    <Child updateParentState={updateParentState} />
  );
};

// Child 组件
const Child = ({ updateParentState }) => {
  const [childState, setChildState] = useState(0);

  const updateChildState = () => {
    setChildState(prevState => prevState + 1);
  };

  return (
    <button onClick={() => {
      updateParentState();
      updateChildState();
    }}>
      Update States
    </button>
  );
};

使用 Context API

// 创建 Context
const MyContext = createContext();

// Parent 组件
const Parent = () => {
  const [parentState, setParentState] = useState(0);

  return (
    <MyContext.Provider value={{ parentState, setParentState }}>
      <Child />
    </MyContext.Provider>
  );
};

// Child 组件
const Child = () => {
  const { parentState } = useContext(MyContext);

  return (
    <div>
      Parent state: {parentState}
    </div>
  );
};