React Hook中useEffecfa函数如何使用

这篇文章主要介绍“React Hook中useEffecfa函数如何使用”，在日常操作中，相信很多人在React Hook中useEffecfa函数如何使用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”React Hook中useEffecfa函数如何使用”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！我们知道在类组件中是可以有生命周期函数的, 那么如何在函数组件中定义类似于生命周期这些函数呢?Effect Hook 可以让你来完成一些类似于class中生命周期的功能;事实上，类似于网络请求、手动更新DOM、一些事件的监听，都是React更新DOM的一些副作用(Side Effects);所以对于完成这些功能的Hook被称之为 Effect Hook;假如我们现在有一个需求:页面中的title总是显示counter的数字，分别使用class组件和Hook实现:类组件实现

importReact,{PureComponent}from'react'

exportclassAppextendsPureComponent{
constructor(){
super()

this.state={
counter:100
}
}

//进入页面时,标题显示counter
componentDidMount(){
document.title=this.state.counter
}

//数据发生变化时,让标题一起变化
componentDidUpdate(){
document.title=this.state.counter
}

render(){
const{counter}=this.state

return(

{counter}
this.setState({counter:counter+1})}>+1

)
}
}

exportdefaultApp

函数组件加Hook的实现:通过useEffect这个Hook，可以告诉React需要在渲染后执行某些操作;useEffect要求我们传入一个回调函数，在React执行完更新DOM操作之后(也就是组件被渲染完成后)，就会回调这个函数;默认情况下，无论是第一次渲染之后，还是每次更新之后，都会执行这个回调函数; 一般情况下我们在该回调函数中都是编写副作用的操作(例如网络请求, 操作DOM, 事件监听)因此需要注意的是, 有许多说法说useEffect就是用来模拟生命周期的, 其实并不是; useEffect可以做到模拟生命周期, 但是他主要的作用是用来执行副作用的

importReact,{memo,useEffect,useState}from'react'

constApp=memo(()=>{
const[counter,setCounter]=useState(200)

//useEffect传入一个回调函数,在页面渲染完成后自动执行
useEffect(()=>{
//一般在该回调函数在编写副作用的代码(网络请求,操作DOM,事件监听)
document.title=counter
})

return(

{counter}
setCounter(counter+1)}>+1

)
})

exportdefaultApp

在class组件的编写过程中，某些副作用的代码，我们需要在componentWillUnmount中进行清除:比如我们之前的事件总线或Redux中手动调用subscribe;都需要在componentWillUnmount有对应的取消订阅;Effect Hook通过什么方式来模拟componentWillUnmount呢?useEffect传入的回调函数A本身可以有一个返回值，这个返回值是另外一个回调函数B:type EffectCallback = () => (void | (() => void | undefined));为什么要在 effect 中返回一个函数?这是 effect 可选的清除机制。每个 effect 都可以返回一个清除函数;如此可以将添加和移除订阅的逻辑放在一起;它们都属于 effect 的一部分;React 何时清除 effect?React 会在组件更新和卸载的时候执行清除操作, 将上一次的监听取消掉, 只留下当前的监听 ;正如之前学到的，effect 在每次渲染的时候都会执行;

importReact,{memo,useEffect}from'react'

constApp=memo(()=>{
useEffect(()=>{
//监听store数据发生改变
constunsubscribe=store.subscribe(()=>{

})

//返回值是一个回调函数,该回调函数在组件重新渲染或者要卸载时执行
return()=>{
//取消监听操作
unsubscribe()
}
})

return(

App

)
})

exportdefaultApp

使用Hook的其中一个目的就是解决class中生命周期经常将很多的逻辑放在一起的问题:比如网络请求、事件监听、手动修改DOM，这些往往都会放在componentDidMount中;一个函数组件中可以使用多个Effect Hook，我们可以将逻辑分离到不同的useEffect中:

importReact,{memo,useEffect}from'react'

constApp=memo(()=>{
//监听的useEffect
useEffect(()=>{
console.log("监听的代码逻辑")

return()=>{
console.log("取消的监听代码逻辑")
}
})

//发送网络请求的useEffect
useEffect(()=>{
console.log("网络请求的代码逻辑")
})

//操作DOM的useEffect
useEffect(()=>{
console.log("操作DOM的代码逻辑")
})

return(

App

)
})

exportdefaultApp

Hook允许我们按照代码的用途分离它们， 而不是像生命周期函数那样, 将很多逻辑放在一起:React将按照 effect 声明的顺序依次调用组件中的每一个 effect;默认情况下，useEffect的回调函数会在每次渲染时都重新执行，但是这会导致两个问题:某些代码我们只是希望执行一次即可(比如网络请求, 组件第一次渲染中执行一次即可, 不需要执行多次)，类似于类组件中的componentDidMount和componentWillUnmount中完成的事情;另外，多次执行也会导致一定的性能问题;我们如何决定useEffect在什么时候应该执行和什么时候不应该执行呢?useEffect实际上有两个参数:参数一: 执行的回调函数, 这个参数我们已经使用过了不再多说;参数二: 是一个数组类型, 表示 该useEffect在哪些state发生变化时，才重新执行;(受谁的影响才会重新执行)案例练习:受count影响的Effect;

importReact,{memo,useEffect,useState}from'react'

constApp=memo(()=>{
const[counter,setCounter]=useState(100)

//发送网络请求的useEffect,只有在counter发生改变时才会重新执行
useEffect(()=>{
console.log("网络请求的代码逻辑")
},[counter])免费云主机、域名

return(

setCounter(counter+1)}>{counter}

)
})

exportdefaultApp

但是，如果一个函数我们不希望依赖任何的内容时，也可以传入一个空的数组 []:那么这里的两个回调函数分别对应的就是componentDidMount和componentWillUnmount生命周期函数了;

importReact,{memo,useEffect,useState}from'react'

constApp=memo(()=>{
const[counter,setCounter]=useState(100)

//传入空数组表示不受任何数据依赖
useEffect(()=>{
//此时传入的参数一这个回调函数:相当于componentDidMount
console.log("监听的代码逻辑")

//参数一这个回调函数的返回值:相当于componentWillUnmount
return()=>{
console.log("取消的监听代码逻辑")
}
},[])

return(

setCounter(counter+1)}>{counter}

)
})

exportdefaultApp

总结: useEffect可以模拟之前的class组件的生命周期(类似而不是相等), 并且它比原来的生命周期更加强大, 青出于蓝而胜于蓝到此，关于“React Hook中useEffecfa函数如何使用”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注云技术网站，小编会继续努力为大家带来更多实用的文章！

相关推荐: 如何使用CSS滤镜构建圆角和波浪效果

这篇文章主要介绍“如何使用CSS滤镜构建圆角和波浪效果”，在日常操作中，相信很多人在如何使用CSS滤镜构建圆角和波浪效果问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”如何使用CSS滤镜构建圆角和波浪效果”的疑惑有所帮助！接下来，…