react hooks 之 useEffect

useEffect

• useEffect 可以弥补函数组件没有生命周期的缺点。我们可以在useEffect第一个参数回调函数中，做一些请求数据，事件监听等操作，第二个参数作为 dep 依赖项，当依赖项发生变化，重新执行第一个函数。
• useEffect 看做 componentDidMount ，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。
• useEffect 执行顺序：组件更新挂载完成 => 浏览器 DOM 绘制完成 => 执行 useEffect 回调。
• 在 React 更新 DOM 之后运行一些额外的代码。比如发送网络请求，手动变更 DOM，记录日志，这些都是常见的无需清除的操作。

import React, { useEffect, useState } from "react";
import './App.css';

function App() {
    let [num1, setNum1] = useState(0);
    let [num2, setNum2] = useState(0);

    const add1 = () =>{
      setNum1(num1+1);
    }
    const add2 = () =>{
      setNum2(num2+1);
    }

  // 实时监听所有
  // useEffect(()=>{
  //   console.log('num1', num1);
  //   console.log('num2', num2);
  //   console.log('============');
  // })

  // 只在初次渲染时监听
  // useEffect(()=>{
  //   console.log('num1', num1);
  //   console.log('num2', num2);
  //   console.log('============');
  // },[])

  // 实时监听 num1
  useEffect(()=>{
    console.log('num1', num1);
    console.log('num2', num2);
    console.log('============');
  },[num1]);



  return (
      <div className="App">
        <h1 onClick={add1}>num1：{num1}</h1>
        <h1 onClick={add2}>num2：{num2}</h1>
    </div>
  );
}

export default App;

• useEffect 返一个函数用于清除事件监听等操作。

import React, { useEffect, useState } from "react";
import './App.css';

/* 定时器 延时器等 */
const timer = setInterval(()=>console.log('setInterval'), 1000);

/* 模拟事件监听处理函数 */
const handleResize =()=>{
  console.log('handleResize');
}
/* 事件监听 */
window.addEventListener('resize', handleResize);

function App() {
    let [num1, setNum1] = useState(0);

    const add1 = () =>{
      setNum1(num1+1);
    }

    // num1的值变化时清除
    useEffect(()=>{
      return function(){
        console.log('num1 值变化了');
        clearInterval(timer);
        window.removeEventListener('resize', handleResize);
      }
    }, [num1]);

    return (
        <div className="App">
          <h1 onClick={add1}>num1：{num1}</h1>
      </div>
    );
}

export default App;