React Hook笔记（2）- useEffect

官方描述：

useEffect Hook 可以让你在函数组件中执行副作用操作

副作用：数据获取，设置订阅以及手动更改 React 组件中的 DOM 都属于副作用

日常的“副作用操作”：ajax请求、业务逻辑处理、Dom操作等，封装到一个单独方法中去执行

作用：第一次渲染之后和每次更新之后都会执行，都会执行 useEffect 定义的代码 ，代替了react-class 几个生命周期的组合

使用步骤：

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

function Count() {

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

    // 用户类
  useEffect(() => {
    // 用户类自定义操作 
    // --模拟发送ajax请求，处理相关业务
  });


  useEffect(() => {
    // 用户类自定义操作 
    // --模拟发送ajax请求，处理相关业务
  },[count]);  // 只有count更新的时候，才会执行 以上代码

   // 数据操作
  useEffect(() => {
    // 数据操作 
    // --模拟发送ajax请求，处理相关业务
    

    // 组件销毁时，调用返回方法
    return ()=>{
    
    }
  });

  
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

第一步：引入 hook-useEffect

第二步：调用useEffect(fn1,[depsConst])

fn1,需执行的方法，必填  

[depsConst]-可选，依赖的集合， 传入参数后，仅参数更新，fn1 才会执行

fn1 中，若存在 返回函数callFn1, 则callFn1将在组件销毁时调用

使用技巧：

1，针对不同业务，可多次调用 useEffect()，业务分割清晰

useLayoutEffect

最后 简单提下useLayoutEffect会在所遇dom更新之后，同步执行uselayoutEffect，而 useEffect则是在组件渲染到屏幕之后延迟调用useEffect

可以理解为：先调用uselayoutEffect 后调用useEffect

组件卸载回调时机仍然是  先调用uselayoutEffect 后调用useEffect