React函数组件使用State和生命周期方法(componentDidMount等)

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

React Hook 是什么

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

useState

在函数组件中使用 State 特性。

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

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

    return(
        <div>
            {allNumber}
            <button onClick={() => setAllNumber(allNumber + 1)}>test</button>
        </div>
    )
}

等价于:

class AComponent extends React.Component{
    constructor(props){//梓
        super(props);//喵
        this.state = {//chu
            allNumber:1//mo 博客
        };//www.azimiao.com
    }
    render(){
        return(
                <div>
                    {this.state.allNumber}
                    <button
                        onClick={() => this.setState({allNumber: this.state.allNumber + 1})}>
                        test
                    </button>
                </div>
        );
    }
}

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")};
    },[]);
}