React Hook 学习笔记

useEffect

useEffect(effect, [])

• useEffect()在渲染完成后执行，而且是每次渲染完后都执行
• effect中能够返回一个函数，该函数将在组件卸载前执行，以实现与componentWillUnmount()类似的功能（一般用于清除副作用）
• 这个被返回的清除函数，事实上也是每次渲染后都执行，这会减少bug!
  https://zh-hans.reactjs.org/docs/hooks-effect.html#explanation-why-effects-run-on-each-update

在class组件中，为了避免在每次更新后都清理/执行effect，我们常这样利用componentDidUpdate()

componentDidUpdate(prevProps, prevState) {
  if (prevState.count !== this.state.count) {
    document.title = `You clicked ${this.state.count} times`;
  }
}

控制useEffect

在组件更新完成后，如果当前的state、props与之前的相同，就不去做某些操作，因此能优化性能。

在函数组件中，运用useEffect()方法，我们一样能做到这一点，而且更简单：

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // 仅在 count 更改时更新

即给useEffect()传入第二个参数：依赖列表，它是一个数组，里面存放需要进行比较的值，只要数组中的任一值与之前的不相等，就会执行effect，否则就跳过此次effect。