Question

如何更改 Hook 状态以仅重新渲染 Hook 的渲染而不重新渲染组件？我通过向返回 null 的中间件组件添加逻辑来解决这个问题，但我不知道这是否是个好主意。

import { useState, useMemo, useEffect } from "react";
import "./styles.css";

function useTime() {
  const [a, setA] = useState(0);

  console.log("good-render", a);

  useEffect(() => {
    setInterval(() => {
      setA(a + 1);
    }, 3000);
  }, []);
}

function Aaa() {
  useTime();

  return <></>;
}

export default function App() {
  console.log("bad-render");

  return (
    <div className="App">
      <Aaa />
    </div>
  );
}

Answer 1

据我所知，您无法从钩子中停止组件渲染。每当组件中的状态发生变化时，该组件就会被设置为重新渲染，这会调用其中的所有钩子。事实上，有条件地调用钩子会破坏钩子的规则。

如果您不希望自定义钩子导致重新渲染，最好的办法是将所需的所有逻辑封装在 refs 和 effects 中。话虽如此，除非您的代码有其他问题（即很多非常复杂且耗时的代码），否则一些额外的重新渲染并不是世界上最糟糕的事情。

过早优化是一个问题的观点肯定是有道理的。

话虽如此，防止整个树重新渲染的不同方法是：

将逻辑封装在没有子级的单独组件中（如上所示）
在组成子组件的组件上使用 React.memo React 可以知道它应该通过引用检查所有 props 来决定是否重新渲染。

React - 通过钩子重新渲染组件

1 个答案: