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>
  );
}