React中如何计算值并传递给父组件供兄弟组件使用？

初始需求逻辑 #

我们需要实现如下累加计算，并在React中拆分到父子组件渲染：

const items = [1, 1, 2, 3, 1];
let count = 0;
const result = items.map((x) => {count += x; return count;}); // 预期结果: [1, 2, 4, 7, 8]

要求：Parent组件负责渲染整个数组，Child组件负责渲染单个元素。

尝试过程与问题 #

1. 查阅父组件传值相关内容，但大多是基于事件（如onClick）的场景，不匹配循环更新值的需求。
2. 尝试使用React state，但因不熟悉逻辑导致浏览器卡死。
3. 考虑将计算逻辑放在Parent，Child仅负责渲染，但认为这种方式不够优雅，“处理单个元素”的逻辑未封装在一起。

接近可行的代码及问题 #

尝试了以下代码，但得到的结果是[2, 4, 8, 14, 16]，每个Child被调用两次：

function Child({ item, addCount }) {
  const newCount = addCount(item);
  return <div>{newCount}</div>;
}

function Parent({ items }) {
  let count = 0;
  const addCount = (x) => {
    count += x;
    return count;
  };
  return items.map((item) => <Child item={item} addCount={addCount} />);
}

function App() {
  const items = [1, 1, 2, 3, 1];
  return (
    <Parent items={items} />
  );
}

原因是React开发模式下的Strict Mode会强制组件渲染两次，每次渲染都会重置count为0，而addCount作为闭包会在两次渲染中分别累加，最终导致结果翻倍。同时，在渲染过程中修改外部let变量属于副作用操作，不符合React的纯渲染原则，容易引发不可预期的问题。

已实现的可行代码 #

在指引下写出了可正常运行的代码，但希望能将count += item;和渲染逻辑封装在一起：

function Child({ count }) {
  return <div>{count}</div>;
}

function Parent({ items }) {
  let count = 0;
  return items.map((item) => {
    count += item;
    return <Child count={count} />;
  });
}

function App() {
  const items = [1, 1, 2, 3, 1];
  return (
    <Parent items={items} />
  );
}

解决方案与建议 #

方案一：提前计算累加数组（推荐） #

提前在Parent中计算好所有累加值，再传递给Child渲染，符合React单向数据流原则，且不会受Strict Mode影响：

function Child({ count }) {
  return <div>{count}</div>;
}

function Parent({ items }) {
  // 用reduce一次性计算所有累加结果
  const accumulatedCounts = items.reduce((acc, current) => {
    const lastValue = acc.length > 0 ? acc[acc.length - 1] : 0;
    acc.push(lastValue + current);
    return acc;
  }, []);

  return accumulatedCounts.map((count, index) => (
    <Child key={index} count={count} />
  ));
}

function App() {
  const items = [1, 1, 2, 3, 1];
  return <Parent items={items} />;
}

如果实际逻辑复杂，可以把累加逻辑封装成独立工具函数，既保证代码复用，又让组件职责更清晰。

方案二：将累加逻辑封装到Child中 #

如果希望把累加计算和渲染放在Child里，可以让Parent传递前一次的累加值，由Child计算当前值：

function Child({ item, previousCount }) {
  const currentCount = previousCount + item;
  return <div>{currentCount}</div>;
}

function Parent({ items }) {
  let previousCount = 0;
  return items.map((item, index) => {
    const child = <Child key={index} item={item} previousCount={previousCount} />;
    // 更新下一个Child需要的前值
    previousCount += item;
    return child;
  });
}

function App() {
  const items = [1, 1, 2, 3, 1];
  return <Parent items={items} />;
}

这种方式实现了逻辑封装，但本质上还是Parent在管理累加状态，保证了渲染过程的可预测性。

核心原则总结 #

• 避免渲染过程中的副作用：不要在组件渲染时修改外部变量（如Parent中的let count），React可能会多次执行渲染逻辑，导致变量被重复修改。
• 单向数据流：子组件尽量只接收数据并渲染，不要直接修改父组件的状态或变量，保持数据流向清晰。
• 提前计算数据：优先在渲染前处理好所有需要展示的数据，再传递给子组件，减少渲染过程中的计算逻辑，提升性能和可维护性。

内容的提问来源于stack exchange，提问作者Michael Kim