react hooks（二） useEffect

useEffect()
1.第二个参数为空数组时(组件创建时触发)
useEffect(()=>{
     do something 
},[])
Effect 内的代码不使用任何属性或 state，因此你的依赖数组为 []（空）。这告诉 React 仅在组件 “挂载”（即第一次出现在屏幕上）时运行此代码。

2. 第二个参数不为空数组时
useEffect(() => {
  const map = mapRef.current;
  map.setZoomLevel(zoomLevel);
}, [zoomLevel]);
当zoomLevel改变时执行useEffect中的代码(类似vue中的watchEffect)

注意：当某些东西可以从现有的属性或状态中计算出来时， 不要把它放在状态。 而是，在渲染过程中计算它。
错误示例：
function Form() {
  const [firstName, setFirstName] = useState('Taylor');
  const [lastName, setLastName] = useState('Swift');

  useEffect(() => {
    setFullName(firstName + ' ' + lastName);
  }, [firstName, lastName]);
  // ...
}
正确示例：
function Form() {
  const [firstName, setFirstName] = useState('Taylor');
  const [lastName, setLastName] = useState('Swift');
  // ✅ Good: calculated during rendering
  const fullName = firstName + ' ' + lastName;
  // ...
}

3.副作用的清理(即组件卸载时执行的操作)
useEffect(() => {
    const connection = createConnection();
    connection.connect();
    return () => {
      connection.disconnect();
    };
 }, []);
如果你的副作用获取了一些东西，清理函数应该 中止请求 或忽略它的结果：
useEffect(() => {
  let ignore = false;

  async function startFetching() {
    const json = await fetchTodos(userId);
    if (!ignore) {
      setTodos(json);
    }
  }

  startFetching();

  return () => {
    ignore = true;
  };
}, [userId]);

useEffect发送请求
注意：不用直接在useEffect全局函数中使用async await 
如：useEffect (async()=>{})
以下为正确方式
function App(){
  useEffect(()=>{
     async function loadDate(){
          const res = await  axios请求
}
})
}