使用函数组件和Hooks API实现类组件的生命周期

写作目标：梳理react类组件的生命周期是如何被在react 16.8推出的Hooks API实现的，帮助大家在学习使用函数定义组件的过程中少走弯路

阅读内容打卡：

了解react类组件的生命周期，不同生命周期会被调用的函数

了解react函数组件和hooks api如何实现同样的生命周期

了解useEffect函数的定义差异

1.了解react类组件的生命周期，不同生命周期会被调用的函数

生命周期(lifecycle)	被调用的函数(methods）（按调用顺序）
mounting	constructor() //定义状态 render() //初次渲染 componentDidMount() //执行副作用
updating	render() //再次渲染 componentDidUpdate(prevProps) //执行副作用
unmounting	componentWillUnmount() //清理副作用

2.了解react函数组件和hooks api如何实现同样的生命周期

生命周期(lifecycle)	类组件 被调用的函数(methods）（按调用顺序）	函数组件 被使用的hookapi （按顺序执行）
mounting	constructor() //定义状态 render() //初次渲染 componentDidMount() //执行副作用	setState() //定义状态 return //完成初次渲染 useEffect(参数1，参数2) //执行副作用
updating	render() //再次渲染 componentDidUpdate(prevProps) //执行副作用	return //再次渲染 useEffect(参数1，参数2) //执行副作用
unmounting	componentWillUnmount() //清理副作用	调用useEffect的第1个参数返回的函数 //清理副作用，以防内存泄漏

3.useEffect函数的定义差异

定义：useEffect(effectFunction, *DependencyArray)

useEffect一旦被定义了，肯定会在初次渲染，即mounting阶段，被调用

但是否在剩余的生命周期中再次被调用，取决于第2个参数。

总结：只有当第2个参数为空数数组（[])的时候，useEffect才不会被再次调用，即在组件的整个生命周期中只被调用1次。