Question

我有一个父组件 A ，其中设置了state和useState。父级有两个孩子-组成部分 B 接收useState作为道具，组成部分 C 接收state作为道具。

因此，如果 B 运行setState，则 C 应该重新呈现。这一切都很好。我遇到的问题是 B 还在重新渲染，即使它没有收到state作为道具。理想情况下，我只希望 C 重新渲染。

此外，我也不想将先前的state与当前的state进行比较，因为如果它是一个高度嵌套的数组或包含大量数据的对象，那么对性能的影响可能会非常大。

有什么办法可以做到这一点？还是我必须使用诸如Context API之类的东西？

代码示例：

// App.jsx - A
const App = () => {
  const [state, setState] = useState(0);

  return (
    <div>
      <One updateNumber={setState} />
      <Two number={state} />
    </div>
  );
};

// One.jsx - B
const One = ({ updateNumber }) => {
  console.log("=> Render One");
  return (
    <button onClick={updateNumber.bind("", Math.random() * 10)}>Update Number</button>
  );
};

// Two.jsx - C
const Two = ({ number }) => {
  console.log('=> Render Two')
  return (<div>Number: {number}</div>)
};

Answer 1

如果父组件重新发布，其子代也将重新发布。

避免子组件出现这种行为的唯一方法是通过记忆该组件，使其仅呈现一次，因为它不依赖于任何状态更新。

Answer 2

state是父组件（ A ）的状态，当您从每个子组件 B ==>调用setState时，父组件会更新组件也将被重新渲染。为了防止组件B（仅接受setState作为道具）可以使用React.memo。

// One.jsx - B
const One = React.memo(({ updateNumber }) => {
  console.log("=> Render One");
  return (
    <button onClick={updateNumber.bind("", Math.random() * 10)}>Update Number</button>
  );
};)

注意：由于React guarantee setState will not be changed after each re-render可以直接将其传递给组件 B ，因此，如果传递常规函数，请确保将其与{{1}一起包装起来}来记住该功能。

请勿在这种情况下使用Context API，有 NO 可以防止重新呈现，因为当您从context API更新值时，将重新使用每个使用者-直接渲染而无需检查道具，

如何阻止useState重新呈现未使用状态的组件

2 个答案: