react hook -- useEffect

使用Effect hook可以在函数组件中执行副作用

副作用

• data fetching
• setting up a subscription
• manually changing the DOM
• logging

useEffect 可以看作是 componentDidMount, componentDidUpdate 和 componentWillUnmount 的结合，且useEffect不会阻塞浏览器更新screen。

useEffect 使用方法及执行时机：

1. Effects Without Cleanup - 该例子会在每次render之后都执行effect
   • 组建挂载后-componentDidMount
   • 每次update后-componentDidUpdate

useEffect(() => {
  document.title = `You clicked ${count} times`;
})

2. Effects With Cleanup - 该例子的effect返回了一个函数
   • 其他内容在每次render之后会执行
   • 返回的函数内容会在组件卸载之前(等同于componentWillUnmount)执行

useEffect(() => {
  const handStatusUpdated = (status) => {
    setIsOnline(status.isOnline)
  }
  ChatAPI.subscribe(friend.id, handStatusUpdated);
  return ChatAPI.unsubscribe(friend.id, handStatusUpdated);
})

3. 在同一个组件中多次使用useEffect - React会按照指定的顺序应用每个effect
4. Skipping Effects - 只有count改变才会re-run该effect

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count])

useEffect(() => {
  const handStatusUpdated = (status) => {
    setIsOnline(status.isOnline)
  }
  ChatAPI.subscribe(friend.id, handStatusUpdated);
  return ChatAPI.unsubscribe(friend.id, handStatusUpdated);
}, [friend.id])

5. 只在mount和unmount时运行的effect - 依赖项传入空数组

useEffect(() => {
  // code block
}, [])

总结

学习useEffect要理解什么是副作用以及使用useEffect传入不同的参数时能达到什么效果。
对于effect返回函数的情况可以单独进一步了解，该处并不仅仅是组件卸载时才会执行。