useState 设置为函数类型时候需要注意的点
自己最近在一次重构中,尝试给予一个 state 为一个 class 的时候,却发现抛出了无法 new 的异常。
import React, { useState } from "react";
import A from './A'
const MyComponent = (props) => {
const [myCls, setCls] = useState();
const handleClick = () => {
setCls(A);
};
return (
<button type="button" onClick={handleClick}>
A button
</button>
);
};
其实设置函数类型时候,一般都不推荐这样用,因为在 usestate
里面有个隐藏的实现,
就是如果传入的是函数,会默认其为一个更新函数,也就是会去执行它,而不是简单的设置一个变量绑定
这样你就明白了,为什么设置 Class 并不是一个很好解法。
但是如果需要这么做,依旧有一个比较 hard 的方式,因为它会执行一次,并设置执行后结果,你可以包裹一下,
setMyFunc(() => A);
推荐阅读下官方文档的详细说明: https://reactjs.org/docs/hooks-reference.html#functional-updates