react Hook useEffect 新特性生命周期

componentDidMount vs useEffect

类组件中，我们这样编写componentDidMount：

class Example extends React.Component {
  componentDidMount() {
    console.log('Did mount!');
  }
  render() {
    return null;
  }
}

在函数组件中，我们可以使用useEffect这样编写

function Example() {
  // 注意不要省略第二个参数 []，这个参数保证函数只在挂载的时候进行，而不会在更新的时候执行。
  useEffect(() => console.log('mounted'), []);  
  return null;
}

componentDidUpdate vs useEffect

类组件中，我们这样编写componentDidUpdate：

componentDidMount() {
  console.log('mounted or updated');
}

componentDidUpdate() {
  console.log('mounted or updated');
}

而在函数组件中，我们使用useEffect起到同样的效果：

useEffect(() => console.log('mounted or updated'));  // 不需要指定第二个参数

值得一提的是，现在官方推荐的编程规范就是不区分 update 阶段和 mount 阶段，两个阶段视为一致。

componentWillUnmount vs useEffect

类组件中，我们这样编写componentWillUnmount：

componentWillUnmount() {
  console.log('will unmount');  
}

而在函数组件中，我们使用useEffect起到同样的效果：

useEffect(() => {
  return () => {
    console.log('will unmount');  // 直接使用return返回一个函数，这个函数在unmount时执行。
  }
}, []);

你也可以使用useEffect 组合componentDidMount 和 componentDidUnmount。

useEffect(()=>{
	console.log("mounted")；
	return () => {
		console.log("unmounted");
	}
}, [Started])  // 前后两次执行的Started相等时，useEffect代码生效，否则跳过。