React Hook规则

Hook 本质是 JavaScript 函数，但在使用的时候它有着它需要遵循的规则：

1. 只在最顶层使用 Hook，这能够让 React 在多次的 useState 和 useEffect 调用中保持 hook 的状态正确。
2. 只在 React 函数中调用 Hook，也就是说在 React 的函数组件中调用 Hook，还有一点是在自定义 Hook 中调用其他 Hook。

为什么在顶层使用 Hook?

由一个在单个组件使用多个 state 的例子来说明，例：

function Example(){
     
	const [first,setFirst] = useState('first');
	useEffect(() => console.log(first));

	const [second,serSecond] = useState('second');
	useEffect(() => console.log(second));

	render(){
     
		return ...
	}
}

• React 靠着 Hook 调用的顺序来对应 state 和 useState。因为我们每次调用 Hook 的顺序都是相同的，所以上面的程序正常工作。

如果某一个调用顺序改变了会发生什么情况呢？

function Example(){
     
	const [first,setFirst] = useState('first');
	if(first !== 'first') useEffect(() => console.log(first));

	const [second,serSecond] = useState('second');
	useEffect(() => console.log(second));

	render(){
     
		return ...
	}
}

• 很明显 first !== ‘first’ 的值为 false，所以第一个 useEffect 将不会执行。如果按照我们的本意是从上到下依次执行，那么此时的条件判断打乱了我们的执行顺序。前一次执行了第一个 useEffect 而本次不会执行第一个useEffect，React 将不知道 第二个 useState 返回什么(对比前一次执行，React 把第二个useState 当作第一个 useEffect 执行了)。而且以后的 Hook 都提前执行了，导致 bug 产生。

解决办法：

• 让每次的 Hook 执行顺序都按照初次执行顺序一样执行就可以解决。如果要加入条件判断，我们把条件判断加到 Hook 程序里面去。例：

useEffect(() => {
     
	if(first !== 'first')console.log(first);
	// 每次都会执行useEffect，不过里面的内容可能不执行
	});