深入理解 React 单向数据流：构建高效、可维护的组件架构

在 React 开发中，单向数据流是核心概念之一。它确保了数据的流向清晰且可预测，从而让组件之间的交互更加稳定和易于维护。本文将深入探讨 React 的单向数据流机制，从数据传递方式、更新机制，到优化技巧和高阶用法，帮助你构建更加高效和可维护的 React 应用。

单向数据流：数据总是从父组件流向子组件。父组件通过props将数据传递给子组件，子组件通过props接收数据。

如果子组件需要修改数据，通常需要通过回调函数通知父组件，由父组件来更新状态，并将新的数据通过props传递给子组件。

• 数据传递方式：主要依赖于 props。父组件通过 props 将数据传递给子组件，子组件通过解构 props 来接收数据。这种方式简单直接，但需要确保数据的流向是单向的
• 数据更新机制：当子组件需要修改数据时，不能直接修改 props，而是需要通过回调函数通知父组件。父组件更新状态后，新的数据会通过 props 传递给子组件，从而实现数据的更新
• 数据流的优化：
  • 使用React.memo避免不必要的渲染（通过缓存组件的渲染结果，避免因 props 的浅比较而引起的不必要的渲染）
  • 使用useCallback优化回调函数（确保回调函数在依赖项未发生变化时不会重新创建，从而避免不必要的渲染）
  • 使用 Immutable 持久化数据提升性能（确保数据的不可变性，从而避免因数据变化而引起的不必要的渲染）
• 数据流的高阶用法
  • 使用Context进行跨层级数据传递（可以在组件树中共享数据，而无需逐层传递 props）
  • 使用useReducer管理复杂状态（通过定义一个 reducer 函数来处理状态的更新，从而实现更加清晰的状态管理）

---

不要将接收到的参数本地化， 或者 确保组件完全受控。

当组件中的重要信息是由 props 而不是其自身状态驱动时，就可以认为该组件是"受控组件" -- 受控组件和非受控组件

受控组件是指组件的状态完全由父组件通过 props 控制，而非受控组件则依赖于自身的内部状态。为了确保数据流的清晰和可维护性，建议尽量使用受控组件。

错误示例

// ❌ 错误示例
const Child = ({value}) => {
  const [data, setData] = useState(value);
  return <div>{data}</div>;
};

上述代码中，子组件将 props 存储到 state 中，导致组件不再受控。父组件更新 value 时，子组件不会响应。

正确示例

// ✔️ 正确示例
const Child = ({value}) => {
  return <div>{value}</div>;
};

正确的处理方式，直接渲染即可，确保数据流不被阻断！

对 prop "加工"

❓如需要对 `props 进行加工，该如何处理？

prop作为初始状态

利用 useMemo 对加工过程进行缓存，仅当依赖变化时才重新执行

const Child = ({ value }) => {
  const [data, setData] = useState('');
  // 这里使用 useEffect 是等价的
  useMemo(() => {
    setData(`innerData：${value}`);
  }, [value]);
  return <div>{data}</div>;
};

也可以更直接（简单）处理

const Child = ({ value }) => {
  const data = `innerData：${value}`;
  return <div>{data}</div>;
};

📢 如果传入的是引用类型的prop（如对象或数组），并且需要对其数据进行变更，需要特别小心，因为直接修改传入的引用类型prop可能会导致不可预测的副作用，违反 React 的单向数据流原则！

子组件修改 prop

通过回调函数将修改后的数据传递回父组件。父组件可以根据需要更新状态，并将新的数据作为prop传递给子组件。

const Child = ({ value, onChange }) => {
  return (
    <div>
      <input value={value} onChange={(e) => onChange(e.target.value)} />
    </div>
  );
};