> 本文将重点介绍useRef这个Hook，它可以让你在组件的整个生命周期中访问一个可变的引用对象。





`useRef`的主要用途是直接访问`DOM`子元素，但这并不是它的唯一用途。`useRef`也可以用来保存一个在不同渲染中不变的可变值，例如在使用一些非`React`的外部库时很有用。本文将介绍`useRef`的基本使用，实现原理，最佳实践和一些常见的问题。

## 基本使用

要在组件中创建一个新的引用，可以使用以下代码：

```js
// 创建一个引用
const yourRef = useRef();
```

你也可以选择用一个默认值来初始化它，只需将它作为参数传递给`useRef`即可：

```js
// 创建一个引用
const yourRef = useRef('hello world');
```

`useRef`是一个`Hook`，因此只能在函数组件中使用！

要获取和设置引用的值，你可以访问对象的`.current`属性，如下所示：

```js
// 创建一个引用
const exampleRef = useRef();

// 设置引用的值
exampleRef.current = "Hello World";

// 访问引用的值：
// 这会在控制台打印"Hello World"
console.log(exampleRef.current);
```

要访问一个`DOM`元素，你可以创建一个引用，然后使用它的`ref`属性将它分配给你想要目标的`DOM`元素，然后你就可以使用它了。

例如，假设你想要获取一个`DOM`元素的像素高度。要做到这一点，你必须访问`DOM`元素的`offsetHeight`属性。但是如何获取`DOM`元素呢？当然是用一个引用。

```js
import { useEffect, useRef } from "react";

export default function App() {
  // 创建一个引用
  const divElement = useRef();

  // 在组件第一次渲染时触发
  useEffect(() => {
    // 获取div元素的高度
    console.log("The height of the div is: ", divElement.current.offsetHeight);
  }, []);

  return (
    <div ref={divElement}>
      <h1>Learn about useRef!</h1>
    </div>
  );
}
```


在上面的例子中，我使用了`useEffect`来确保只有在组件第一次渲染后才调用`divElement.current.offsetHeight`。事实上，一开始，引用是`undefined`的，只有当组件渲染并且`div`被创建后，它才会持有它的`DOM`元素值。你可以看到，使用引用可能有些棘手，你必须记住一些事情。

## 实现原理

要理解`useRef`的工作原理，我们需要先了解一些`React`的基础知识。

`React`是一个用于构建用户界面的库，它通过一个虚拟的`DOM`来管理真实的`DOM`。虚拟`DOM`是一个`JavaScript`对象，它表示真实的`DOM`结构，但是更轻量级和高效。`React`使用虚拟`DOM`来跟踪组件的状态和属性，然后根据需要更新真实的`DOM`。

当你在组件中使用`useState`或`useReducer`等`Hook`来管理状态时，你实际上是在更新虚拟`DOM`中的状态。每当状态发生变化时，`React`都会重新渲染组件，并将新的虚拟`DOM`与旧的虚拟`DOM`进行比较，找出差异，然后将这些差异应用到真实的`DOM`上。这个过程被称为协调`（reconciliation）`。

但是，有时候你可能不想让`React`管理你的状态，而是想直接操作真实的`DOM`。这可能是因为你需要使用一些非`React`的库，或者你需要访问一些`React`无法提供的`DOM`属性或方法。这时候，你就可以使用引用`（ref）`来实现。

`useRef`的基本实现原理其实很简单，它就是利用了`JavaScript`的闭包和对象引用的特性，来创建一个只有一个`current`属性的对象，然后将这个对象保存在一个变量中，这个变量在每次渲染时都会被复用，而不会被重新赋值。我们可以用下面的伪代码来模拟`useRef`的实现：

```js
// 定义一个变量，用来存储ref对象
let ref;

// 定义useRef函数，接收一个初始值作为参数
function useRef(initialValue) {
  // 如果ref不存在，就创建一个新的对象，将初始值赋给它的current属性
  if (!ref) {
    ref = { current: initialValue };
  }
  // 返回ref对象
  return ref;
}
```

可以看到，`useRef`函数只会在第一次调用时创建一个新的对象，然后将它赋值给`ref`变量，之后的调用都会返回这个变量，而不会创建新的对象。这样，我们就可以在组件的不同渲染之间保持一个可变的值，而不用担心它会被重新创建或销毁。

引用是一个对象，它有一个`.current`属性，可以指向任何你想要的值。当你创建一个引用时，`React`会将它保存在一个内部的数据结构中，这个数据结构不会随着组件的重新渲染而改变。这意味着，你可以在组件的整个生命周期中访问同一个引用对象，而不用担心它会丢失或改变。

当你将一个引用分配给一个`DOM`元素时，`React`会在渲染时将该元素的实例赋值给引用的`.current`属性。这样，你就可以通过引用来直接访问该元素，而不需要通过虚拟`DOM`或其他方式。你也可以在任何时候修改引用的值，而不会触发组件的重新渲染，因为引用不是一个状态，而是一个可变的容器。


## 最佳实践

`useRef`是一个非常有用的`Hook`，但是也有一些注意事项和最佳实践，我们应该遵守，以避免一些潜在的问题和错误。下面列举了一些常见的最佳实践：

- 尽量避免直接操作DOM，除非React没有提供相应的API。直接操作DOM会破坏React的声明式编程范式，导致组件的状态和DOM的状态不一致，可能引发一些难以发现和解决的bug。如果我们需要对DOM元素进行一些操作，我们应该优先考虑使用React提供的API，比如ref、state、props、effect等，只有当这些API都不能满足我们的需求时，我们才可以使用useRef来直接操作DOM。
- 使用useRef来存储一些不会触发组件重新渲染的值，比如定时器、订阅、外部库的实例等。这些值在组件的不同渲染之间保持不变，而且不会影响组件的渲染，因此使用useRef来存储它们是合适的。如果我们使用useState来存储这些值，那么每次修改它们的值都会触发组件的重新渲染，这是不必要的，而且会影响性能。
- 不要使用useRef来存储一些会触发组件重新渲染的值，比如状态、数据、计算结果等。这些值在组件的不同渲染之间可能会发生变化，而且会影响组件的渲染，因此使用useRef来存储它们是不合适的。如果我们使用useRef来存储这些值，那么当它们的值发生变化时，组件不会重新渲染，这会导致组件的状态和界面不一致，可能引发一些难以发现和解决的bug。我们应该使用useState或useReducer来存储这些值，这样当它们的值发生变化时，组件会重新渲染，保持状态和界面的一致性。
- 在组件卸载时，清除使用useRef存储的一些需要清理的值，比如定时器、订阅、外部库的实例等。这些值在组件卸载后，可能会继续运行或占用资源，导致内存泄漏或其他问题。我们应该使用useEffect来在组件卸载时，清除这些值，释放资源，避免潜在的问题。例如，如果我们使用useRef来存储一个定时器，我们应该在useEffect的返回函数中，清除这个定时器，代码如下：

```js
// 使用useRef存储一个定时器
const timer = useRef();

// 在组件卸载时，清除定时器
useEffect(() => {
  return () => {
    clearInterval(timer.current);
  };
}, []);
```

- 不要混淆useRef和createRef。useRef和createRef都可以用来创建ref对象，但它们的行为和用途有一些区别。useRef是一个Hook，只能在函数组件中使用，它会在每次渲染时返回同一个ref对象，因此可以用来在组件的不同渲染之间保持一个可变的值。createRef是一个方法，可以在类组件和函数组件中使用，它会在每次调用时返回一个新的ref对象，因此只能用来访问DOM元素或子组件的实例，不能用来在组件的不同渲染之间保持一个可变的值。我们应该根据不同的场景，选择合适的方法来创建ref对象，避免混淆它们的行为和用途。


## 总结

`useRef`是一个非常强大和有用的`Hook`，它可以让我们直接访问和操作`DOM`元素，以及在组件的不同渲染之间保持一个可变的值。

它的实现原理很简单，就是利用了`JavaScript`的闭包和对象引用的特性，来创建一个只有一个`current`属性的对象，然后将这个对象保存在一个变量中，这个变量在每次渲染时都会被复用，而不会被重新赋值。

我们在使用`useRef`时，应该遵守一些注意事项和最佳实践，以避免一些潜在的问题和错误。`useRef`与其他`Hook`，比如`useState`、`useEffect`、`useCallback`等，有着不同的功能和优势，我们应该根据不同的场景，选择合适的`Hook`来实现我们的需求，从而提高我们的代码的可读性、可维护性和性能。

React Hooks大全—useRef

> 2023年是难过的一年，在经济下行周期内，作为互联网打工人，很明显感觉到时过境迁、物是人非，互联网行业究竟为何变得如何这般？




## 前言

先自我介绍一下，我是一名00后前端程序员，在北京工作，全职工作经验一年半左右，全网2.5w+粉丝，博文访问量500w+。

互联网行业在最近两年发生了巨变，我的感受很深刻。2021年还在实习的时候，试着找校招工作，给我的感觉就是，投简历就有人约面试，参加了面试就能过，很轻松就能获得一些还不错的offer，也通过了京东和滴滴的技术面。

但是，在疫情中的2022年，我离开实习公司，正式开始找校招工作的时候，就发现似乎市场变了。面试不好约了，offer价格也低了，甚至市场掀起了大规模的毁约潮，我也被各种形式的毁约了n次。后来去了一家初创公司，先安于现状。

2022年下半年到2023年底，市场变的疯狂，裁员成为了热词，上到超级大厂，下到初创公司，似乎每天都在经历着裁员。

所有人似乎都想知道，why？为什么互联网一夜之间成了这样？

## 什么原因导致了现在的互联网市场

我说一下我的看法，我觉得影响最大的就两点：

1. 经济不好。

虽然2023年官方统计GDP增速5.2%，但是似乎资本和大家普通人都不买账。

CPI降了，PPI降了，出口降了，楼市降了，股市崩了，但是GDP稳步增长，其实从这里就可以看出，5.2%的GDP增速，并没有对大家带来实际利好。也不要看着这5.2%的基本面增速，觉得以后的生活会慢慢变好。5.2%统计的是2023年，2023年的生活有没有变好，身处一线的大家都能感受到。

所以，经济不好，导致很多的中小公司的运作坚持不下去，纷纷离场，或者裁员保本。`（可以查下官方数据，2023年倒闭的公司是历史新高。）`然后大公司为了保证自己的利润和市场竞争力，选择留存更多的现金，进行规模不等的裁员，削减成本。

2. 没有增量业务。

这个是我认为对互联网行业的必杀技。

互联网高速发展了10多年，前中期是有做不完的业务，因为所有东西都是新的，社交、游戏、电商、短视频，在当时都是新赛道、新业务、新需求，这些都需要堆巨量的人来完成，同时为了和竞品竞争，会自己卷自己，所以更需要更多人来卷速度了。

但是，到了2023年，除了ChatGPT的出现，没有任何其它的大规模增量业务`（小规模的局部业务不谈，因为无法对整个市场造成影响）`。各大电商卷“百亿补贴”，各大短视频平台卷推荐算法，社交平台卷重构`（据说QQ各个端的UI、业务代码、系统架构都重构一遍了）`都是在现有业务内卷细节，几乎不需要新鲜人力。

ChatGPT这个确实是个体量很大的增量业务，但是因为众所周知的原因，无法来到国内市场，无法落地应用，所以带不来对国内市场实际的增量需求，至于像百度这些公司在卷的大模型，不过多评价，市场会给出答案，影响很小。

没有增量业务，就意味着不需要堆巨量的人力来写需求和卷速度了，那之前十多年招进来的这么多人，怎么处理？当然是裁掉了，因为这拨人无法带来与其体量相匹配的增长了。

比如某公司5年招聘了1w个员工来写业务，写到现在没有新业务写了，经济不好导致现金流又吃紧，可能留下来1000人维护现有系统和小业务迭代就足矣。`（1000人都说多了，后期的维护和早期的赶进度，所需要的人力是天差地别的）`。

以上两点，是我总结目前对互联网行业影响最大的因素，小因素肯定还有很多。

## 对2024年的预期

我的看法是，会长期通缩，不会比2023年好，依然看不到互联网行业有新鲜血液进来，无法带来有效的岗位需求。经济上，只可能更差，从美国那边的选举来看，川普这次很稳`（除非被刺杀）`，近些年国内经济变差很大的原因，就是当初川普在任时发动的对中国贸易战，对国内经济影响很大，但是对美国的影响可控，美元还是太强了。`（PS：美股QQQ（纳斯达克指数）在前几天又创下了历史新高，经济好的不要太好，反观国内A股，跌跌不休）`。

## 对已经进入和即将进入互联网的人有什么建议

已经进入的：心态保持稳定，多攒钱`（因为国内在通缩）`，少投资`（除非你能买美股或Token）`，没事出去旅旅游，房子车子没上车的这几年先不要考虑了，晚买一年就少亏一年，多找时间学习提升自己，无论在什么时期，高级开发都是有绝对市场的。现在对高级开发的界定，可不是只有工作年限了，倚老卖老不好使，得有让市场认可的实力。

即将进入的：先问问自己是否真的适合这个行业，不要硬进，不要光看光鲜亮丽的工资。这个时期不要花过万的钱去培训，早几年培训出来会写个vue，能写写管理系统就有人要，现在行情天差地别，时代不同了。及时止损，发现不合适早点转行。


## 互联网行业还有第二春吗

这个不好评价，即使互联网目前身处寒冬，平均薪资依然是众行业的龙头。我认为互联网行业的第二春什么时候来，取决于我上面提到的`【经济、增量业务】`。

等经济好了，什么虾兵蟹将都敢出来创创业、烧烧钱了，也就能带动岗位的需求。

有影响整个市场的增量业务，资本就会买单`（美股英伟达、微软受2023年AI元年影响，日日都是新高）`，会有新钱进入市场，同样能带来岗位的的需求。

## 总结

临近春节，身处互联网一线的打工人，要在茶余饭后，对行业有个整体的判断和认识，给自己留好充足的容错率`（大不了就淀粉肠搞起来，滴滴已经饱和了~~~）`。


> 个人博客：https://creatorblog.cn
最近比较看好Web3市场，有在职或门路的欢迎私聊讨论
WX：18331092918

互联网为何变得如此这般

> 在本文中，我们将重点介绍useContext这个Hook，它可以让你在函数组件中轻松地访问React Context，从而实现跨组件的状态共享。我们将从基本使用，实现原理，最佳实践，以及一些常见的问题和解决方案来探讨useContext的用法和优势。我们还将给出一些必要的代码示例，帮助你更好地理解和应用useContext。




## 基本使用

`React Context`是一种在组件树中传递数据的机制，它可以让你在任何层级的组件中访问同一个数据，而不需要通过`props`逐层传递。这对于一些全局的状态，比如主题，语言，用户信息等，非常有用。

要使用`React Context`，你需要先创建一个`Context`对象，然后在根组件中使用`Context.Provider`组件来提供一个`Context`值，最后在任何子组件中使用`Context.Consumer`组件来消费这个值。例如：

```js
// 创建一个Context对象
const ThemeContext = React.createContext('light');

// 在根组件中使用Provider提供一个Context值
class App extends React.Component {
  render() {
    return (
      <ThemeContext.Provider value="dark">
        <Toolbar />
      </ThemeContext.Provider>
    );
  }
}

// 在子组件中使用Consumer消费Context值
function Toolbar(props) {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

function ThemedButton() {
  return (
    <ThemeContext.Consumer>
      {value => <Button theme={value} />}
    </ThemeContext.Consumer>
  );
}
```

这种方式虽然可以实现`Context`的访问，但是有一些缺点：

- 每次使用Context值，都需要引入一个Consumer组件，这会增加组件树的层级和复杂度。
- 如果一个组件需要访问多个Context，那么就需要嵌套多个Consumer组件，这会导致代码的可读性和维护性降低。
- Consumer组件需要使用一个函数作为子元素，这会导致每次渲染都会创建一个新的函数，这会影响性能和内存的使用。

为了解决这些问题，`React Hooks`提供了一个`useContext`这个`Hook`，它可以让你在函数组件中直接访问`Context`值，而不需要使用`Consumer`组件。

`useContext`的用法非常简单，只需要传入一个`Context`对象，就可以返回这个`Context`的当前值。例如：

```js
// 创建一个Context对象
const ThemeContext = React.createContext('light');

// 在根组件中使用Provider提供一个Context值
function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

// 在子组件中使用useContext访问Context值
function Toolbar(props) {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

function ThemedButton() {
  // 使用useContext获取Context值
  const theme = useContext(ThemeContext);
  return <Button theme={theme} />;
}
```


可以看到，使用`useContext`后，代码变得更加简洁，清晰，易读。`useContext`的优点有：

- 不需要使用Consumer组件，减少了组件树的层级和复杂度。
- 可以在一个组件中访问多个Context，只需要多次调用useContext即可，不需要嵌套Consumer组件。
- 不需要使用函数作为子元素，避免了每次渲染都创建新的函数的问题，提高了性能和内存的使用。

## 实现原理

要理解`useContext`的实现原理，我们首先需要了解一下`React Context`的实现原理。`React Context`是基于发布订阅模式的，它的核心思想是：

- 创建一个Context对象，它包含了一个Provider组件和一个Consumer组件，以及一些内部的属性和方法。
- Provider组件接收一个value属性，它会将这个value保存在Context对象的内部属性中，并且将自己的实例添加到Context对象的订阅者列表中。
- Consumer组件会从Context对象的内部属性中读取value，并且将自己的实例添加到Context对象的订阅者列表中。
- 当Provider组件的value属性发生变化时，它会触发Context对象的更新方法，这个方法会遍历订阅者列表，通知所有的订阅者重新渲染，从而获取最新的value。

基于这个原理，我们可以简单地实现一个自定义的`Context`，代码如下：

```js
// 创建一个自定义的Context对象
function createContext(defaultValue) {
  // 定义一个Context类，它的实例就是一个Context对象
  class Context {
    // 构造函数，接收一个默认值
    constructor(defaultValue) {
      // 初始化内部属性
      this.value = defaultValue; // 保存当前的Context值
      this.subscribers = []; // 保存订阅者列表
    }

    // 定义一个Provider组件，它接收一个value属性
    Provider = props => {
      // 将value属性保存在Context对象的内部属性中
      this.value = props.value;
      // 将Provider组件的实例添加到订阅者列表中
      this.subscribers.push(this);
      // 返回一个普通的div元素，渲染子元素
      return <div>{props.children}</div>;
    };

    // 定义一个Consumer组件，它接收一个函数作为子元素
    Consumer = props => {
      // 从Context对象的内部属性中读取value
      const value = this.value;
      // 将Consumer组件的实例添加到订阅者列表中
      this.subscribers.push(this);
      // 返回一个普通的div元素，渲染子元素，传入value作为参数
      return <div>{props.children(value)}</div>;
    };

    // 定义一个更新方法，它会遍历订阅者列表，通知所有的订阅者重新渲染
    update = () => {
      for (let subscriber of this.subscribers) {
        subscriber.forceUpdate();
      }
    };
  }

  // 返回一个Context对象的实例
  return new Context(defaultValue);
}
```


有了这个自定义的`Context`，我们就可以像使用`React Context`一样使用它，例如：

```js
// 创建一个自定义的Context对象
const ThemeContext = createContext('light');

// 在根组件中使用Provider提供一个Context值
function App() {
  const [theme, setTheme] = useState('light');
  return (
    <ThemeContext.Provider value={theme}>
      <h1>Current theme: {theme}</h1>
      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
        Toggle theme
      </button>
      <Toolbar />
    </ThemeContext.Provider>
  );
}

// 在子组件中使用useContext访问Context值
function Toolbar(props) {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

function ThemedButton() {
  // 使用useContext获取Context值
  const theme = useContext(ThemeContext);
  return <Button theme={theme} />;
}

```

可以看到，这个自定义的`useContext`也可以正常地工作，当我们点击切换主题的按钮时，`ThemedButton`组件会根据`Context`值的变化而重新渲染。

## 最佳实践

使用`useContext`可以让你在函数组件中轻松地访问`Context`值，但是也有一些注意事项和最佳实践，我们在这里总结一下：

- 尽量避免在Context中存储过多的数据，因为每次Context值变化，所有的订阅者都会重新渲染，这会影响性能。如果你需要存储一些复杂的状态，可以考虑使用useReducer或者Redux等状态管理库。
- 尽量避免在Context中存储一些不稳定的数据，比如函数，对象，数组等，因为每次渲染都会创建新的引用，这会导致Context值的不必要的变化，从而触发订阅者的重新渲染。如果你需要在Context中传递一些函数，可以考虑使用useCallback来缓存函数的引用，避免每次渲染都创建新的函数。
- 尽量避免在Context中存储一些不相关的数据，比如主题，语言，用户信息等，因为这些数据的变化可能是独立的，但是如果放在同一个Context中，就会导致所有的订阅者都重新渲染，即使他们只关心其中的一部分数据。如果你需要在Context中传递一些不相关的数据，可以考虑使用多个Context，每个Context只负责一种数据，这样可以减少不必要的渲染。

## 总结

`useContext`是`React Hooks`提供的一个强大的`Hook`，它可以让你在函数组件中直接访问`Context`值，而不需要使用`Consumer`组件。`useContext`的用法非常简单，只需要传入一个`Context`对象，就可以返回这个`Context`的当前值。`useContext`的优点有：

- 不需要使用Consumer组件，减少了组件树的层级和复杂度。
- 可以在一个组件中访问多个Context，只需要多次调用useContext即可，不需要嵌套Consumer组件。
- 不需要使用函数作为子元素，避免了每次渲染都创建新的函数的问题，提高了性能和内存的使用。

`useContext`的实现原理也非常简单，它只需要做两件事：

- 从Context对象的内部属性中读取value，并返回给函数组件。
- 在函数组件的渲染过程中，将函数组件的实例添加到Context对象的订阅者列表中，以便在Context值变化时，能够触发函数组件的重新渲染。

使用`useContext`时，也有一些注意事项和最佳实践，我们总结了一下：

- 尽量避免在Context中存储过多的数据，因为每次Context值变化，所有的订阅者都会重新渲染，这会影响性能。
- 尽量避免在Context中存储一些不稳定的数据，比如函数，对象，数组等，因为每次渲染都会创建新的引用，这会导致Context值的不必要的变化，从而触发订阅者的重新渲染。
- 尽量避免在Context中存储一些不相关的数据，比如主题，语言，用户信息等，因为这些数据的变化可能是独立的，但是如果放在同一个Context中，就会导致所有的订阅者都重新渲染，即使他们只关心其中的一部分数据。

React Hooks大全—useContext

> 在本文中，我们将重点介绍一个React常用的内置Hook，即useCallback。useCallback可以让我们缓存函数，避免因为函数引用的变化而导致不必要的子组件重渲染。我们讲解它的基本使用、实现原理、与useMemo的区别、最佳实践等。




## 基本使用

`useCallback`是一个`React Hook`，所以我们只能在函数式组件或者自定义`Hook`中调用它，不能在循环或者条件语句中调用它。`useCallback`的基本语法如下：

```js
const cachedFn = useCallback(fn, dependencies);
```

`useCallback`接受两个参数，分别是：

- fn：一个函数，它可以接受任意的参数，返回任意的值。这个函数是我们想要缓存的函数，它的定义不应该依赖于组件的状态或者属性，否则可能会导致缓存失效或者闭包陷阱。
- dependencies：一个数组，它包含了所有fn中引用的依赖项，例如状态、属性、变量或者函数等。这些依赖项必须是可比较的，即可以用Object.is来判断它们是否相等。如果我们忽略了某些依赖项，或者提供了一个空数组，那么useCallback将无法正确地更新缓存的函数，可能会导致意想不到的结果。

`useCallback`的返回值是一个函数，它是`fn`的一个缓存版本。

在组件的初始渲染时，`useCallback`会返回`fn`本身。在后续的渲染中，`useCallback`会根据依赖项的变化来决定是否返回上一次的缓存函数，还是返回当前的`fn`。

如果依赖项没有变化，`useCallback`会返回上一次的缓存函数，这样可以保证函数的引用不变，从而避免触发子组件的重渲染。如果依赖项有变化，`useCallback`会返回当前的`fn`，并将其缓存起来，以备下次使用。


下面是一个简单的例子，演示了`useCallback`的基本用法：


```js
import React, { useState, useCallback } from "react";

// 一个子组件，接受一个函数作为属性
function Child({ onClick }) {
  console.log("Child rendered");
  return <button onClick={onClick}>Click Me</button>;
}

// 一个父组件，使用useCallback来缓存一个函数
function Parent() {
  const [count, setCount] = useState(0);

  // 使用useCallback来创建一个缓存的函数，该函数会更新count状态
  // 该函数的依赖项是setCount，它是一个稳定的函数，不会随着渲染而变化
  const handleClick = useCallback(() => {
    setCount((prevCount) => prevCount + 1);
  }, [setCount]);

  return (
    <div>
      <p>Count: {count}</p>
      {/* 将缓存的函数传递给子组件 */}
      <Child onClick={handleClick} />
    </div>
  );
}
```
在这个例子中，父组件使用`useState`来创建一个`count`状态，然后使用`useCallback`来创建一个缓存的函数，该函数会更新`count`状态。注意，这个函数的依赖项是`setCount`，它是一个稳定的函数，不会随着渲染而变化，所以我们可以放心地将它作为依赖项。然后，父组件将这个缓存的函数传递给子组件，子组件接受这个函数作为属性，并在按钮上绑定这个函数。

当我们运行这个例子时，我们可以看到，每当我们点击按钮时，`count`状态会增加，父组件会重新渲染，但是子组件不会重新渲染，因为它接收的函数的引用没有变化。这样，我们就利用`useCallback`来优化了子组件的性能，避免了不必要的重渲染。

## 实现原理

`useCallback`的实现原理其实很简单，它就是利用了闭包和数组来存储和比较函数和依赖项。我们可以用以下的伪代码来模拟`useCallback`的实现过程：


```js
// 定义一个全局的缓存对象，用来存储函数和依赖项
const cache = {
  fn: null, // 存储函数
  dependencies: [], // 存储依赖项
};

// 定义一个useCallback函数，接受函数和依赖项作为参数，返回一个缓存的函数
function useCallback(fn, dependencies) {
  // 如果缓存对象中没有存储函数，或者依赖项的长度不一致，或者依赖项有变化
  if (
    cache.fn === null ||
    cache.dependencies.length !== dependencies.length ||
    dependencies.some((dep, i) => !Object.is(dep, cache.dependencies[i]))
  ) {
    // 将当前的函数和依赖项存储到缓存对象中
    cache.fn = fn;
    cache.dependencies = dependencies;
  }
  // 返回缓存对象中的函数
  return cache.fn;
}
```

从上面的伪代码中，我们可以看到，`useCallback`其实就是通过一个全局的缓存对象来存储和返回函数，同时通过比较依赖项的长度和值来判断是否需要更新缓存对象。当然，这只是一个简化的版本，实际的`useCallback`可能会更复杂一些，但是基本的思路是一样的。

有些人可能会问，`useCallback`和`useMemo`有什么区别呢？它们不都是用来缓存值的吗？

其实，`useCallback`和`useMemo`的区别主要在于它们缓存的值的类型。`useCallback`缓存的是函数，而`useMemo`缓存的是任意的值，包括函数、对象、数组等。

`useCallback`和`useMemo`的用法也有一些不同，`useCallback`返回的是一个函数，我们可以直接调用它，而`useMemo`返回的是一个值，我们需要将它赋值给一个变量或者常量。`useCallback`和`useMemo`的语法如下：

```js
// useCallback的语法
const cachedFn = useCallback(fn, dependencies);

// useMemo的语法
const cachedValue = useMemo(() => value, dependencies);
```

从上面的语法中，我们可以看到，`useCallback`接受一个函数作为第一个参数，而`useMemo`接受一个函数的返回值作为第一个参数。

这意味着，`useCallback`只会在依赖项变化时执行一次函数，而`useMemo`会在每次渲染时都执行一次函数，只是在依赖项变化时才会更新缓存的值。

因此，`useCallback`适合用来缓存那些不需要立即执行的函数，而`useMemo`适合用来缓存那些需要立即执行的值。

下面是一个例子，演示了`useCallback`和`useMemo`的区别：


```js
import React, { useState, useCallback, useMemo } from "react";

// 一个子组件，接受一个函数和一个值作为属性
function Child({ onClick, value }) {
  console.log("Child rendered");
  return (
    <div>
      <p>Value: {value}</p>
      <button onClick={onClick}>Click Me</button>
    </div>
  );
}

// 一个父组件，使用useCallback和useMemo来缓存一个函数和一个值
function Parent() {
  const [count, setCount] = useState(0);

  // 使用useCallback来创建一个缓存的函数，该函数会更新count状态
  // 该函数的依赖项是setCount，它是一个稳定的函数，不会随着渲染而变化
  const handleClick = useCallback(() => {
    setCount((prevCount) => prevCount + 1);
  }, [setCount]);

  // 使用useMemo来创建一个缓存的值，该值是count的平方
  // 该值的依赖项是count，它是一个可变的状态，会随着渲染而变化
  const squared = useMemo(() => {
    console.log("squared computed");
    return count * count;
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      {/* 将缓存的函数和值传递给子组件 */}
      <Child onClick={handleClick} value={squared} />
    </div>
  );
}
```


在这个例子中，父组件使用`useState`来创建一个`count`状态，然后使用`useCallback`来创建一个缓存的函数，该函数会更新`count`状态。

注意，这个函数的依赖项是`setCount`，它是一个稳定的函数，不会随着渲染而变化，所以我们可以放心地将它作为依赖项。

然后，父组件使用`useMemo`来创建一个缓存的值，该值是`count`的平方。注意，这个值的依赖项是`count`，它是一个可变的状态，会随着渲染而变化，所以我们需要将它作为依赖项。然后，父组件将这个缓存的函数和值传递给子组件，子组件接受这个函数和值作为属性，并在按钮上绑定这个函数，以及显示这个值。


当我们运行这个例子时，我们可以看到，每当我们点击按钮时，`count`状态会增加，父组件会重新渲染，子组件也会重新渲染，因为它接收的值的引用发生了变化。

同时，我们可以看到控制台的输出，每当我们点击按钮时，`useMemo`会重新计算`squared`的值，并打印出`"squared computed"`，而`useCallback`不会重新执行函数，只是返回上一次的缓存函数。这样，我们就可以看出`useCallback`和`useMemo`的区别和联系。


## 最佳实践

`useCallback`是一个有用的`Hook`，但是它也有一些需要注意的地方。在使用`useCallback`时，我们应该遵循以下的一些最佳实践：

- 不要滥用useCallback。useCallback并不是一个万能的性能优化工具，它也有一定的开销，例如创建和比较依赖项数组，以及存储和返回缓存函数。如果我们不需要缓存函数，或者缓存函数的收益小于开销，那么使用useCallback反而会降低性能，而不是提高性能。因此，我们应该在必要的时候才使用useCallback，例如当我们需要将函数作为属性传递给子组件，或者当我们需要将函数作为依赖项传递给其他Hook时。
- 不要忽略依赖项。useCallback的第二个参数是一个非常重要的参数，它决定了缓存函数的有效性和正确性。如果我们忽略了某些依赖项，或者提供了一个空数组，那么useCallback将无法正确地更新缓存函数，可能会导致缓存函数引用了过期的状态或者属性，或者触发了无限循环或者内存泄漏等问题。因此，我们应该尽量完整地提供所有的依赖项，或者使用一些工具，例如eslint-plugin-react-hooks，来帮助我们检查和修复依赖项的问题。
- 不要在缓存函数中定义状态或者属性。useCallback的第一个参数是一个函数，它可以接受任意的参数，返回任意的值。但是，这个函数的定义不应该依赖于组件的状态或者属性，否则可能会导致缓存失效或者闭包陷阱。例如，下面的代码就是一个错误的用法：

```js
import React, { useState, useCallback } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  // 错误的用法：在缓存函数中定义了一个状态
  const increment = useCallback(() => {
    // 这里的count是一个闭包变量，它只会在初始渲染时被捕获，后续的渲染不会更新它
    // 这会导致increment函数总是返回1，而不是正确的count + 1
    const [count, setCount] = useState(0);
    return count + 1;
  }, []);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(increment)}>Increment</button>
    </div>
  );
}
```

在这个例子中，我们在缓存函数中定义了一个状态，然后将这个缓存函数作为`setCount`的参数。

这是一个错误的用法，因为这个缓存函数只会在初始渲染时被创建，它捕获了当时的`count`值，后续的渲染不会更新这个值，导致`increment`函数总是返回1，而不是正确的`count + 1`。

这就是一个典型的闭包陷阱，它会让我们的状态不同步，造成逻辑错误。为了避免这个问题，我们应该将状态或者属性作为缓存函数的参数，而不是在缓存函数中定义它们。例如，下面的代码就是一个正确的用法：

```js
import React, { useState, useCallback } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  // 正确的用法：将状态作为缓存函数的参数
  const increment = useCallback((count) => {
    // 这里的count是一个参数，它会随着setCount的调用而更新，保持同步
    // 这会导致increment函数返回正确的count + 1
    return count + 1;
  }, []);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount((prevCount) => increment(prevCount))}>
        Increment
      </button>
    </div>
  );
}
```


在这个例子中，我们将`count`作为缓存函数的参数，然后将这个缓存函数作为`setCount`的参数。这是一个正确的用法，因为这个缓存函数不会依赖于任何状态或者属性，它只会根据传入的参数来返回一个值，这样就避免了闭包陷阱，保证了状态的同步，实现了逻辑的正确。

## 总结

`useCallback`是一个可以让我们缓存函数的`Hook`，它可以帮助我们优化性能，避免不必要的子组件重渲染。

`useCallback`的实现原理其实很简单，它就是利用了闭包和数组来存储和比较函数和依赖项。

`useCallback`和`useMemo`的区别主要在于它们缓存的值的类型。`useCallback`缓存的是函数，而`useMemo`缓存的是任意的值，包括函数、对象、数组等。

不要滥用`useCallback`，它也有开销。不要忽略依赖项，它决定了缓存函数的正确性。不要在缓存函数中定义状态或者属性，它会导致闭包陷阱。

React Hooks大全—useCallback

> React Hooks有很多种，其中之一就是useMemo，它可以帮助我们优化组件的性能，避免不必要的渲染和计算。本文将介绍useMemo的基本使用，实现原理，最佳实践和一些常见的问题。




## 基本使用

`useMemo`接受两个参数：一个创建函数和一个依赖数组。`useMemo`会返回创建函数的返回值，并且只有当依赖数组中的某个值发生变化时，才会重新执行创建函数。`useMemo`的基本语法如下：

```js
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
```

上面的代码中，`useMemo`会返回`computeExpensiveValue(a, b)`的结果，并且只有当`a`或`b`发生变化时，才会重新调用`computeExpensiveValue(a, b)`。这样可以避免在每次渲染时都执行`computeExpensiveValue(a, b)`，从而提高性能。

`useMemo`的一个典型的应用场景是，当我们有一个复杂的组件，它接受一个对象作为`props`，而这个对象是由父组件通过一些计算得到的，我们可以使用`useMemo`来缓存这个对象，避免在每次父组件渲染时都重新创建这个对象，导致子组件也重新渲染。例如：

```js
// 父组件
function Parent({ a, b }) {
  // 使用useMemo来缓存data对象，只有当a或b变化时，才重新创建data对象
  const data = useMemo(() => ({ a, b }), [a, b]);
  return (
    <div>
      <p>a: {a}</p>
      <p>b: {b}</p>
      <Child data={data} />
    </div>
  );
}

// 子组件，使用React.memo来避免不必要的渲染
const Child = React.memo(({ data }) => {
  console.log("Child render");
  return <div>{JSON.stringify(data)}</div>;
});
```

上面的代码中，如果我们改变`a`或`b`的值，父组件会重新渲染，同时也会重新创建`data`对象，导致子组件也重新渲染。但是如果我们改变其他的状态，比如父组件的`c`或`d`，父组件会重新渲染，但是`data`对象不会变化，所以子组件不会重新渲染。这样可以提高子组件的性能，避免不必要的渲染。


## 实现原理

`useMemo`的实现原理其实很简单，它就是利用了闭包和缓存的机制，来保存上一次的创建函数和依赖数组，然后在每次渲染时，比较当前的依赖数组和上一次的依赖数组，如果有变化，就重新执行创建函数，否则就返回上一次的缓存值。下面是一个简单的`useMemo`的实现：

```js
// 用一个全局变量来保存上一次的创建函数和依赖数组
let lastCreate;
let lastDeps;

function useMemo(create, deps) {
  // 如果没有传入依赖数组，或者依赖数组的长度不一致，就重新执行创建函数
  if (!lastDeps || lastDeps.length !== deps.length) {
    lastCreate = create;
    lastDeps = deps;
    return create();
  }
  // 否则，遍历依赖数组，比较每一项是否相等，如果有不相等的，就重新执行创建函数
  for (let i = 0; i < deps.length; i++) {
    if (lastDeps[i] !== deps[i]) {
      lastCreate = create;
      lastDeps = deps;
      return create();
    }
  }
  // 如果依赖数组都相等，就返回上一次的缓存值
  return lastCreate();
}
```

## 最佳实践

使用`useMemo`时，有一些最佳实践和注意事项，我们需要遵守和了解，以免出现错误或者性能问题。下面列举了一些常见的最佳实践：

- 不要在useMemo中执行有副作用的操作，比如修改状态，发起请求，订阅事件等。useMemo不保证创建函数的执行时机，有可能会被React跳过或者延迟执行。如果需要执行有副作用的操作，应该使用useEffect或者useLayoutEffect。
- 不要依赖useMemo来保证引用的稳定性，比如用useMemo来返回一个函数或者一个组件。useMemo不保证缓存值的永久有效性，有可能会被React在任何时候清除或者重置。如果需要保证引用的稳定性，应该使用useCallback或者useRef。
- 不要过度使用useMemo，因为useMemo本身也有一定的开销，比如比较依赖数组，缓存值等。如果创建函数的执行代价不高，或者组件的渲染代价不高，或者组件的渲染频率不高，就没有必要使用useMemo。只有当我们确实遇到了性能问题，才需要使用useMemo来优化。
- 不要忘记传入依赖数组，或者传入错误的依赖数组。如果不传入依赖数组，useMemo就会在每次渲染时都重新执行创建函数，失去了缓存的意义。如果传入错误的依赖数组，比如漏掉了某个依赖，或者传入了不相关的依赖，就会导致缓存值的不正确或者不必要的更新。我们应该尽量保证依赖数组的完整和准确，可以使用ESLint的react-hooks插件来帮助我们检查依赖数组。

## 总结

`useMemo`是一个非常有用的`Hook`，它可以帮助我们优化组件的性能，避免不必要的渲染和计算。

`useMemo`的基本用法是，传入一个创建函数和一个依赖数组，返回创建函数的返回值，并且只有当依赖数组中的某个值发生变化时，才会重新执行创建函数。

`useMemo`的实现原理是，利用闭包和缓存的机制，来保存上一次的创建函数和依赖数组，然后在每次渲染时，比较当前的依赖数组和上一次的依赖数组，如果有变化，就重新执行创建函数，否则就返回上一次的缓存值。

使用`useMemo`时，我们需要遵守一些最佳实践和注意事项，比如不要在`useMemo`中执行有副作用的操作，不要依赖`useMemo`来保证引用的稳定性，不要过度使用`useMemo`，不要忘记传入依赖数组，或者传入错误的依赖数组。

React Hooks大全—useMemo

欢迎来到我的博客，这里是我分享前端、web3、理财、互联网等方面的知识和心得的地方。我是一名热爱编程的前端程序员，我希望通过我的博客能够帮助更多的人学习和进步。在这里，你可以找到最新最实用的前端技术教程，了解最前沿的互联网动态和趋势，掌握最有效的理财方法和策略。我也会不定期地发布一些个人项目和作品，展示我的创意和能力。如果你对我的博客感兴趣，欢迎你留言、评论、收藏、关注，也可以通过邮箱或社交媒体与我联系，交流学习和合作。谢谢你的支持！