网站开发团队,临检中心网站建设,faq wordpress,这几年做哪个网站致富React 基础巩固(四十三)——Effect Hook
一、Effect Hook的基本使用
Effect Hook 用来完成一些类似class中生命周期的功能。
在使用类组件时#xff0c;不管是渲染、网路请求还是操作DOM#xff0c;其逻辑和代码是杂糅在一起的。例如我们希望把计数器结果显示在标签上不管是渲染、网路请求还是操作DOM其逻辑和代码是杂糅在一起的。例如我们希望把计数器结果显示在标签上在类组件中我们通过生命周期进行实现如下所示
import React, { PureComponent } from react;export class App extends PureComponent {constructor() {super();this.state {counter: 100,};}componentDidMount() {document.title this.state.counter;}componentDidUpdate() {document.title this.state.counter;}render() {const { counter } this.state;return (divh2计数{counter}/h2button onClick{(e) this.setState({ counter: counter 1 })}1/button/div);}
}export default App;
在函数组件中我们可以利用useEffect来完成除渲染界面以外的事情即完成副作用的事情。这样能让代码和逻辑看起来更清晰、简洁
import React, { memo, useEffect, useState } from react;export default memo(function App() {const [count, setCount] useState(200);// 完成一些除渲染外副作用的事情useEffect(() {// 当前传入的回调函数会在组件被渲染完成后自动执行// 网络请求/DOM操作/事件监听document.title count;});return (divh2计数{count}/h2button onClick{(e) setCount(count 1)}1/button/div);
});
可以看到通过useEffect的Hook能够告知react在渲染后需要执行哪些操作。在react执行完更新DOM操作后会回调我们在useEffect中传入的回调函数。在默认情况下这个函数无论是第一次渲染还是每次更新后均会被调用。
二、需要清除的Effect
在class组件中我们通常会在componentDidMount中设置监听事件componentWillUnmount中清除监听事件而利用useEffect的函数组件中我们可以通过useEffect的返回值回调函数来实现事件监听的清除操作
import React, { memo, useEffect, useState } from react;export default memo(function App_clear() {const [count, setCount] useState(0);// 在执行完渲染后执行副作用事件useEffect(() {// 监听事件// const unsubscribe store.subscribe(() {});// function foo() {}// eventBus.on(test, foo);// 监听和取消放在一个地方内聚性高console.log(假设监听unsubscribe、eventBus等事件);// // 返回值回调函数 组件重新渲染或组件卸载时执行return () {console.log(取消监听unsubscribe、eventBus等事件);};});return (divbutton onClick{(e) setCount(count 1)}1({count})/button/div);
});
useEffect中返回的函数是effect的可选的清除机制能够实现将设置监听和取消监听的逻辑放在一起提高内聚性。 三、多个Effect的使用
假设我们在useEffect执行如下三个操作 // 在执行完渲染后执行副作用事件useEffect(() {// 1.修改document的title// 2.对redux中数据变量的监听// 3.监听eventBus中的事件});我们会发现随着事件的增多useEffect中的逻辑会逐渐复杂这时我们可以将其拆分为多个effect依次执行即react支持多个useEffect // 在执行完渲染后执行副作用事件useEffect(() {// 1.修改document的titleconsole.log(1.修改document的title);});useEffect(() {// 2.对redux中数据变量的监听console.log(2.对redux中数据变量的监听);});useEffect(() {// 3.监听eventBus中的事件console.log(3.监听eventBus中的事件);});当我们每次触发页面渲染后可以看到三个事件被依次执行 四、Effect的执行机制
我们发现每次点击按钮都会执行监听操作假设effect中是一个网络请求事件则会在每次更新后发起请求这样频繁的监听、请求绝对不是我们想要的。我们可以用useEffect的第二个参数来控制其执行机制 // 在执行完渲染后执行副作用事件useEffect(() {// 1.修改document的titleconsole.log(1.修改document的title);}, [count]);useEffect(() {// 2.对redux中数据变量的监听console.log(2.对redux中数据变量的监听);}, []);useEffect(() {// 3.监听eventBus中的事件console.log(3.监听eventBus中的事件);}, []);当我们传入一个空数组时意味着该副作用事件不依赖任何内容此时与componentDidMount的效果一致只有在第一次加载时才会执行useEffect 当我们对于事件1传入[count]时则意味着事件1所在的useEffect依赖count变量当count变量发生变化时则会执行。于是当我们点击按钮修改count值时只有事件1会被一次次的触发
