时间戳

首页 > 解决方案 > 如果初始值是具有大量计算的函数，useState 是否会导致渲染？

javascript - 如果初始值是具有大量计算的函数，useState 是否会导致渲染？

问题描述

我正在学习反应钩子，需要对此有所了解。

考虑下面的代码：

const [state, setState] = useState(() => {
  const initialState = someExpensiveComputation(props);
  return initialState;
});

如果 dom 已经渲染，然后 someExpensiveComputation 完成，那之后会重新渲染 dom 吗？

任何帮助都会很有用。

标签： javascriptreactjsreact-hooks

解决方案

它不会再次渲染，但同时会等到计算结束，因为它是同步操作，无法异步处理初始计算。

从用户体验和应用程序性能的角度来看，更好的选择是在使用useState(). 相反，您可以使用useEffect()：

Effect Hook 允许您在函数组件中执行副作用。

例如，对于空依赖数组，它将只执行一次：

const [result, setResult] = useState(null);

useEffect(() => {
   const value = someExpensiveComputation(props);
   setResult(value);   
}, []);

最后，此解决方案将再次导致渲染，但您可以在return语句中处理它，如下所示：

return <>
   {
      result && <p>Result: {result}</p>
   }
<>

我希望这会有所帮助！

推荐阅读