对于函数组件（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(
<div>
{allNumber}
<button onClick={() => setAllNumber(allNumber + 1)}>test</button>
</div>
)
}
等价于
class AComponent extends React.Component{
constructor(props){
super(props);
this.state = {
allNumber:1
};
}
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")};
},[]);
}
useRef
function AComponent(){
const blockRef= React.useRef();
return(
<div ref={blockRef} onClick={()=>{console.log(blockRef.current)}}>
useRef
</div>
)
}
注意事项：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
