React 常用Hook(一)useEffect

useEffect

import React, { useState, useReducer, createContext, useContext, useEffect } from 'react';
import { render } from '@testing-library/react';



function App(): any {
  const [n, setN] = useState(0)
  const onclick = () => {
    setN(i => i + 1)
  }
  useEffect(() => {//对环境的改变就是副作用
    console.log("第一次渲染")
  }, [])//空的就是第一次渲染执行
  useEffect(() => {
    if (n !== 0) {
      console.log("n变化了");//n变化的时候才执行包括第一次
    }
  }, [n])//就是n变化才执行
  useEffect(() => {
    console.log("所有变化了");
  })//不写就是任何一个state变化都会执行
  useEffect(() => {
    const id = setInterval(() => {
      console.log("h1")
    }, 1000)
    return () => {//return表示当中国组件挂掉的时候我要执行什么？
      window.clearInterval(id)//停止定时器 
    }
  })//不写就是任何一个state变化都会执行
  return (
    <div className="sss">
      <h1>{n}</h1>
      <button onClick={onclick}>我是吧吧</button>
    </div>
  );
}



export default App;

总结

副作用
对环境的改变即为副作用
作为 componentDidMount 使用 []作为 第二个参数
作为 componentDidUpdate使用，可指定依赖
作为 componentWillUnmount使用 通过return
以上3最种用途可以同时存在
特点如果同时存在多个useEffect会按照出现次序执行