react中组件传参

在React中，组件之间的通信和数据传递通常通过props（属性）进行。组件之间传参的方式主要有以下几种：

1. **基本类型**：可以直接将JavaScript的基本类型如字符串、数字、布尔值等作为props传递给子组件。

function ParentComponent() {
  const name = 'Alice';
  return <ChildComponent name={name} />;
}

function ChildComponent({ name }) {
  return <h1>Hello, {name}!</h1>;
}

2. **复杂类型**：可以传递对象或数组。对象通常作为props的默认值，并在需要时更新。

function ParentComponent() {
  const user = { username: 'alice', age: 25 };
  return <ChildComponent user={user} />;
}

function ChildComponent({ user }) {
  return (
    <>
      <p>Username: {user.username}</p>
      <p>Age: {user.age}</p>
    </>
  );
}

3. **函数式组件**：对于状态less的组件，可以使用`useCallback`, `useMemo`, 或者直接将计算结果作为props传递。

4. **Context API**：当组件树层次较深，props难以通过层级逐级传递时，可以使用Context来提供全局共享的状态。

5. **Props drilling**：虽然不是最佳实践，但如果组件层级非常深，也可以通过层层嵌套传递props，但这可能导致代码冗余。

6. **Redux或自定义Hook**: 更大规模的应用可能会使用状态管理库如Redux来管理全局状态，然后通过props从store中获取数据。