useEffect

副作用

• 对环境或全局变量的改变就是副作用，例如修改document.title，对自己state的改变不是副作用
• 但我们不一定非要把副作用放在useEffect里
• 实际上叫afterrender更好，每次render后运行

用途

• 作为componentDidMount使用，[]变化执行，空数组只在初次渲染后执行
• 作为componentDidUpdate使用，[n,m]n和m变化执行，初始化n和m也是变化，由undifined变成初始值，可设置判断条件，消除初始变化

 useEffect(()=>{
    if(n>0){
      console.log("n变化了")
    }
  },[n])

• 作为componentWillUnmount使用，通过第一个参数的return设置，对环境的更改，离开前都要清除
• 以上三种可同时存在

特点

• 如果同时存在多个useEffect时，会按照出现顺序执行

 useEffect(()=>{
    console.log(1)
  },[])
 useEffect(()=>{
    console.log(2)
  },[])

1
2

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

function App() {
  const [n, setN] = useState(0)
  const onClick = () => {
    setN(i => i + 1)
  }
  useEffect(()=>{
    console.log(n)
  },[])
  useEffect(()=>{
    if(n>0){
      console.log("n变化了")
    }
  },[n])
  return (
    <div className="App">
      {n}
      <button onClick={onClick}>+1</button>
    </div>
  );
}

export default App;