React学习专题之父组件向子组件进行传值

1.使用 Props： Props 是将数据从父组件传递到子组件的最常见方法。它们只是在渲染时传递给子组件的 JavaScript 对象。要使用 props，您需要首先在父组件中定义 props。这可以通过props向组件的 JavaScript 对象添加属性来完成。例如：

JavaScript

const ParentComponent = () => {
  const data = {
    name: "John Doe",
    age: 30,
  };

  return (
    <div>
      <ChildComponent data={data} />
    </div>
  );
};

在父组件中定义了 props 后，您可以props在渲染子组件时使用属性将它们传递给子组件。例如：

JavaScript

const ChildComponent = (props) => {
  return (
    <div>
      <h2>{props.data.name}</h2>
      <p>Age: {props.data.age}</p>
    </div>
  );
};

2.使用上下文：上下文是在组件之间传递数据的更高级方法，特别是当您需要跨组件树的多个级别共享数据时。这是一种使某些数据可供 React 应用程序中的所有组件使用的方法，无论其嵌套级别如何。要使用上下文，首先需要使用该React.createContext()函数创建一个上下文对象。例如：

JavaScript

const MyContext = React.createContext();

创建上下文对象后，您可以将组件树包装在Provider组件中。该Provider组件将上下文对象作为 prop，并使上下文值可供其所有后代组件使用。例如：

JavaScript

const App = () => {
  const data = {
    name: "John Doe",
    age: 30,
  };

  return (
    <MyContext.Provider value={data}>
      <div>
        <ChildComponent />
        <AnotherChildComponent />
      </div>
    </MyContext.Provider>
  );
};

要从子组件访问上下文值，可以使用钩子useContext()。该useContext()钩子将上下文对象作为参数并返回上下文的当前值。例如：

JavaScript

const ChildComponent = () => {
  const data = useContext(MyContext);

  return (
    <div>
      <h2>{data.name}</h2>
      <p>Age: {data.age}</p>
    </div>
  );
};

一般来说，对于简单的数据共享场景，推荐使用 props 在组件之间传递数据。但是，如果您需要在组件树的多个级别之间共享数据，或者需要使数据可供并非提供数据的组件的直接后代的组件访问，那么上下文是更好的选择。

以下是每种方法的优缺点的总结：

道具

优点：

• 简单易用
• 适用于简单的数据共享场景
• 无需额外设置

缺点：

• 不适合跨组件树的多个级别共享数据
• 非提供数据的组件的直接后代的组件无法访问数据

语境

优点：

• 适合跨组件树的多个级别共享数据
• 上下文树中的所有组件都可以访问数据
• 允许集中数据管理

缺点：

• 设置和使用更复杂
• 如果过度使用可能会导致性能问题