背景:作为使用三年 react.js 的搬运工,目前正在积极学习 vue.js 语法,而在学习的过程中,总是喜欢和 react.js 进行对比,这里也不是说谁好谁坏,而是怀有他有我也有,他没我还有的思想去学习,去总结。
React18 Vue3
在上一章,介绍了React&Vue 系列: 变量的定义。那么本章就来介绍,定义变量之后,当变量被修改了,如何进行监听。
为什么需要进行监听呢?因为当变量改变之后,会存在相应的副作用操作(比如说网络请求,修改 DOM 状态等等),那么这时候就需要进行监听。
好了,直接进入正题。
老规矩,对 React 比较熟悉,React 有优先权。
React 监听变量改动
在 React 中,并没有单独的提供方法用来监听变量的改动。而且还必须清楚一点,当变量发生改变时,组件就会重新渲染(re-render)。到了这里,你也许还需要理解 React 批量更新。
Effect 在 React 中是专有定义——由渲染引起的副作用。为了指代更广泛的编程概念,也可以将其称为“副作用(side effect)”。
当组件进行重新渲染之后,就会执行一些函数(类似生命周期),在这些函数中就能做一些副作用的逻辑操作。在 React 中提供了 useEffect 和 useMemo 等 hook。
js复制代码import { useEffect, useMemo } from "react";
这里的 useMemo 也可以简单的看成是变量的副作用处理方式吧,当变量发生改变,会生成新的衍生值,进行渲染。
而最主要的处理副作用的函数就是 useEffect, 监听变量发生改变,处理一系列的操作(比如说网络请求,DOM 操作等等)。
js复制代码// 基本使用方式
useEffect(setup, dependencies?)
- setup 副作用
- dependencies 依赖收集,当重新渲染时,如果依赖发生了变化,就会触发副作用。
执行副作用
直接看代码吧
js复制代码import { useState, useEffect } from "react";
const [pagination, setPagination] = useState(1);
/**
* 请求表格数据
* @param pagination: 页数
*/
function getTableDataSource(pagination) {
// fetch...
}
useEffect(() => {
getData(pagination);
}, [pagination]);
return (
// jsx 的 DOM
)
这里就想象成表格的分页场景吧,当点击表格分页,就会改变 pagination 变量,那么就会使当前组件重新渲染,而当前组件中的 useEffect 的依赖 pagination 发生了变动(内部通过 Object.is() 来进行比较), 就会执行副作用,重新请求表格数据。
这就是 React 监听变量改动,触发副作用的简单流程,还是比较简单的。
当然,React 内部还提供了 useLayoutEffect 和 useInsertionEffect 两个处理副作用的 hook,