本文共 2603 字，大约阅读时间需要 8 分钟。

React Hook useEffect 实用指南

在 React 开发过程中，useEffect 是一个强大的工具，用于在组件树中执行副作用操作。它可以嵌入到组件的任何位置，并且能够感知组件的变更状态。在以下内容中，我们将详细探讨 useEffect 的使用场景以及如何手动绑定变量值以获取旧值与新值。

1. 准备一组可以被监听的变量值

为了利用 useEffect 的能力，我们需要准备一组可以被监听到的变量值。这些变量值可以是 React 组件中的任何状态值、属性值，或者是其他可以被跟踪的数据。例如：

function Child(props) {
  const [txt, setTxt] = useState("1");
  return  setTxt(e.target.value)} />;
}

上述代码展示了一个简单的输入组件，状态值 txt 会随着用户输入而改变。接下来，我们需要以绑定的方式实现旧值与新值的获取和存储。

2. 通过 useRef 实现绑定

为了实现变量值的绑定，我们可以结合 useRef hook 和 useEffect 进行操作。useRef hook 可以帮助我们持有变量值在每次重新渲染时的最新值。

import React, { useState, useRef } from 'react';
function Child(props) {
  const [txt, setTxt] = useState("1");
  const txtRef = useRef(txt);
  
  useEffect(() => {
    console.log('旧值：', txtRef.current, '新值：', txt);
    txtRef.current = txt; // 将新值赋值给当前引用，以便下一次获取
  }, [txt]);
  return (
     setTxt(e.target.value)}
    />
  );
}

浏览器反馈

在上述代码中，每次 txt 的状态发生变化时，useEffect hook 会被重新调用。随后，txtRef.current 会持有 txt 断=http的新值，而浏览器反馈显示了旧值与新值的状态。

这是为什么需要额外步骤

在浏览器反馈中可以看到，每次修改完成后，txtRef.current 维持的是旧值，而不是最新的新值。这导致如果我们直接完成这样做，下一次 useEffect 调用时，txtRef.current 就不会反映最新的新值。这意味着我们需要额外的一步，将新值赋值给 txtRef.current 以便下一次获取。

3. useEffect 实现变量值的监听

为了更高效地进行数据绑定，很多开发者会直接在 useEffect 的依赖数组中使用 txt。这种单纯的方式能够确保每次状态改变都会触发 useEffect 钩子的调用，从而实现旧值与新值的获取和存储。

import React, { useState, useEffect, useRef } from 'react';
function Child(props) {
  const [txt, setTxt] = useState("1");
  const txtRef = useRef(txt);
  
  useEffect(() => {
    console.log('旧值：', txtRef.current, '新值：', txt);
    txtRef.current = txt;
  }, [txt]);
  return (
     setTxt(e.target.value)}
    />
  );
}

浏览器反馈

浏览器反馈的结果显示，每次组件渲染时，useEffect 钩子的依赖项发生改变时，钩子的副作用函数会被执行。这实质上实现了我们想要的旧值与新值的获取和展示。同时，通过在副作用函数中将 txtRef.current 更新为最新 txt 的值，我们确保了在以后需要使用旧值时能够引用到正确的值。

自定义 Hooks

除了内置的 useEffect 和 useRef，我们有时候需要为特定的业务逻辑创造通用的解决方案，这就是自定义 Hooks 的作用。下面是一个关于自定义 Keys 创建的示例：

import React, { useState } from 'react';
function useTitle(title) {
  return document.title = title;
}
export { useTitle };

自定义 Hooks 的规则

通过使用自定义 Hooks，我们可以更灵活地管理组件的副作用逻辑。例如，在以下代码中，App 组件不仅能够展示输入字段，还能通过 useTitle 自定义顶部标题。

import React, { useState } from 'react';
import { useTitle } from './hooks';
function App() {
  const [tit, setTit] = useState('App');
  useTitle(tit);
  return (
     {
        setTit(e.target.value);
        e.target.value = '';
      }}
    />
  );
}
export default App;

这种方式使我们的组件代码更加清晰，便于管理和维护复杂的业务逻辑。

总结

通过以上方法，我们可以在 React 组件中实现变量值的旧值与新值监听。这对于数据校验、状态管理等场景都有十分重要的应用价值。同时，合理地使用 useEffect 和自定义 Hooks 能够让我们的代码更加简洁和高效。如果需要更多的 React Hook 相关内容，建议查阅官方文档以获取更深入的理解和实用技巧。

转载地址：http://hlwiz.baihongyu.com/