React：React Hook/函数组件使用State

对于函数组件（Function Component）来说，它没有 class 组件中的 componentDidMount、componentDidUpdate 等生命周期方法，也没有 State，但这些可以通过 React Hook 实现。

React Hook 是什么

Hook 是一个特殊的参数，它是 React 16.8 中新增的特性，可以让你在不编写 class 的情况下使用 State 以及其他的 React 特性。

// 引入
import React, { useState, useEffect, useRef } from 'react';

useState

在函数组件中使用 State 特性。
若使用对象做 State，useState 更新时会直接替换掉它的值，而不像 setState 一样把更新的字段合并进对象中。推荐将 State 对象分成多个 State 变量。

function AComponent(){
    const [allNumber,setAllNumber] = React.useState(1);
    return(
        

            {allNumber}
             setAllNumber(allNumber + 1)}>test
        
    )
}

等价于

class AComponent extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            allNumber:1
        };
    }
    render(){
        return(
                

                    {this.state.allNumber}
                     this.setState({allNumber: this.state.allNumber + 1})}>
                        test
                    
                
        );
    }
}

useEffect

Effect Hook 相当于componentDidMount、componentDidUpdate和componentWillUnmount的组合体。
默认情况下，useEffect会在第一次渲染之后和每次更新之后执行，每次运行useEffect时，DOM 已经更新完毕。
为了控制useEffect的执行时机与次数，可以使用第二个可选参数施加控制。

• 每次更新后执行

function AComponent(props){
    React.useEffect(()=>{
        console.log("每次更新后对会执行");
    });
}

• 某状态变化后再执行

function AComponent(props){
    React.useEffect(()=>{
        console.log("一次执行后，allNumber 值发生变化后会再次执行");
    },[allNumber]);
}

• componentDidMount 与 componentWillUnmount
  传递一个空数组（[]）作为第二个参数，这个 Effect 将永远不会重复执行，因此可以达到componentDidMount的效果。
  useEffect可以返回一个函数，该函数将在组件被卸载时的执行，可以等效于componentWillUnmount。

function AComponent(){
    React.useEffect(()=>{

        console.log("componentDidMount");
       
        return function cleanup() { console.log("组件被卸载componentWillUnmount")};
    },[]);
}

useRef

function AComponent(){
    const blockRef= React.useRef();
    return(
        
{console.log(blockRef.current)}}>
            useRef
        
    )
}

注意事项：https://zh-hans.reactjs.org/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies
参考文件：https://www.azimiao.com/6729.html
https://www.jianshu.com/p/16bef85ebd30