React&Vue 系列：变量改动的监听

 

背景：作为使用三年 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，