useEffect使用的介绍

如果你熟悉 React class 的生命周期函数&＃xff0c;你可以把 useEffect Hook 看做 componentDidMount&＃xff0c;componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

1. 使用一个 componentDidMount 的功能

function Demo () {useEffect(() &＃61;> {console.log(&＃39;hello world&＃39;)}, [])return (<div>hello world</div>)
}
// 等价于
class Demo extends Component {componentDidMount() {console.log(&＃39;hello world&＃39;)}render() {return (<div>hello world</div>);}
}


1. 使用组合 componentDidMount componentDidUpdate 的功能

class Example extends React.Component {constructor(props) {super(props);this.state &＃61; {count: 0};}componentDidMount() {document.title &＃61; &＃96;You clicked ${this.state.count} times&＃96;;}componentDidUpdate() {document.title &＃61; &＃96;You clicked ${this.state.count} times&＃96;;}render() {return (<div><p>You clicked {this.state.count} times</p><button onClick&＃61;{() &＃61;> this.setState({ count: this.state.count &＃43; 1 })}>Click me</button></div>);}
}
// 等价于
import React, { useState, useEffect } from &＃39;react&＃39;;function Example() {const [count, setCount] &＃61; useState(0);useEffect(() &＃61;> {document.title &＃61; &＃96;You clicked ${count} times&＃96;;});return (<div><p>You clicked {count} times</p><button onClick&＃61;{() &＃61;> setCount(count &＃43; 1)}>Click me</button></div>);
}


1. 使用组合 componentDidMount componentWillUnmount 的功能

class Example extends Component {constructor (props) {super(props);this.state &＃61; {count: 0}}componentDidMount() {this.id &＃61; setInterval(() &＃61;> {this.setState({count: this.state.count &＃43; 1})}, 1000);}componentWillUnmount() {clearInterval(this.id)}render() { return <h1>{this.state.count}</h1>;}
}
// 等价于
function Example() {const [count, setCount] &＃61; useState(0);useEffect(() &＃61;> {const id &＃61; setInterval(() &＃61;> {setCount(c &＃61;> c &＃43; 1);}, 1000);return () &＃61;> clearInterval(id);}, []);return <h1>hello world</h1>
}


1. 使用一个 componentDidUpdate 的功能

class Example extends Component {constructor (props) {super(props);this.state &＃61; {count: 0}}componentDidUpdate(prevProps, prevState) {console.log(this.state.count, &＃39;更新时候的数据&＃39;)}handleClick &＃61; () &＃61;> {this.setState({count: this.state.count&＃43;1})}render() {return (<div><div>{this.state.count}</div><button onClick&＃61;{this.handleClick}>&＃43;</button></div>);}
}
// 等价于
function Example () {const [count, setCount] &＃61; useState(0);const prevCountRef &＃61; useRef(false);useEffect(() &＃61;> {if (prevCountRef.current) {console.log(&＃39;更新时候的数据&＃39;)} else {prevCountRef.current &＃61; true}});return (<div><div>{count}</div><button onClick&＃61;{() &＃61;> {setCount(count&＃43;1)}}>&＃43;</button></div>)
}


useEffect

如果你熟悉 React class 的生命周期函数&＃xff0c;你可以把 useEffect Hook 看做 componentDidMount&＃xff0c;componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

默认情况下&＃xff0c;它在第一次渲染之后和每次更新之后都会执行。&＃xff08;我们稍后会谈到如何控制它。&＃xff09;你可能会更容易接受 effect 发生在“渲染之后”这种概念&＃xff0c;不用再去考虑“挂载”还是“更新”。React 保证了每次运行 effect 的同时&＃xff0c;DOM 都已经更新完毕。

将 document 的 title 设置为点击次数

import React, { useState, useEffect } from &＃39;react&＃39;;function Example() {const [count, setCount] &＃61; useState(0);useEffect(() &＃61;> {document.title &＃61; &＃96;You clicked ${count} times&＃96;;});return (<div><p>次数&＃xff1a;{count}</p><button onClick&＃61;{() &＃61;> setCount(count &＃43; 1)}>点击</button></div>);
}


与 componentDidMount 或 componentDidUpdate 不同&＃xff0c;使用 useEffect 调度的 effect 不会阻塞浏览器更新屏幕&＃xff0c;这让你的应用看起来响应更快。大多数情况下&＃xff0c;effect 不需要同步地执行。

如果你的 effect 返回一个函数&＃xff0c;React 将会在执行清除操作时调用它。