一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第20天，点击查看活动详情。

useEffect 允许你可以在函数式组件中执行副作用代码。什么是副作用？是指函数被调用执行，完成了函数自己的的计算任务，但同时因为访问了外部数据，尤其是因为对外部数据进行了写操作，从而一定程度地改变了相关环境，比如数据获取、设置订阅以及手动更改 React 组件中的 DOM 都属于副作用，就和我们在class类组件中在componentDidMount中操作dom或者请求数据接口一样。我们可以把useEffect看做componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

使用

语法类型定义

useEffect函数接收两个参数第一个是一个函数effect,第二个是一个只读的数组deps，不是必填的。 effect副作用执行函数，可以在函数内部写副作用代码，此函数可以返回一个函数或者返回空，返回函数的情况下该函数会在下次再执行effect或者组件销毁时执行，一般用于消除副作用。 deps依赖参数，当deps中的某个依赖值发生改变就会执行effect, 当useEffect没有设置deps时表示没有依赖项，每次组件重新渲染的时候就会执行effect，如果deps等于空数组时表示

// 语法类型定义
type Destructor = () => void | { [UNDEFINED_VOID_ONLY]: never };
type EffectCallback = () => (void | Destructor);
type DependencyList = ReadonlyArray<any>;

function useEffect(effect: EffectCallback, deps?: DependencyList): void;

使用例子

在第一个React.useEffect中执行接口请求获取name, 设置浏览器页签标题，定时执行count+1,并在最后返回一个清除副作用的函数，用于清除副作用域，第一个useEffect依赖了一个空数组，标识只能在初始的时候执行一次，相当于我们的class类组件中的componentDidMount,返回的函数相当域componentWillUnmount。
在第二个React.useEffect中依赖项是一个count,因此在初始时执行一次console,后面count反生变化后也会执行。

const Demo: React.FC = (props) => {
  const [name, setName] = React.useState<string>();
  const [count, setCount] = React.useState<number>(0);
  React.useEffect(() => {
    // 请求接口
    requstServerApi('....').then(data => setName(data))
    // 操作dom
    document.title = "Demo";
    // 添加定时器
    const timer = setInterval(() => setCount((prevCount) => prevCount + 1), 1000);
    // 返回一个用于清除定时器的函数
    return function _clearInterval() {
      clearInterval(timer)
    }
  }, []);
   React.useEffect(() => {
    console.log('当前count:',count);
  }, [count]);
  return (
    <React.Fragment>
      <div>姓名:{name}</div>
      <div>数量:{count}</div>
    </React.Fragment>
  )
}

注意

useEffect的依赖项变化的浅比较法来比较的，因此如果我们的依赖项是一个引用类型时要主要，如果用的化可以结合useCallback或者useRef。

React hooks之useEffect

使用

语法类型定义

使用例子

注意