如果子状态值发生变化，我可以阻止父重新呈现吗？答案

【问题标题】：Can I prevent parent rerender if child state value changes?如果子状态值发生变化，我可以阻止父重新呈现吗？
【发布时间】：2021-12-27 00:30:53
【问题描述】：

所以我想跟踪一个对象中的所有组件树状态，但问题是如果我在子对象上使用设置状态，整个组件树似乎会重新呈现，而不仅仅是子对象。

假设我有这些组件：

const Parent = () => {
  const [ data, setData ] = useState({ parent: 0, child: 0 });

  console.log('parent rerenders but should not', data);
  return (
    <>
      <div>parent value: {data.parent}</div>
      <Child setData={setData} data={data} />
    </>
  );
};


const Child = ({ setData, data }) => {
  console.log('child rerenders and should', data);
  return (
    <>
      <div>child value: {data.child}</div>
      <button onClick={() => setData({ parent: 0, child: 10 })}>
        test
      </button>

    </>
  );
};

如您所见，我更改了孩子的值，但我不希望父母重新呈现，除非 data.parent 发生变化。

我的问题是：有什么方法可以在我的应用程序中使用此逻辑？请记住，我需要以某种方式跟踪一个对象中的所有组件树状态。也许是 redux？

【问题讨论】：

标签： reactjs redux

【解决方案1】：

父级重新呈现，因为您正在调用 setData，并且当您更新其状态之一时组件重新呈现。

将所有状态保存在一个组件中通常是个坏主意。要么给每个组件它们的状态，要么使用自定义钩子在组件之间共享状态逻辑。

【讨论】：