[JavaScript知识库]react Hook useEffect()

• useEffect()

useEffect可以让你在函数组件中执行副作用操作，数据获取，设置订阅以及手动更改 React 组件中的 DOM 都属于副作用，可以把 useEffect Hook看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个生命周期函数的组合。

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

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCount(c => c + 1);
    }, 1000);
    return () => clearInterval(timer);
  }, []);

  return <div>{count}</div>
}

useEffect接收两个参数：
第一个参数：传递一个函数，会在每次页面进行渲染之后执行，如果在传递的函数中return了一个函数，则会在componentWillUnmount页面销毁前调用该函数方法。
第二个参数：传递一个数组，如果某些特定值在两次重渲染之间没有发生变化，可以通知 React 跳过对 useEffect 的调用，例：

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

参考资料：
https://zh-hans.reactjs.org/docs/hooks-effect.html