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} // 循环...循环...循环
		/>
	）
}

---

useEffect 的 用法以及特性