React Hook

Hook 是 React 16.8 增加的新特性，它可以使你在不使用 class 的时候使用 state 和 react 的其他特性。

State Hook

例：用 State Hook 实现一个计数器。

import React,{useState} from 'react';

function Counter(){
	const [count,setCount] = useState(0);

	return <>
		<p>当前计数:{count}</p>
		<button onClick={() => setCount(count + 1)}>点击加一</button>
	</>
}
ReactDOM.render(<Counter />,document.getElementById('root'))

1. useState 唯一的参数就是传进去的初始参数 ‘0’，它不是一个对象。如果需要的话，可以把它设置为对象，且这个参数只有第一次渲染时会用到。
2. 解构出来的第一个参数是初始化 state 返回的 getter。第二个参数是修改初始化参数的回调函数。
3. Hook 不能在 class 组件中使用。
4. 更新 state，总是替换它，而不是像 class 中的状态合并它。

Effect Hook

Effect Hook 类似于 class 组件中的componentDidMount、componentDidUpdate 和 componentWillUnmount,它们的用途相似，所以表现就为：React 完成 DOM 的更改之后，Effect 会运行，因为它在组件内部声明，同时它也就可以访问到组件的 props 和 state。

import React,{useState,useEffect} from 'react';

function Counter(){
	const [count,setCount] = useState(0);
	useEffect(()=>{document.title = `点击了${count}次`})
	return <>
		<p>当前计数:{count}</p>
		<button onClick={() => setCount(count + 1)}>点击加一</button>
	</>
}
ReactDOM.render(<Counter />,document.getElementById('root'))

• 上面这个例子，当点击了 button ，更新完 DOM 之后，标题会因为 Effect 函数更新。
• 在 Effect 里面返回一个清除 Effect 的，这样就可以取消 Effect 对这个组件的订阅。

Hook 使用规则

1. 只能在函数最外层调用 Hook,不要在循环、条件判断或者子函数中调用。
2. 只能在 React 的函数组件中调用 Hook。不要在其他 JavaScript 函数中调用。