hook之useEffect

useEffect的意义

useEffect这个hook给函数组件提供了函数的副作用操作。

所谓函数的副作用，就是函数除了返回返回值外还会对外界环境造成其它的影响。简单来说，我们可以理解为函数内去做一些操作，如修改外部的环境变量、做网络请求、调用一些API等待。

在Hook出来之前，如果我们需要在组件中进行副作用的话就需要将组件写成类组件，然后在组件的生命周期函数里面写副作用，这其实会引起很多代码设计上的问题，Hook出来之后，开发者就可以在函数组件中使用useEffect来定义副作用了。

useEffect的使用

useEffect()有三个参数，

第一个参数是useEffect调用时要触发的副作用函数（我们自己设计），即组件每次渲染都会从新运行这个函数；

第二个参数（可选）是依赖项dependencies来限制该副作用函数的执行条件；

第三个参数（可选）是副作用函数的return的函数，并在组件下一次渲染前执行，一般用于清除副作用影响。

标准写法;

useEffect( ()=>{

//定义操作

?return func

},？[dependencies])

//?代表可选，依赖项写在[ ]中，可以有多个，也可以写个空数组

//写个空数组代表副作用函数只会在组件初次渲染时执行，因为没有支持它改变的

//如果想要每次从新渲染都执行，直接不写[ ]就行了，这时它不依赖任何数据

总结：

useEffect(() => { }) //每次组件渲染都执行

useEffect(() => { return () => { } }, []) //组件第一次渲染执行,组件移除时触发clean函数

useEffect(() => { return () => { } }, [count])//count改变才会执行,组件重新渲染前触发clean函数

动手实践一下：

import React,{useState,useEffect} from 'react'
function App() {

  let [count,setCount]=useState(1)

  useEffect(()=>{
    console.log("发生了更新");
    // setCount(count+1)如果在函数内做刷新操作，副作用函数会一直执行，函数会造成死循环
    return ()=>{
      console.log("下一次更新的前一刻");
    }
  })
  return (
    
    <div className="App">
      {count}
      <button onClick={()=>{setCount(count+1);}}>修改count</button>
    </div>
  );
 
}

export default App;

点击按钮修改count时，页面会从新渲染，浏览器打印效果：

可以看出函数组件首次加载时，就会执行副作用函数。之后当组件页面从新刷新时，先执行副作用函数返回的返回值函数，然后在执行自己。

我们试一下加上依赖如何：

let msg="666" //定义一个变量作为副作用函数的依赖项

 useEffect(()=>{
    console.log("发生了更新");
    // setCount(count+1)如果在函数内做刷新操作，副作用函数会一直执行，函数会造成死循环
    return ()=>{
      console.log("下一次更新的前一刻");
    }
  
  },[msg])//绑定msg为依赖项后，除了首次渲染会执行副作用函数外，只有msg改变时才会运行

效果：

可以看到此时无论我们怎么修改count刷新页面，副作用函数都不会再执行。

这里只是对useEffect做了简单的介绍，项目中具体使用场景中要复杂的多，可以当官方文档中学习一下。

useEffect的意义

useEffect的使用

猜你喜欢