React中useState初始值造成的性能问题

useState可以传递参数，会作为state的初始值。

如果这个初始值要通过函数获取，那这里的写法得稍微注意一下。

const getInitValue = (): number => {
  for (let i = 0; i < 99999999999; i++);

  return 1;
};

const Comp = (): JSX.Element => {
  const [value, plus] = useState(getInitValue());

  return (
    <div onClick=() => plus(value + 1)>{value}</div>
  );
};

这样一个组件，每次reander的时候都会再调用一下getInitValue，也就是说每次都有大循环，这样就会造成渲染比较慢。

解决方法其实比较简单，可以提前算好，也可以放到ref里面。

官方其实也提供了方案，就是直接给useState传递函数，不需要调用。

const [value, plus] = useState(getInitValue);

这样react会帮我们做好相关处理。