> 前端的包管理工具众多，很多项目都选择了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使用规则：为什么不在条件语句和循环中使用它们

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




1. 详细了解了上家公司都在做什么，包括技术栈、功能实现、产品优势（聊了接近20分钟）
2. 代码看输出，事件循环相关的，setTimeout、promise
3. 工作中遇到需要深拷贝的时候怎么处理的，如果自己手写需要注意什么
4. react为什么不建议在条件语句和循环语句里使用hooks
5. 检测括号是否合法，{{}}}}
6. v8的垃圾回收机制
7. 产品的各种开源版、saas版、私有化版是如何进行代码管理的，日常开发的分支是如何管理的，git merge、cherry pick

前端面经分享-细红线科技一面（罗永浩创业公司）

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