react中的useContext--为什么使用（一）

React 的数据传递流程

在 React 中，数据传递通常是自上而下的，也就是父组件把数据通过 props 传递给子组件，子组件无法直接修改父组件的数据。

例子：父组件向子组件传递数据

const Parent = () => {
  const user = { name: "John", age: 24 };

  return <Child user={user} />;
};

const Child = ({ user }) => {
  return (
    <div>
      <h2>姓名: {user.name}</h2>
      <h2>年龄: {user.age}</h2>
    </div>
  );
};

问题不大，看起来很简单，对吧？

子组件传递数据的“噩梦”

但如果子组件需要修改父组件的数据，就必须通过回调函数，让子组件把新的数据“反向”传回父组件，让父组件更新数据。

例子：子组件修改父组件数据