Hook 简介

参考官网----https://react.docschina.org/docs/hooks-overview.html

由于组件类存在以下缺点：

大型组件很难拆分和重构，也很难测试
业务逻辑分散在组件的各个方法之中，导致重复逻辑或关联逻辑
组件类引入了复杂的编程模式，比如 render props 和高阶组件

因此React 16.8 新增特性Hook。它可以让你在不编写 class 组件的情况下使用 state以及其他的 React 特性。

React 团队建议在编写组件时尽量使用函数组件。如下：

function Welcome(props) {
   return <h1>Hello, {props.name}</h1>;
}

但是，这种写法有重大限制：函数组件必须是纯函数，不能包含状态，也不支持生命周期方法，因此无法取代类。
React Hooks 的设计目的，就是加强版函数组件，完全不使用"类"，就能写出一个全功能的组件。

useState Hook

useState 会返回一对值：当前状态和一个让你更新它的函数，你可以在事件处理函数中或其他一些地方调用这个函数。返回的更新函数类似 class 组件的 this.setState，但是它不会把新的 state 和旧的 state 进行合并。例如：

// 使用 useState Hook
const [state, setState] = useState({
	count: 0,
	name: 'Tom'
})
// 更新 state
setState({
	...state,	// hook 不会把新的 state 和旧的 state 进行合并，需要我们自己手动合并
	count: state.count + 1
})

完整使用示例如下：

import React, { useState } from "react";

export default function  HookComponent()  {
    /**
     * 使用 useState Hook 可以让函数组件使用类似 state 的功能
     * 一个函数组件可以多次使用 useState 创建多个 state
     * 所以这里有两种编程风格，如下：
     * 1、一个函数组件调用一次 useState, 传入一个对象，并全程维护这个对象
     * 2、多次使用 useState, 传入任意值，并使用对应的 setXXX 维护这些 state
     */

    // 编程风格一：一个函数组件调用一次 useState, 传入一个对象，并全程维护这个对象
    const [state, setState] = useState({
        count: 0,
        name: 'hjj'
    })

    // 编程风格二：多次使用 useState, 传入任意值，并使用对应的 setXXX 维护这些 state
    const [word, setWord] = useState('hello Hook')
    
    console.log(state, word)
    return (
        <div>
            <p onClick={clickHandle}>Hook组件------》 {state.count}</p>
            <p onClick={clickHandle}>Hook组件------》 {word}</p>
        </div>
    )

    function clickHandle() {
        setState({
            ...state,   // 合并对象，hook 不会自动合并对象，需要我们手动合并
            count: state.count + 1
        })
        setWord('my name is Tom')
    }
}

useEffect Hook

useEffect Hook 相当于componentDidMount，componentDidUpdate 和 componentWillUnmount这三个生命周期的组合。其用法如下：

useEffect(()  =>  {
  // Async Action
}, [dependencies])

上面用法中，useEffect()接受两个参数。

第一个参数是一个函数，异步操作的代码放在里面。
第二个参数是一个数组，用于给出 Effect 的依赖项，只要这个数组发生变化，useEffect()就会执行。第二个参数可以省略，这时每次组件渲染时，就会执行useEffect()。

以前，放在componentDidMount里面的代码，现在可以放在useEffect()。

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

export function Example() {
  const [count, setCount] = useState(0);
  /**
   * 情况一：有传入第二个参数时
   *    1. 因为依赖的时 count, 所以当 count 发生改变时，useEffect 就会触发
   *    2. 如果依赖的不是 count, 那么即使 count 发生改变，useEffect 都不会触发, 但是在页面初次挂载时依然会触发
   * 
   * 情况二：没有传入第二个参数
   *    这是只要每次组件渲染，都会触发 useEffect
   */
  useEffect(() => {
    console.log(count)
  }, [count]);  

  return (
    <div>
      <p>点击次数：{count}</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}