> 在最近的面试中，被问到了React的闭包陷阱，一时间没想到这个名词对应的场景，只知道hooks在底层实现的时候，会借助闭包来管理自己的内部状态。
> 
> 后面百度了一下React的闭包陷阱，发现这个现象其实在工作里遇到过很多次了，但是面试的时候并不知道这个现象对应的名词是闭包陷阱，有点可惜




`React` 中的闭包陷阱是指在使用函数组件时，特别是在使用 `useState` 或 `useEffect` 这类 `React Hook` 时可能会遇到的一个常见问题。这个问题通常涉及到闭包的作用域和 `JavaScript` 中的变量引用机制。

## 问题描述

当在函数组件中使用 `useState` 或 `useEffect` 时，经常会在回调函数中访问组件的状态或者 `props`。例如：

```js
import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={handleClick}>
        Click me
      </button>
    </div>
  );
}
```

在上面的例子中，`useEffect` 中的回调函数依赖于 `count` 这个状态变量。每次 `count` 更新时，`useEffect` 会更新 `document.title`，以反映当前的点击次数。

## 闭包陷阱

问题出现在 `handleClick 函数中`。`handleClick` 函数使用了 `setCount(count + 1)`，看起来似乎会使 `count` 增加，然后触发重新渲染组件，并在 `useEffect` 中更新 `document.title`。然而，实际上，这种写法会导致一个常见的陷阱。


## 分析

在 `JavaScript` 中，函数的闭包捕获了在其定义时可访问的变量。这意味着 `handleClick` 函数在定义时捕获了 `count` 的当前值（在 `setCount` 被调用之前的值），而不是每次函数执行时 `count` 的最新值。

因此，当点击按钮时，`handleClick` 函数中的 `count` 仍然是点击按钮之前的值。这导致了 `setCount(count + 1)` 无法正确地递增 `count` 的值。


## 解决方法

为了解决这个问题，需要确保在更新状态时使用最新的 `count` 值。`React` 提供了一种方法来处理这种情况，即使用函数形式的更新，而不是直接使用 `count` 的值。

修改 `handleClick` 函数如下：

```js
const handleClick = () => {
  setCount(prevCount => prevCount + 1);
};
```

通过这种方式，`setCount` 接受一个函数作为参数，这个函数会接收当前的状态值作为参数，返回新的状态值。这样做的好处是，`React` 保证在调用该函数时，会使用最新的状态值，而不需要依赖于当前作用域中的变量。

## 总结

`React` 中的闭包陷阱是由于函数组件中的作用域和变量引用机制导致的常见问题。为了避免这种问题，特别是在使用 `React Hook` 时，应该采用函数形式的状态更新，而不是直接引用当前作用域中的变量。这种做法可以确保在更新状态时使用最新的值，避免潜在的 `bug` 和不一致性。

React的闭包陷阱

> 前端的包管理工具众多，很多项目都选择了yarn，那么使用yarn的好处是什么呢？




## 性能优化

- **并发安装：** yarn支持并行安装依赖项，这意味着它可以更快的下载和安装包，尤其是在有多个依赖项需要安装时。
- **离线模式：** yarn可以缓存下载的包，因此可以在没有互联网连接时重新使用这些缓存，加快安装速度。
- **版本锁定：** yarn通过生成`yarn.lock`文件锁定安装时的版本，确保在不同环境下安装的依赖项保持一致，避免了一些常见的依赖冲突问题。

## 安装性

- **自动验证：** yarn默认启用对依赖项的校验，通过哈希算法验证下载的包的完整性，防止下载篡改或损坏的包。
- **安全审查：** yarn提供了`yarn audit`命令来检查依赖是否存在已知的漏洞，帮助开发者及时更新受影响的包。


## 易用性

- **统一CLI：** yarn提供了一致的命令行接口（CLI），易于学习和使用，同时支持大多数npm命令，便于从npm迁移过来。
- **交互式提示：** yarn在执行关键操作时提供交互式提示，例如选择合适的版本解决依赖冲突，提升开发效率。


## 生态系统支持

- **Workspaces：** yarn支持Workspaces，可以管理多个相关的包，提供了更好的monorepo支持。
- **插件支持：** yarn提供了丰富的插件生态系统，扩展了其功能，例如支持 TypeScript 、 PnP等。

## 社区和支持

- **活跃的社区：** yarn由 Facebook、Google、Exponent 和 Tilde 共同开发和维护，有一个活跃的社区支持和持续的更新。

## 对比其它包管理工具（如npm）

- **性能对比：** yarn在大多数情况下比 npm 更快，尤其是在并行安装和离线模式方面。
- **安全性：** yarn在自动验证和安全审查功能相较于 npm 来说更为强大和直观。
- **易用性：** yarn提供了更一致的用户体验和额外的交互性提示，这使得它更适合大型项目和团队协作。


综上所述，yarn 是一个功能强大且高效的包管理工具，尤其适用于需要处理复杂依赖关系和大型代码库的项目。通过其优化的性能、高级的安全功能以及良好的用户体验，yarn 成为了许多开发者的首选工具之一。

使用yarn的好处是什么

> 2024年6月24日，细红线科技前端技术二面





面试官很随和，面试过程像聊天一样进行，回答有错的地方也会提醒和补充，这面我自我评价表现很差，很紧张，一些之前看过的东西也没说出来。

1. 详细聊上家公司的项目，业务、打包构建、CICD、技术选型、docker
2. yarn有什么好处
3. 有用过nodejs吗，在工作里做了什么
4. react的错误边界，函数式组件如何捕获异常

类组件有对应的钩子可以捕获，componentDidCatch

函数式组件同样封装一个专门捕获异常的组件，然后通过try catch来判断，没错误就正常显示children，有错误展示错误UI

5. react的闭包陷阱
6. 虚拟列表，虚拟列表是如何保证不卡的，注意事项
7. ts的omit和pick

我上家公司项目用的js没用ts，只在工作外学习过ts的基础，基本上只会写类型，减大分....日常工作里如果不经常使用ts的话，只靠学习基础知识，很难应对面试。

react的这些问题也基本都在各种地方看到过，但是感觉都没回答到点上....

前端面经分享-细红线科技二面

> 在日常开发中，能够优雅的复用组件和逻辑，是优秀开发者的职责。在react中，复用逻辑的方式有很多，可以适用于不同的业务场景。今天说三个比较有代表性的，Render Props、HOC、Hooks




## Render Props

创建一个接受函数作为其子组件的prop的组件，该函数返回一个React元素。通过这种方式，父组件可以通过传递不同的函数来重用相同的逻辑。

示例代码：

```js
function DataFetcher({ url, children }) {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(data => setData(data))
      .catch(error => console.error('Error fetching data: ', error));
  }, [url]);

  return children(data);
}

function DisplayData() {
  return (
    <DataFetcher url="https://api.example.com/data">
      {data => (
        <div>
          {data ? (
            <ul>
              {data.map(item => (
                <li key={item.id}>{item.name}</li>
              ))}
            </ul>
          ) : (
            <p>Loading...</p>
          )}
        </div>
      )}
    </DataFetcher>
  );
}

```

在上面的例子中，`DataFetcher`组件通过`children prop`接受一个函数，并将获取到的数据作为参数传递给该函数，`DisplayData`组件通过传递一个函数来获取并渲染数据。


## Higher-Order Components (HOC) 高阶函数

高阶组件是一个函数，接受一个组件作为参数并返回一个新的增强组件。

示例代码：

```js
function withDataFetching(WrappedComponent, url) {
  return function DataFetchingComponent(props) {
    const [data, setData] = useState(null);

    useEffect(() => {
      fetch(url)
        .then(response => response.json())
        .then(data => setData(data))
        .catch(error => console.error('Error fetching data: ', error));
    }, [url]);

    return <WrappedComponent {...props} data={data} />;
  };
}

function DisplayData({ data }) {
  return (
    <div>
      {data ? (
        <ul>
          {data.map(item => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
}

const DisplayDataWithFetching = withDataFetching(DisplayData, 'https://api.example.com/data');
```

在上面的例子中，`withDataFetching`函数接受一个组件和一个`URL`作为参数，并返回一个新的组件，在新组件内部进行数据获取并传递给被包裹的组件。

## Hooks

自定义`Hooks`允许你在函数组件中重用状态逻辑。通过将逻辑封装在自定义`Hook`中，可以在不同的组件中复用它。

示例代码：

```js
function useDataFetching(url) {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(data => setData(data))
      .catch(error => console.error('Error fetching data: ', error));
  }, [url]);

  return data;
}

function DisplayData() {
  const data = useDataFetching('https://api.example.com/data');

  return (
    <div>
      {data ? (
        <ul>
          {data.map(item => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
}
```

在上面的例子中，`useDataFetching`自定义`Hook`封装了数据获取逻辑，`DisplayData`组件通过调用该`Hook`获取数据并渲染。



这些方法提供了灵活的方式来在`React`中实现逻辑复用，具体选择取决于项目中具体的业务场景和开发团队的偏好。

React逻辑复用的方式都有哪些

> React Hooks为函数组件引入了状态和生命周期特性，极大地增强了其功能。然而，正确使用Hooks是确保组件稳定性和性能的关键。本文将探讨React Hooks的基本规则，以及为什么我们不应该在条件语句和循环中使用它们。




## Hooks的基本规则

`React`团队为`Hooks`设定了两个基本规则：

1. **只在最顶层使用Hooks**：不要在循环、条件或嵌套函数中调用Hooks。
2. **只在React函数中调用Hooks**：不要在普通的JavaScript函数中调用Hooks。

这些规则确保了`Hooks`的调用顺序在多次渲染之间保持一致。由于`React`内部没有办法追踪到底有多少个状态或副作用需要被管理，它依赖于`Hooks`的调用顺序来关联状态和副作用。

## 为什么避免在条件语句和循环中使用Hooks

### 维持调用顺序

`React`的函数组件是声明式的；它们可能会因为父组件的变化或者自身的状态更新而多次执行。`React Hooks`必须在每次组件渲染时以相同的顺序被调用，以便`React`能够正确地追踪每个`Hook`的状态。如果我们在条件语句或循环中使用`Hooks`，就可能打乱这个顺序，导致状态管理出现问题。

### 避免逻辑错误

在条件语句中使用`Hooks`可能会导致组件在不同的渲染周期中创建不同数量的`Hooks`，这违反了`React`的规则。例如，如果一个`Hook`只在特定条件下被调用，那么在条件改变时，`React`将无法找到对应的状态，从而引发错误。

### 代码的可读性和可维护性

将`Hooks`放在条件语句或循环中会使得代码更难阅读和维护。开发者在阅读代码时，可能会对组件的状态来源和逻辑流程感到困惑。遵守`Hooks`的规则有助于保持代码的清晰和一致性。

## 结论

遵循`React`的规则，始终在组件的最顶层使用`Hooks`，可以避免许多常见的问题。这有助于确保组件的稳定性和可预测性，同时也使得代码更加清晰和易于维护。

React Hooks使用规则：为什么不在条件语句和循环中使用它们

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