React Hooks API 之 useEffect

YoungMan_09

已于 2022-02-12 20:59:42 修改

阅读量907

点赞数

文章标签： react.js javascript 前端

于 2022-02-12 20:55:02 首次发布

本文链接：https://blog.csdn.net/YoungMan_09/article/details/122899096

版权

作用：用于执行副作用的，比如调用接口、DOM操作、定时器、建立长连接等等

在React中，什么叫副作用？那些与视图渲染有关的功能逻辑，比如调接口、DOM操作等等

语法：useEffect(()=>{return ()=>{}},[依赖])

简单理解：useEffect()是用于模仿类组件中componentDidMount，componentDidUpdate，componentWillUnmount三个生命周期的

useEffect(() => {
    // 这里相当于是componentDidMount
    return () => {
        // 这里相当于componentWillUnmount
    }
}, [] /* 这个依赖相当于是componentDidUpdate*/ )

例如修改网页的标题：

// 例如修改网页标题
const TestHooks = props => {
    // 这里编写代码逻辑
    useEffect(() => {
        document.title = '这里是useEffect'
        console.log('useEffect执行了');
        return function () { }
    }, [])
    return (
        <div>
            <h1>Hooks编程</h1>
        </div>
    )
}
export default TestHooks

或者开启一个定时器