[Day - 29] React Hooks useEffect 学习笔记

useEffect - 副作用处理

useEffect：资料获取、订阅或手动方式修改 React Component DOM 都可以称为副作用 (side effect)。useEffect正是用来处理这些副作用的。同时 useEffect也是 componentDidMount，componentDidUpdate和componentWillUnmount这几个生命周期方法的统一。

基本使用

基本结构用法：useEffect(callback, array)
callback：回调函式，用於处理副作用逻辑。
array (可选)：一个阵列，用於控制与执行。

import React, { useState, useEffect } from 'react'

const Example = (props) => {
  const [count, setCount] = useState(0);
  useEffect(() => {
    // 更新页面标题
    document.title = `You clicked ${count} times`
  })
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  )
}

callback 副作用逻辑

useEffect(callback, array)
callback (回调函式)是useEffect的第一个参数，我们所有的副作用逻辑都应该在这里处理。另外，我们可以在 callback 中返回一个函式，用於清理工作。