useRef 与 useState 的区别
一般在使用react-hook的时候,我们用到最多的就是定义变量,以及对应的修改变量
下面是一个最基本的 react-hook 应用程序
const Home = () => {
const [username, setUserName] = useState('');
return (
<input
value={username}
onChange={(e) => setUserName(e.target.value)}
/>
)
}
以上并不是以使用useState的方式来进行对useRef的衬托,两者功能是不同的,只是便于区分
但是如果我想让浏览器渲染的时候,让他的次数自增,这样就会有一些意想不到的隐患…
如下代码所示,当我使用 useEffect 钩子进行input值渲染的时候,他的状态会发生改变,然后又会重新渲染,状态又重新改变,于是就这样无限循环下去…
const Home = () => {
const [username, setUserName] = useState('');
useEffect(() => { // useEffect 页面渲染时所调用的钩子
setUserName(username => username + 1);
}, [username])
return (
<input
value={username} // 循环...循环...循环
/>
)
}