我想在 Antd Pro 中为数据图表拉取数据,查实现方法时,发现了 React Effect Hook 这个概念。
参考
https://reactjs.org/docs/hooks-effect.html
The Effect Hook lets you perform side effects in function components。
什么是 side effect 呢?
之前在 Android Jetpack Compose 中也看到过 side effect 这个词,但是并不知道这是什么意思?
官方文档中给出的解释是,side effect 包含:
- 数据拉取 (正是我所涉及的场景)
- 设置订阅
- 手动修改 DOM
其实就是代替了 Class 写法中的生命周期函数 componentDidMount, componentDidUpdate, componentWillUnmount。
官方示例,给出的则是修改 DOM 的操作:
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
// Similar to componentDidMount and componentDidUpdate:
useEffect(() => {
// Update the document title using the browser API
document.title = `You clicked ${count} times`;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
side effect 的执行时机
默认情况下,side effect 的执行时机是
- 第一次 render (componentDidMount)
- 每次更新 (componentDidUpdate)
useEffect 如何处理 componentWillUnmount
只需要返回一个匿名函数,即可在组件销毁时被调用。
只在特定条件下执行 useEffect
如果每次更新都执行 side effect,最造成性能问题。可以设置条件来规避。
例如,只有 count 发生变化时才执行:
useEffect(() => {
document.title = `You clicked ${count} times`;
}, [count]); // Only re-run the effect if count changes
如果只想在 mount 时执行 effect,将数组置空即可。
useEffect(() => {
document.title = `You clicked ${count} times`;
}, []);
牢骚
虽然看起来一切是如此合理,代码也节省了很多,但是不得不说 react 的上手成本又增加了。 而这些上手成本在我看来毫无意义,代码可读性更差了。相对而言 vue 就简洁明了很多。
参考
- https://juejin.cn/post/6952509261519781918
微信关注我哦 👍
我是来自山东烟台的一名开发者,有感兴趣的话题,或者软件开发需求,欢迎加微信 zhongwei 聊聊, 查看更多联系方式