0
点赞
收藏
分享

微信扫一扫

React-Hooks-useEffect

useEffect Hook 概述

  • 可以把 useEffect Hook 看做 componentDidMount,componentDidUpdate 和 componentWillUnmount 这三个生命周期函数的组合

useEffect Hook 特点

  • 可以设置依赖, 只有依赖发生变化的时候才执行可以设置依赖, 只有依赖发生变化的时候才执行

示例演示代码如下:

import React, {useState, useEffect} from 'react';

function Home() {
const [nameState, setNameState] = useState('Jonathan_Lee');
const [ageState, setAgeState] = useState(0);

useEffect(() => {
// componentDidMount
// componentDidUpdate
console.log('组件被挂载或者组件更新完成');

return () => {
// componentWillUnmount
console.log('组件即将被卸载');
}
});
return (
<div>
<p>{nameState}</p>
<button onClick={() => {
setNameState('BNTang')
}}>修改
</button>
<p>{ageState}</p>
<button onClick={() => {
setAgeState(ageState + 1)
}}>增加
</button>
<button onClick={() => {
setAgeState(ageState - 1)
}}>减少
</button>
<hr/>
</div>
)
}

export default function App() {
const [isShowState, setIsShowState] = useState(true);
return (
<div>
{isShowState && <Home/>}
<button onClick={() => {
setIsShowState(!isShowState)
}}>切换Home组件
</button>
</div>
)
}

定义了一个 App 组件,然后在当中用一个按钮来控制 Home 的显示与隐藏,然后呢,点击 Home 组件不同的按钮观察一下生命周期输出到控制台的信息即可。

useEffect Hook 对比类组件生命周期方法的优势:

  • 易于拆分

例如在之前的类组件的生命周期方法,在组件被挂载的时候要做一些其它的事情,就需要全部写在一个方法当中但是用了 useEffect Hook 就可以完美的解决该问题示例如下:

import React, {useState, useEffect} from 'react';

function Home() {
const [nameState, setNameState] = useState('Jonathan_Lee');
const [ageState, setAgeState] = useState(0);

useEffect(() => {
// 组件被挂载
console.log('修改DOM');
});

useEffect(() => {
// 组件被挂载
console.log('注册监听');
return () => {
console.log('移出监听');
}
});

useEffect(() => {
console.log('发送网络请求');
});
return (
<div>
<p>{nameState}</p>
<button onClick={() => {
setNameState('BNTang')
}}>修改
</button>
<p>{ageState}</p>
<button onClick={() => {
setAgeState(ageState + 1)
}}>增加
</button>
<button onClick={() => {
setAgeState(ageState - 1)
}}>减少
</button>
<hr/>
</div>
)
}

export default function App() {
const [isShowState, setIsShowState] = useState(true);
return (
<div>
{isShowState && <Home/>}
<button onClick={() => {
setIsShowState(!isShowState)
}}>切换Home组件
</button>
</div>
)
}


举报

相关推荐

React hooks - useEffect

React-hooks:useEffect

React Hooks —— ref hooks

react hooks

React Hooks

0 条评论