react hooks（钩子）

参考：https://zh-hans.reactjs.org/docs/hooks-intro.html

概念理解

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。
（生命周期只存在于类组件中，hooks可以使函数式组件也包含状态）

常见的钩子函数

状态钩子：useState()

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

• React自带的一个hook函数，声明组件状态
• 参数可以设置state的初始值
• 返回值是一个只有两个元素的数组：[状态，状态更新函数]
  等同于类组件：

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

副作用钩子useStateuseEffect

更多API参考：https://zh-hans.reactjs.org/docs/hooks-reference.html

 // 副作用钩子的第二个参数，默认情况下，效果会在每次完成渲染后运行，但可以选择只在第二个参数发生变化时运行
  useEffect(() => {
    document.title = `点击次数为${count}`
  }, [count])

useRef

const refContainer = useRef(initialValue);

//标签添加属性
<标签名 ref={refContainer}/>

• useRef 在每次渲染时返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。返回的 ref 对象在组件的整个生命周期内持续存在。
• 当ref对象内容发生变化时，useRef并不会通知你，变更.current属性也不会引发组件重新渲染。如果想要在 React 绑定或解绑 DOM 节点的 ref 时运行某些代码，则需要使用回调 ref 来实现。

useMemo

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

• 把“创建”函数和依赖项数组作为参数传入useMemo，它仅会在某个依赖项改变时才重新计算memoized值。避免每次渲染时进行高开销计算；
• 不要在这个函数内部执行不应该在渲染期内执行的操作；
• 如果没有提供依赖数组，useMemo在每次渲染时都会计算新的值

useCallback

• 把内联回调函数及依赖项数组作为参数传入 useCallback，它将返回该回调函数的 memoized 版本，该回调函数仅在某个依赖项改变时才会更新。