React 学习笔记 —— Effect Hook

• Effect Hook 可以使得函数式组件也能使用生命周期钩子
• React.useEffect()接收两个参数，参数1为函数，参数2为数组
• 参数1的函数会在组件挂载、数据更新时调用，参数2表示要监听的数据
• 参数1函数的返回值，会在数据更新、组件卸载时调用
• 模拟 componentDidMount

    React.useEffect(() => {
        console.log('componentDidMount')
    }, []) // 参数2为空数组，表示不监听任何数据，即只在挂载时执行，但数据更新不执行

• 模拟 componentDidUpdate + componentDidMount

    React.useEffect(() => {
        console.log('componentDidMount')
    }) // 参数2不传，表示任意状态更新都会调用，即挂载、更新时都会调用

• 模拟 componentWillUnmount

    React.useEffect(() => {
        return () => {
			console.log('componentWillUnmount')
		}
    }, [])	// 参数2传入空数组，表示不监听数据更新，保证只在组件卸载时执行