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

如何更改钩子状态以仅重新渲染钩子而不是组件的渲染？我通过向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>
  );
}

从“react”导入{useState，usemo，useffect}；
导入“/styles.css”；
函数useTime（）{
常数[a，setA]=useState（0）；
console.log（“良好渲染”，a）；
useffect（（）=>{
设置间隔（（）=>{
刚毛（a+1）；
}, 3000);
}, []);
}
函数Aaa（）{
使用时间（）；
返回；
}
导出默认函数App（）{
控制台日志（“错误渲染”）；
返回(
);
}

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

如果不希望自定义挂钩导致重新渲染，那么最好将所有需要的逻辑封装在refs和effects中。这就是说，除非你的代码有其他问题（例如，很多非常复杂和耗时的代码），否则一些额外的重新渲染并不是世界上最糟糕的事情

早熟优化是一个问题，这一观点肯定是有道理的

也就是说，防止整个树重新渲染的不同方法是：

将逻辑封装在一个没有子级的单独组件中（如上所示）

在构成子对象的组件上使用React.memo React可以知道它应该通过在所有 确定是否重新渲染的道具

---

请看页面——请在问题中包含相关代码：）我很少问问题。完成；）