[React] useEffect
pure function:单纯返回jsx元素的组件
在使用react函数组件时,理论上函数组件只会进行不改变内部状态值的计算,以及返回html代码。一个pure函数就是如此,例如一个函数组件接受一个id作为传入属性,注意这里传入的id并没有发生变化,我们只是简单进行了输出和数学计算:
// this is a pure function!
export default function person({ id }) {
return (
<>
<p>Nice to meet you! #{id}</p>
<p>Change your id to #{id*3}</p>
</>
)
}
impure function:不仅仅只是返回jsx元素
然而实际运用中,一个组件绝不止单纯返回jsx代码,在最后返回渲染代码之前可能还需要更多操作,例如修改DOM,获取数据,修改表单输入,提交表单甚至是重定向一个新页面。react doc将这些情况归纳为事件处理器(event handler)。因为组件内部的状态值被修改了,因此会发生副作用(side effects),这时候useEffect就发挥作用了。
// this is not a pure function!
export default function person({ id }) {
let cnt = 0;
return (
<>
<p>Nice to meet you! #{id}</p>
<p>Change your id to #{id*3}</p>
<p>Let's change the count number: {cnt++}</p>
</>
)
}
useEffect在执行什么:一个函数
useEffect本身就是一个函数,它的第一个参数也是函数,而且这个函数会改变组建的状态,所以我们将这个函数放入useEffect中
useEffect(() => {
if (welcome) {
document.querySelector("p").innerHTML = 'welcome, user!';
}
})
这个函数改变了p标签下的文本,也就是修改了DOM,属于副作用的范围。
注意:使用useEffect的情况应该是组件中被用于渲染的状态发生了改变,而组件中有些状态值是不参与渲染的,这个时候就不需要使用useEffect了。
useEffect的第二个参数:什么时候运行这个函数?
第二个参数就是一个包含了所有依赖项的列表,说明当这个列表中的任意对象的状态发生改变时,useEffect就会激活。
// 依赖不为空:当welcome发生改变时,输出不同的文本
useEffect(() => {
if (welcome) {
document.querySelector("p").innerHTML = 'welcome, user!';
}
else {
document.querySelector("p").innerHTML = 'Hola! como easta?';
}
}, [welcome])
依赖可以为空或没有
// 依赖为空:只在组件第一次渲染时运行,重新渲染就不会再跑一次了
useEffect(() => {
conn = getConnection()
setMessages(conn.getMessages(id))
}, [])
// 没有依赖:无上限地渲染,不建议因为不停重复渲染会导致性能下降,很多时候也没必要
useEffect(() => {
conn = getConnection()
setMessages(conn.getMessages(id))
})
useEffect运行的时机:在网页更新之后
根据react docs,useEffect会在建立网页的最后一步commit中触发,准确来说是在DOM被渲染/更新之后,然后由useEffect中的函数来更新部分有变化的DOM。
但是在某些情况下,有些状态值不会导致DOM变化,且函数也没有直接修改DOM的代码,因此即便使用useEffect也没用,数据不会被更新甚至渲染,这时候就要使用useMemo在渲染/更新之前来控制这些状态。
总结
- 大部分组件会有修改DOM和jsx元素的代码,因此不是pure function
- useEffect是针对那些有副作用的组件,并通过依赖来控制触发的条件
- useEffect运行的时候网页已经渲染完毕了,要注意其在react渲染全过程中的时间点