常用的hook

一、 为什么引入Hook?
hooks中的自定义Hook使得可以不修改组件的结构的基础上，灵活的复用组件逻辑。
class组件不能很好的压缩，并且热重载不稳定。不利于组件优化。使用Hook的函数组件不存在这些问题

二、Hook的规则
1、只能在函数组件中使用hooks 类组件中无效。
2、只能在函数最外层使用不能用于if，for等语句中，也不能用于普通js函数中。因为ReactHook通过调用顺序确定对应的state等对应的hook方法。使用语句等会改变顺序。
3、只能在以名字use开头的自定义Hook中使用

三、常用的hook
1、 useState
接受一个参数作为初始值，参数可以是常量，也可以是一个返回值的函数。
初始值如果是一个函数，在初次渲染执行；如果是一个函数的执行，每次渲染都会执行
这个是定义值的 里面能直接给值 也能写逻辑 需要的时候里面写一个函数 写一些需要的逻辑最后返回一个最终值即可

2、useEffect
它相当于是componentDidMount,componentDidUpdate,componentWillUnMount三个生命周期的合成体。
它接受两个参数， 第一个是一个函数（effect），第二个参数可选，是一个数组（第一个函数中用到的可变数据集合）。

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // 仅在 count 更改时更新；每次渲染，第一个函数都相当于一个新生成的函数

3、useContext
使函数组件可以具有和Class组件中的contextType属性（使可以通过this.context访问值）一样的功能。
用法和Class中contextType基本一致。接受一个context对象作为参数，返回最近的Provider提供的值。

const ThemeContext = React.createContext('dark');
function App() {
  const [theme, setTheme] = useState('dark');
  return (
    <ThemeContext.Provider value={theme}>
      <Child />
      <button onClick={() => setTheme(preTheme => preTheme === 'dark' ? 'light' : 'dark')}>切换主题</button>
    </ThemeContext.Provider>
  );
}
function Child() {
  const value = useContext(ThemeContext);
  return (
    <div>{value}</div>
  );
}

4、useReducer 可以看做useState的复合版。当应用中需要多个状态时，一般需要调用多次useState（便于组合逻辑）。随着应用逐渐扩展，会越来越复杂，此时可以使用useReducer。

5、useMemo：接受两个参数useMemo(()=>{ 立刻执行函数体，*返回一个值 },依赖) 返回一个值 作用：缓存值，依赖为空的话，这个函数体永远就执行一次

6、useCallback 作用：缓存一个函数 接受一个新函数 = useCallback (()=>{ 不立刻执行函数体，*返回一个函数 },依赖) 依赖不变内存地址永远不变，也只会执行一次 useCallback 和memo配合使用子类用memo包裹起来
useCallback 和 useMemo基本相同；不同点在于它返回一个函数，这个和’memorize-one’的功能相同。
7、memo()
这个是针对于子组件渲染的 父元素改变 子组件也会发生改变 运用了memo之后 依赖是空的时候 子组件不会发生改变 也不会重新渲染

8、React.createRef() React.useref()
这两个是定义ref的这两个使用的方法极为相似 区别是React.createRef() 每次加载的时候会产生不同的缓存地址而
React.useref()每次加载的地址就是第一次加载的地址 是不会变的

9、useImperativeHandle+forwardRef
该方法可以自定义（默认是DOM节点）子组件暴露给父组件的内容。
该方法基于Refs转发，需要和React.forwardRef结合使用。

import React, { useRef,useEffect, useImperativeHandle } from 'react';
import ReactDOM from 'react-dom';

function App() {
  const inputRef = useRef(null);
  useEffect(() => {
    // 在父组件查看获取到的子组件中传递的ref的内容
    console.log(inputRef); // {current: {focus: () => {...}}}
  });
  return (
    <div>
      <FancyInputWithRef ref={inputRef} />
    </div>
  );
}
// 子组件
function FancyInput(props, ref) {
  // 自定义ref暴露的内容
  useImperativeHandle(ref, () => ({
    focus: () => ref.current.focus()
  }), [ref]);
  return(
    <div>
      <input ref={ref} />
    </div>
  );
}
// 转发ref
var FancyInputWithRef = React.forwardRef(FancyInput);

ReactDOM.render(<App/>, window.root);