跳转至

心得

React 18之后推崇的hook方式，函数式变成极大的改变了搬砖代码的形态。这里对几个常见的内建的hook做一个心得总结。

useRef#

useRef.current 是 React 中 useRef 钩子返回的对象的一个属性。useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数[3][4]。这个 ref 对象在组件的整个生命周期内保持不变[4]。

useRef 的主要功能有两个：
1. 获取 DOM 元素或组件实例：通过将 ref 对象赋值给组件或 DOM 元素的 ref 属性，可以获取到对应的实例或元素[1][2][3].
2. 保存在组件生命周期内不会变化的值：通过修改 useRef.current 属性的值，可以在组件的多次渲染中保存一个不会变化的值[3][4].

以下是一个使用 useRef.current 的示例：

import React, { useRef } from 'react';

function ExampleComponent() {
  const countRef = useRef(0);

  const incrementCount = () => {
    countRef.current += 1;
    console.log(countRef.current);
  };

  return (
    <div>
      <h2>Example Component</h2>
      <button onClick={incrementCount}>Increment</button>
    </div>
  );
}

在上面的示例中，我们创建了一个 countRef ref 对象，并将其初始化为 0。每次点击按钮时，我们通过修改 countRef.current 属性的值来增加计数，并将其打印到控制台上。

需要注意的是，修改 useRef.current 的值不会引发组件重新渲染[3]。因此，useRef 是一个有助于在函数组件中保存可变状态的工具，而不会触发不必要的渲染。
- [1].你知道useRef可以实现哪些功能吗？ - 稀土掘金
- [2].了解useRef 一篇就够了 - 墨滴
- [3].【React Hooks】useRef 用法原创 - CSDN博客
- [4].React Hook学习(useRef) - Zoeice
- [5].React新文档：不要滥用Ref哦！ - 51CTO, The content generated by the language model comes from the Internet and search engines, which does not mean that this site agrees with its views and is responsible for its authenticity

useState#

可以理解为数值驱动的状态，可以设置字符串，数值，布尔，数组，对象,但是它和vue的ref（）最大的区别是，它是push-base的，需要手动通过setState去触发更新，而vue是pull-base的，会向全局广播其数据的更新

update arrays with React useState Hook without Push

useEffect#

一开始认为它是生命钩子函数的，在组件挂载时候主动运行一次，默认如果没有第二个参数的话，会鬼畜起来

后来发现它好像是一个容易应急的管闲事且能管闲事的大妈,只要告诉它需要管谁的闲事。vue的Watchers可能就是来源于此

一般起步教程，都在里边请求挂载后的第一次数据，当然第二个数据传一个空的数组，意味就干挂载后第一次请求的事情，这里需要注意到是，因为异步请求的需要，fetch和axios都会隐式返回一个promise,还有的说法是useEffect返回的是cleanup function了解React的useEffect清理功能 ,不能返回一个promise

这里插进来的clearup话题，有必要搞清楚，官方文档中关于cleanup function的介绍

所以需要让请求函数函数这一坨放到即时处理函数里边，或者定义这个函数，在从后边调用它useAsyncEffect: The Missing React Hook

在后来，发现其实它有很多问题，后来出现了专门的请求库，来代替它在请求界的地位

之所以有这么花活，要追溯到这个函数useEffect的定义和出现的原因，这里有篇文章描述的很好

Using the useEffect hook to trigger asynchronous(异步) side effects is a common React pattern.使用useeffect钩子函数触发异步副作用是常见的React模式

**每一个**组件内的函数（包括事件处理函数，effects，定时器或者API调用等等）会捕获某次渲染中定义的props和state。

出现了，useEffect拿到的 state（私有变量）和props（传递的属性），无论在什么时候取都是那一帧的数据，并不是最新的数据

相应的可以用useref获取到最新的数据

参考#

了解React的useEffect清理功能
A Complete Guide to useEffect
精读《useEffect 完全指南》
useAsyncEffect: The Missing React Hook
React Cookbook中文版
nextjs官网的制作细节
React技术揭秘
Build your own React(中文版)
Build your own React
https://mp.weixin.qq.com/s/m3a6vjp8-c9a2EYj0cDMmg
React 哲学 – React