hook
- 类组件可以定义自己的state（状态），用来保存在组件自己内部的状态，函数组件是没有状态的，因为函数组件的变量他试试局部的，每次调用都会开辟新的空间和新的变量，函数运行完毕以后，变量会被浏览器的垃圾回收机制收回。
- 类组件有生命周期，我们可以在对应的生命周期中完成自己的逻辑，类组件在状态改变的时候回重新执行render方法。函数组件在重新渲染的时候，回全部执行。没有办法去调用componentDidUpdate生命周期。
注意：1.条件判断语句、循环语句或者分支里不能使用hook，只能在函数最外层。2.只能在react函数组件中使用hook。
总结：hooks是react16.8新增的特性，他可以让我们在不编写class组件的情况下使用state或者react特性（生命周期）
常用hook
useState
- useState是让函数组件具有类组件的state（状态）。
1.userState是一个js函数需要传入初始状态（initialState）。
2.useState会返回一个数组，数组中第一个值（state）表示更行过后的状态。第二个值（setState）表示更新状态的方法。
const [state,setState] = userState(initialState)
useEffect
- 函数组件中没有生命周期，就可以使用useEffect来代替。我们可以把useEffect看作componentDidmount、componentDidUpdate、componentWillUnmount的三个生命周期方法的组合。
1.useEffect有两个参数第一个参数是在函数组件出发了更新时触发的事件。第二参数是指定更某个参数改变时才执行第一个参数。
useEffect(() => {
document.title = `You clicked ${count} times`;
}, [count]); // 仅在 count 更改时更新
useRef
1、获取DOM元素。useRef在第一次渲染的时候创建一个对象以后，之后重新渲染时，如果发现已经创建过了不在创建新的Ref对象。
export default function App() {
const inputRef = createRef();
const useInputRef = useRef();
return (
<div>
<input type="text" ref={inputRef} />
<button
onClick={(e) => {
inputRef.current.focus();
}}
>
焦点
</button>
<input type="text" ref={useInputRef} />
<button
onClick={(e) => {
useInputRef.current.focus();
}}
>
焦点
</button>
</div>
);
}
