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

Question

我正在学习react hook，需要对此进行一些澄清。

考虑以下代码：

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

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

任何帮助都是有用的。

Answer 1

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

从用户体验和应用程序性能的角度来看，更好的选择是在使用useState()创建状态对象时避免大的计算。相反，您可以使用useEffect():

效果挂钩可以在功能组件中执行副作用。

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

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

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

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

我希望这能有所帮助！