Hooks

1.React Hook/Hooks是什么？

        （1）Hook是react 16.8.0版本增加的新特性（语法）

        （2）可以让你在函数组件中使用state以及其他的react特性

2.常用的Hook

(1) State Hook: React.useState()

        这个hook让函数组件也可以有state状态，并进行状态数据的读写操作

        语法： const [状态名， set状态名] = React.useState(初始值)

        说明：第一次初始化指定的值在内部做缓存

        返回值：包含两个元素的数组，第一个为内部当前状态值，第2个为更新状态值的函数

        setXXX的写法：

                setXXX(newValue):参数为非函数值，直接指定新的状态值，内部用其覆盖原来的状态值。

                setXXX(value => newValue):参数为函数，接收原来的状态值，返回新的状态值，内部用其覆盖原来的状态值。

(2)Effect Hook: React.useEffect()

        1.作用：可以让你在函数组件中执行副作用操作（用于模拟类组件中的生命周期钩子）

        2.React中的副作用操作：

                发送ajax请求数据、设置定时器、更改真实dom

        3.语法和说明：

                useEffect(() => {

                        在此可以执行任何带副作用操作

                return () => {   //在组件卸载前执行，相当于componentWillUnMount，可以在此处做一些收尾工作，比如清除定时器、取消订阅等。

                }

        },[stateValue] //如果指定的是[ ]，回调函数只会在第一次render（）后执行)

        4.可以把useEffect Hook看做如下三个函数的组合

                componentDidMount（）

                componentDidUpdate（）

                componentWillUnmount（）

(3)Ref Hook:React.useRef()

        Ref  Hook可以在函数组件中存储、查找组件内的标签或任意其他数据

        语法：const refContainer = useRef（）

        作用：保存标签对象，功能与React.createRef（）一样

代码示例：