Javascript 反应：如何避免使用钩子重新呈现组件，钩子总是返回相同的值，但会更改其内部状态

想象一下，这个钩子每秒改变一次他的值，如果随机值是5的倍数，则返回true，否则返回false。 如何停止每秒重新渲染

PS：我尝试了useMemo和useRef返回始终相同的对象，但它仍然在重新渲染

请帮忙

const useRandomIs5x=（）=>{
const[state，setState]=useState（0）；
useffect（（）=>{
常数t0=设置间隔（（）=>{
设置状态（getRandomValue（））
}, 1000)
return（）=>clearInterval（到）
}, [])
返回状态%5==0；
}
常量根=（）=>{
const bool=useRandomIs5x（）；
log（“我每秒都在渲染”，bool）
回归试验
}

您可能需要以不同的方式处理它。你不需要随机值，你需要它是否可以被5整除。这就是应该处于的状态和从钩子返回的内容。随机值可以只是一个参考值。因此，请尝试类似这样的方法（代码未经测试，但应给出大致思路）：

---

我相信如果没有一些解决办法，这几乎是不可能的。要调用或不调用

setState

，必须访问当前状态值。如果我们在依赖项数组中传递

状态

，这是可能的。但是，每隔一秒钟就会重新创建一次间隔

使用ref也是可行的，但是没有一个正确的方法（目前）来监听ref的变化

更新：使用

useRef

作为前一个数据保持器，它似乎可以正常工作。多亏了安豪

const{useffect，useState，useRef}=React；
常量useRandomIs5x=（）=>{
const[state，setState]=使用状态（true）；
const ref=useRef（null）；
useffect（（）=>{
常数t0=设置间隔（（）=>{
const value=Math.floor（Math.random（）*5）%5==0；
如果（值===ref.current）返回；
参考电流=值；
设置状态（值）；
}, 1000);
返回（）=>clearInterval（t0）；
}, []);
返回状态；
}
常量根=（）=>{
const bool=useRandomIs5x（）；
log（'re-render！'，bool）；
回归试验
}
render（，document.getElementById（“根”））
我们最好将状态更改为存储为5x，而不是值。一种可能的解决方案是使用useRef检查是否应该每秒更新该值。然后，同步useRef和state值

const useRandomIs5x = () => {
  const [state, setState] = useState(false);
  const prevIs5x = useRef(false);
  useEffect(() => {
    const t0 = setInterval(() => {
      const is5x = getRandomValue() % 5 === 0;
      const isDiff = is5x !== prevIs5x.current;
      prevIs5x.current = is5x;
      if (isDiff) {
        setState((prevState) => !prevState);
      }
    }, 1000);
    return () => clearInterval(t0);
  }, []);
  return state;
};

我可以用这个库解决这个问题
将吊钩与部件隔离

选中此项
您忘记了依赖项数组中的
divisibleBy5
，如果没有它，
divisibleBy5
将始终为
true
。但这仍然不是最好的解决方案，因为每次渲染都会重新创建间隔。我同意使用“使用效果”仅设置真/假值。但是，如果useGetRandom来自第三部分，而我正在自定义挂钩中使用它呢？像useIs5x=（）=>{const random=useGetRandom（）；const is5x=getIs5x（random）；return is5x；}下面是示例代码：我同意使用use effect只设置真/假值。但是，如果useGetRandom来自第三部分，而我正在自定义挂钩中使用它呢？类似于useIs5x=（）=>{const random=useGetRandom（）；const is5x=getIs5x（random）；返回is5x；}
const useRandomIs5x = () => {
  const [state, setState] = useState(false);
  const prevIs5x = useRef(false);
  useEffect(() => {
    const t0 = setInterval(() => {
      const is5x = getRandomValue() % 5 === 0;
      const isDiff = is5x !== prevIs5x.current;
      prevIs5x.current = is5x;
      if (isDiff) {
        setState((prevState) => !prevState);
      }
    }, 1000);
    return () => clearInterval(t0);
  }, []);
  return state;
};