React Hooks

1 为什么会有Hooks

        React的组件创建方式，一种是类组件，一种是纯函数组件，并且React团队希望，组件不要变成复杂的容器，最好只是数据流的管道。开发者根据需要，组合管道即可。也就是说组件的最佳写法应该是函数，而不是类。

函数组件和类组件的区别：

        （1）函数组件没有状态（state），类组件有
        （2）函数组件没有生命周期，类组件有（挂载、更新、销毁）
        （3）函数组件没有this，类组件有
        （4）函数组件更适合做UI展示，类组件更适合做复杂的业务逻辑组件

使用Hooks的优点：

• 告别难以理解的Class( this 和 生命周期 的痛点)
• 解决业务逻辑难以拆分的问题
• 使状态逻辑复用变得简单可行
• 函数组件从设计思想上来看更加契合React的理念

React Hooks为我们提供的常用的钩子：

        useState()
        useEffect()
        useCallback()
        useMemo()
        useRef()
        useContext()
        useReducer()
不同的钩子为函数引入不同的外部功能，上面四种钩子都带有use前缀，React Hooks约定，钩子一律使用use前缀命名

useState()：状态钩子
纯函数组件没有状态，useState()用于设置和使用组件的状态属性。语法如下：

const [state, setState] = useState(initialValue);

state：初始的状态属性，指向状态当前值，类似this.state
setState：修改状态属性值的函数，用来更新状态，类似setState
initialValue：状态的初始值，该值会赋给state

注意：setState的命名为：set+State(初始状态名)，并且采用小驼峰命名法。

示例：使用Hooks重写计数器

const Count = () => {
    const [count, setCount] = useState(0); // 将0设置为count的初始值
    const addCount = () => {
        let newCount = count;
        setCount(newCount += 1);
    }
    return (
        <div>
            <p>{count}</p>
            <button onClick={addCount}>加1</button>
        </div>
    )
}

 useEffect()：副作用钩子

useEffect(() => {
    // 回调函数，其中是要进行的异步操作代码
}, [array])