关于我用ChatGPT 学习 React源码这件事

poloma
672 阅读6分钟

聊聊我对智能AI的理解

好久没有更新掘金账号了，没想到大家都想尽办法通过ChatGPT AI+ 来赚钱，随着 智能 AI 越来越火，我们都想站在风口上，有人想要通过ChatGPT致富，买双色球的，买投资股票的（PS 本文完全不建议大家这样去做）；有人想要通过它来了解最新的资讯，打破信息差；不管怎么样AI+ 将会影响各行各业，甚至会产生一场生产力的革命。试想一下，如果我们在面试的时候拥有一个 ChatGPT 大脑 那将是无往不利

f206e51092a81b6527482fb9a478204.jpg

联想

这种一问一答 即时反馈的聊天机器人，我理解本质上是一个单字接龙，而长文章其实就是通过单字接龙的自回归所生成的，它通过提前的训练才能让它生成人们想要的答案的，这种训练方式是它按照我们既定的模型范例做 单字接龙，直到它学会举一反三的规律，但是缺点也很明显，高度依赖学习资料需要大量的运算学习，所以我觉得ChatGPT 实际上后面 GPT 实际上代表的就是 Generative & Pre-Trainning & Transformer

正文

今天来给大家一点干货，希望能在后面大家面试或者工作中对React 源码的掌握上带来帮助，我们向 ChatGPT-4 提问关于 React 热门面试题，我们马上进入正题吧

React Hooks 实现原理

React Hooks]() 的基本实现原理。React Hooks 是 React 16.8 版本引入的一个新特性，它允许你在不编写类组件的情况下使用状态和生命周期特性。最常用的 Hooks 有 useState 和 useEffect，还有很多其他的 Hooks。

让我们看一下 React Hooks 的实现原理。

首先，需要了解 Hooks 的工作方式。React 内部维护了一个指针（称为 "fiber"），指向当前正在运行的组件。在组件中使用 Hooks 时，React 将它们与对应的 "fiber" 节点关联。每个组件都有自己的 "fiber" 节点，包含一个 "hooks" 列表，这些 hooks 按照它们在组件中出现的顺序进行存储。

useState

useState 是一个允许你在函数组件中使用状态的 Hook。它接受一个初始值作为参数，并返回一个包含两个元素的数组：状态变量和用于更新状态的函数。这是一个简化版的 useState 实现：

function useState(initialValue) {
  const currentFiber = getCurrentFiber();
  const currentState = currentFiber.memoizedState || initialValue;

  function setState(newValue) {
    currentFiber.memoizedState = newValue;
    scheduleUpdateOnFiber(currentFiber);
  }

  return [currentState, setState];
}

这里，getCurrentFiber 获取当前正在运行的组件的 "fiber" 节点，scheduleUpdateOnFiber 则用于调度组件的更新。

useEffect

useEffect 是一个允许你执行副作用操作的 Hook，例如数据请求、订阅或手动修改 DOM。它接受两个参数：一个副作用函数和一个依赖项数组。当组件挂载、卸载或依赖项发生变化时，副作用函数会被执行。简化版的 useEffect 如下：

function useEffect(effect, dependencies) {
  const currentFiber = getCurrentFiber();
  const hasChangedDependencies = currentFiber.dependencies
    ? !dependencies.every((dep, i) => dep === currentFiber.dependencies[i])
    : true;

  if (hasChangedDependencies) {
    currentFiber.effect = effect;
    currentFiber.dependencies = dependencies;
  }
}

在这个实现中，我们首先检查依赖项是否发生了变化。如果发生了变化或者是组件的首次渲染，我们将副作用函数和依赖项存储在当前 "fiber" 节点上。React 会在适当的时机执行副作用函数，并在组件卸载时执行清理操作。

需要注意的是，这些实现都是简化版本，仅用于帮助理解 Hooks 的工作原理。实际的 React 源码包含更多的细节和优化。你可以在 React GitHub 仓库 中查看完整的源代码。

Fiber

React中什么是 Fiber，它解决了什么问题

Fiber 是 React 内部实现的一种数据结构，用于支持更高效的组件树遍历和更新。Fiber 的出现是为了解决 React 中的性能问题，特别是在大型应用中。Fiber 的主要目标是实现增量渲染，即将渲染工作分为多个小任务，以便在执行任务的过程中，可以根据优先级进行调度。这样就能更好地利用浏览器的空闲时间，从而提高应用的响应性。

Fiber 解决的问题主要有：

  1. 协调任务调度：通过引入 Fiber，React 可以更好地在渲染过程中进行任务调度。这意味着 React 可以根据任务的优先级进行调度，从而提高性能。
  2. 增量渲染：Fiber 架构允许 React 将渲染过程分为多个小任务，这样就可以在浏览器的空闲时间执行这些任务，从而降低大型组件树更新对性能的影响。
  3. 并发模式：Fiber 架构使得 React 可以在未来更好地支持并发渲染和其他高级功能。

Fiber的可中断、可恢复怎么实现的

Fiber 架构通过引入一个双缓冲技术实现可中断和可恢复。这意味着 React 在渲染过程中会保留一份当前 UI 树的副本（称为current fiber 树），同时构建一个新的 UI 树（称为workInProgress fiber 树）。这样，在执行更新任务时，如果需要中断，React 可以直接回到current fiber 树进行恢复，而不会影响到正在执行的任务。

Fiber 更新机制的核心流程

  1. 当有状态更新时，React 会根据更新的优先级创建一个任务。
  2. React 会将任务添加到任务队列中。
  3. 在浏览器的空闲时间，React 会从任务队列中选择优先级最高的任务进行处理。
  4. React 会遍历组件树，为每个更新的组件创建一个对应的 Fiber 节点。
  5. React 会逐个处理这些 Fiber 节点，执行它们的生命周期方法，并计算它们的新状态。
  6. 当所有更新完成后，React 会将workInProgress fiber 树变为current fiber 树，从而完成 UI 更新。

Fiber 小结

总之，Fiber 是一种数据结构，它为 React 带来了更高效的组件树遍历和更新。通过实现增量渲染、协调任务调度以及支持并发模式等功能，Fiber 架构为 React 提供了更好的性能。

小结

每次有新的技术出现，我们总会出现多多少少的焦虑，担心自己跟不上潮流，学不会新的技术。其实我们可以放平心态，技术是在不断更新迭代，但是不变的依然是我们使用核心的方法论，技术本身是服务于业务本身的，技术变化再大也需要依托于业务；其次我们要去养成学习的习惯，抓技术的重点和本质，掌握住主要矛盾才能在重点解决问题。我们下次有空再聊

avatar
文章
阅读
粉丝