HOOK

函数式组件的this是undefined，它本身没有实例对象，所以没有声明周期这些；所以刚开始函数式组件只能定义一些简单的组件，react16.8之后引入了Hooks解决了这些问题；

1.React Hook/Hooks是什么

• Hook是react 16.8.0版本新增的新特性/新语法
• 可以让你在函数组件中使用state以及其他react特性

2. 三个常用的Hook

• State Hook:React.useState()
• Effect Hook:React.useEffect()
• Ref Hook:React.useRef()

3.State Hook

1. State Hook让函数组件也可以有state状态，并进行状态数据的读写操作；
2. 语法：const [xxx,setXxx]=React.useState(initValue)
3. useState()说明：
   • 参数：第一次初始化指定的值在内部作缓存；
   • 返回值：包含两个元素的数组，第一个为内部当前状态值，第二个为更新状态值的函数；
4. setXxx()两种写法：
   • setXxx(newValue):参数为非函数值，直接指定新的状态值，内部用其覆盖原来的状态值；
   • setXxx(value=>newValue):参数为函数，接收原本的状态值，返回新的状态值，内部用其覆盖原来的状态值；

以下就是一个加法的demo，页面上显示当前的数，点击按钮一次数字加一：

function Demo(){
    //这一行的代码的count每次执行之后就会保存在缓存中
    const [count,setCount]=React.useState(0)//数组的解构赋值
    //加的回调
    function add(){
        setCount(count+1)
    }
    return (
        <div>
            <h2>当前求和为：{count}</h2>
            <button onClick={add}>点我加1</button>
        </div>
    )
}

4.Effect Hook

1. Effect Hook可以让你在函数组件中执行副作用操作（用于模拟类组件中的生命周期钩子）
2. React中的副作用操作：
   • 发ajax请求数据获取
   • 设置订阅/启动定时器
   • 手动更改真实DOM
3. 语法说明：

   useEffect(()=>{
       //在此可以执行任何带副作用的操作
       return ()=>{
           //在组件卸载前执行
           //一般在这里做一些收尾工作，比如清除定时器/取消订阅等
       }
   },[stateValue])//如果指定的是[],回调函数只会在第一次render()后执行
   

4. 可以把useEffect Hook看作三个函数的组合：

• componentDidMount()
• componentDidUpdate()
• componentWillUnmount()

//让页面中的数字每隔1s自动加1
import ReactDOM from 'react-dom'
function Demo(){
    //这一行的代码的count每次执行之后就会保存在缓存中
    const [count,setCount]=React.useState(0)//数组的解构赋值
    React.useEffect(()=>{
        setInterval(()=>{setCount(count=>count+1)},1000)
    },[])//后面的参数为数组，表示监测的变量，这个函数相当于类式组件中的didUpdate和didMount
    //加的回调
    function add(){
        setCount(count+1)
    }
    function unmount(){
        ReactDOM.unmountComponentAtNode(document.getElementById('root'))
    }
    return (
        <div>
            <h2>当前求和为：{count}</h2>
            <button onClick={add}>点我加1</button>
            <button onClick={onmount}>卸载组件</button>
        </div>
    )
}

Ref Hook

1. Ref Hook可以在函数组件中存储/查找组件内的标签或任意其他数据；
2. 语法：const refContainer=useRef()
3. 作用：保存标签对象，功能和React.createRef()一样
   比如下面这个例子，在上面页面例子的基础上加了一个功能，新增了一个输入框和按钮，点击按钮展示输入框的信息

//让页面中的数字每隔1s自动加1
import ReactDOM from 'react-dom'
function Demo(){
    //这一行的代码的count每次执行之后就会保存在缓存中
    const [count,setCount]=React.useState(0)//数组的解构赋值
    const myRef=React.useRef()
    React.useEffect(()=>{
        setInterval(()=>{setCount(count=>count+1)},1000)
    },[])//后面的参数为数组，表示监测的变量，这个函数相当于类式组件中的didUpdate和didMount
    //加的回调
    function add(){
        setCount(count+1)
    }
    function unmount(){
        ReactDOM.unmountComponentAtNode(document.getElementById('root'))
    }
    function show(){
        alert(myRef.current.value)
    }
    return (
        <div>
            <input type="text" ref={myRef}/>
            <h2>当前求和为：{count}</h2>
            <button onClick={add}>点我加1</button>
            <button onClick={onmount}>卸载组件</button>
            <button onClick={show}>点我提示数据</button>
        </div>
    )
}