aXin_li的博客

前面所介绍的，是属于“递”的阶段，该阶段的工作处理完成后，就会进入到 completeWork，这个是属于“归”的阶段。

beginWork 方法主要是根据传入的 FiberNode 创建下一级的 FiberNode。整个 beginWork 方法的流程如下图所示：首先在 beginWork 中，会判断当前的流程是 mount（初次渲染）还是update（更新），判断的依据就是 currentFiberNode 是否存在无法复用的 update 流程和 mount 流程大体一致，主要区别在于是否会生成带副作用标记 flags 的 FiberNode不同的 FiberNode，会有不同的 tag。

位运算是一种计算机编程中常用的操作，它直接对二进制位进行操作。二进制，指的就是以二为底的一种计数方式，常见的还有八进制、十进制、十六进制。我们经常会使用二进制来进行计算，基于二进制的位运算能够很方便的表达“增、删、查、改”。再例如，在 linux 操作系统里面，x 代表可执行权限，w代表可写权限，r 代表可读权限，对应的权限值分别就是1、2、4（2 的幂次方）使用二进制来表示权限，首先速度上面会更快一些，其次在表示多种权限的时候，会更加方便一些。比如，现在有 3 个权限 A、B、C…

在 Scheduler 中，使用最小堆的数据结构在对任务进行排序。我们在学习 Scheduler 中最小堆算法之前，需要先了解什么是 二叉堆。

用于在 React 应用中进行任务调度。它可以帮助开发人员在处理复杂的任务和操作时更好地管理和优化性能。关于 Scheduler 在React 如何渲染的可以参考下面我们根据流程图先简单的了解 Scheduler 的调度过程Scheduler 维护两个队列，分别存放普通任务和延时任务当接收的是普通任务时，会加入普通任务队列，然后执行。根据环境创建宏任务（主要创建的就是），然后执行。该方法实际上主要就是在调用。

Wip Fiber Tree 在内存中完成更新，而 Current Fiber Tree 是最终要渲染的树，两颗树通过 alternate 指针相互指向，这样在下一次渲染的时候，直接复用 Wip Fiber Tree 作为下一次的渲染树，而上一次的渲染树又作为新的 Wip Fiber Tree，这样可以加快 DOM 节点的替换与更新。显卡分为前缓冲区和后缓冲区。点击 p 元素，会触发更新，这一操作就会开启 update 流程，此时就会生成一颗新的 wip Fiber Tree，流程和之前是一样的。

注意上面 render 阶段的工作是在内存里面进行的，不会更新宿主环境 UI，因此这个阶段即使工作流程反复被中断，用户也不会看到“更新不完整的UI”。当 Scheduler 调度完成后，将任务交给 Reconciler，Reconciler 就需要计算出新的 UI，最后就由 Renderer进行渲染更新操作。

标准且浅显的回答Stack 架构在进行虚拟 DOM 树比较的时候，采用的是递归，计算会消耗大量的时间，新的 Fiber 架构采用的是链表，可以实现时间切片，防止 JS 的计算占用过多的时间从而导致浏览器出现丢帧的现象。从 React v16 开始，React 重构了整体的架构，新的架构被称之为 Fiber 架构，之前的架构称之为 Stack 架构。新的架构相比旧架构有一个最大的特点就是能够实现时间切片。新架构的出现必定是为了解决旧架构存在的问题，下面我们来讨论旧架构的问题。

面试题：什么是虚拟DOM？其优点有哪些？虚拟dom本质上就是一个普通的 JS 对象，用于描述视图的界面结构虚拟 DOM 最早是由 React 团队提出来的，因此 React 团队在对虚拟 DOM 的定义上面有绝对的话语权。可以参考。在这个概念里， UI 以一种理想化的，或者说“虚拟的”表现形式被保存于内存中。也就是说，只要我们有一种方式，能够将真实 DOM 的层次结构描述出来，那么这就是一个虚拟 DOM。在 React 中，React 团队使用的是 JS 对象来对 DOM 结构进行一个描述。

自变量的变化，导致 UI 因变量变化return (自变量的变化，导致无副作用的因变量发生变化return (自变量的变化，导致有副作用的因变量发生变化return (

标准且浅显的回答：React 中使用的是 JSX，Vue 中使用的是模板来描述界面。

首先我们考虑一下或者究竟是库（library）还是框架（framework）？当应用进一步的扩展，从简单的页面升级为了，此时意味着需要前端要有前端路由方案，例如：随着应用复杂度的进一步提升，组件的数量越来越多，状态管理越来越复杂，因此就需要状态管理的库，例如：。我们发现，除了上面提到这些功能以外，还有很多其他的功能（构建支持、数据流方案、文档工具）。和本身其实是不支持的，所以说和在平时我们经常能够听到“”这样的说法，这个时候所指的或者往往指的是整个。

useMemo函数可以用于缓存计算结果，以避免不必要的重复计算。在React的函数组件中，当组件重新渲染时，函数组件内的所有代码都会重新执行。有些计算可能是非常消耗资源的，例如进行复杂的计算或进行网络请求。如果这些计算的结果在组件重新渲染时保持不变，那么就没有必要在每次重新渲染时重新计算。这时，可以使用useMemo来缓存计算结果。useMemo接受两个参数，第一个参数是一个函数，用于进行计算；第二个参数是一个数组，用于指定依赖项。只有当依赖项发生变化时，useMemo才会重新计算。

是 React 提供的一个 Hook 函数，用于优化性能。它的作用是返回一个记忆化的函数，当依赖发生变化时，才会重新创建并返回新的函数。在 React 中，当一个组件重新渲染时，所有的函数都会被重新创建。这可能会导致一些问题，特别是在涉及到将函数作为 prop 传递给子组件时，因为每次父组件重新渲染时，子组件都会接收到一个新的函数 prop，从而触发子组件的不必要的重新渲染。使用可以避免这个问题。它接收两个参数：一个回调函数和一个依赖数组。

可以应用于函数组件和类组件，但是对于类组件，它只会对 props 进行浅比较。如果需要对类组件的 state 进行优化，可以考虑使用。接受一个组件作为参数，并返回一个新的优化过的组件。这个新的组件在接收到新的 props 时，会进行浅比较来判断是否需要重新渲染。默认只进行浅比较，如果组件的 props 是一个复杂对象，需要自定义比较函数来判断是否需要重新渲染。是 React 提供的一个高阶组件，用于对函数组件进行性能优化。可以避免不必要的重新渲染，提高组件的性能。比较函数需要返回一个布尔值。

是一个帮助优化性能的组件，通过浅层比较属性和状态的值来避免不必要的组件渲染。但需要注意深层比较的情况，以确保组件能够正常地重新渲染。

shouldComponentUpdate 是一个非常有用的方法，可以帮助你控制组件的重新渲染，以提高性能。但是，过度使用它也可能会导致一些问题，所以需要在实际开发中进行权衡和合理使用。

在 React 中，错误边界是一种能够捕获并处理渲染错误的机制。当渲染期间发生错误时，React 会中止渲染并显示错误信息，以防止错误的影响传播到整个应用程序。使用错误边界有助于提高应用程序的可靠性和稳定性。在处理大型复杂应用程序时尤为重要，因为单个组件的错误可能会导致整个应用程序的崩溃。组件抛出错误，错误边界组件会捕获错误并显示一条友好的错误信息。这样可以防止错误影响到整个应用程序的渲染。渲染时的错误，因此如下场景中错误是无法捕获的。错误边界组件主要是用来捕获。总之，错误边界组件仅能过处理。

Portals 被翻译成传送门，是 React 库中的一个特性，它允许开发者将子组件渲染到父组件 DOM 层次结构之外的其他地方。React 组件通常是在其父组件的 DOM 层次结构中渲染的，这意味着它们的输出会被插入到父组件的某个 DOM 元素中。然而，有时候我们希望将某个组件的输出渲染到 DOM 层次结构中的其他位置，而不是其父组件中。例如，我们可能希望将某个弹出窗口组件渲染到整个应用程序的根节点之外。或 等等）、Fragment（…）、字符串或数字，以及这些内容构成的数组。

在ReactHOCReact Render Props是React中一种常见的组件复用模式，用于将组件的渲染逻辑与组件的状态逻辑分离开来。Render Props模式允许一个组件通过在props中传递一个函数来控制另一个组件的渲染。实际上，而是指一种在React组件之间prop的简单技术。

React 的 useContext 提供了一种在组件之间共享数据的简便方式，避免了传递 props 的繁琐和冗余。

React的Context是一种向下传递数据的机制，用于解决在组件树中共享数据的问题。Context可以被视为一个全局的状态容器，可以在组件树的任何地方访问和更新共享的数据，而不需要通过逐层传递props。例如我们单页应用中的组件会形成一个像组件树一样结构，当内部组件和组件之间要进行数据传递时，就免不了一层一层先传递到共同的父组件，然后再一层一层传递下去。假设subComA-1组件的状态数据要传递给subComB-2组件，应该怎么做？根据我们前面所讲的单项数据流的规则，那么数据应该被提升到。

可以让父组件可以通过 ref 来获取子组件的属性和方法，使得父子组件之间的通信更加方便。使用，主要用于在父组件中可以使用 ref 获取子组件暴露出来的属性和方法。接受两个参数：ref 和创建子组件属性和方法的函数。暴露出来的属性和方法。在这个例子中，我们可以通过。将子组件的属性和方法暴露给父组件。是一个自定义 Hook。来获取子组件的属性，通过。在上面的例子中，父组件。来调用子组件的方法。

React中的useRef是一个Hook函数，它可以用来在函数组件中创建一个可变的引用。总的来说，useRef是一个非常方便的Hook函数，可以用来在函数组件中持久化存储可变值，以及获取和操作DOM元素的引用。useRef可以用来保存任意可变值，而不仅仅是DOM元素的引用。在函数组件中创建一个ref，只需要调用useRef并传入一个初始值即可。在上面的例子中，我们使用了一个ref来存储一个计数器的值，并在每次点击按钮时增加计数器。属性可以存储任意值，并且在函数组件的多次渲染之间保持不变。

要实现 ref 转发，你需要在子组件中使用 React.forwardRef() 方法来创建一个新的组件，该方法接收一个回调函数作为参数。在这个回调函数中，你可以将传递给子组件的 ref 转发到子组件内部的某个 DOM 元素或子组件上。然而，在某些情况下，你可能需要将 ref 传递给组件中的子组件，或者将 ref 传递到具有特定方法的 DOM 元素上。总结来说，React ref 转发是一种将 ref 从一个组件传递到另一个组件的技术，通过它可以在父组件中直接访问子组件的 DOM 元素或实例。

React ref 是 React 中一个用于访问组件中 DOM 元素或者类实例的方式。它允许我们直接操作 DOM，而不需要通过 state 或 props 来更新组件。

React 高阶组件是一种用于复用组件逻辑的技术，它可以将组件的逻辑与视图分离，使得代码更加清晰和可维护。通过将组件作为参数传递给高阶组件，并返回一个新的组件，可以实现组件的复用和定制。高阶组件是React开发中常见的一种技术，可以帮助开发者实现一些常见的功能，提高开发效率。

在Vue中，我们可以针对props属性进行类型验证，那么在React中同样也能对props进行验证。。从开始，已移入另一个包中。因此首先我们需要安装prop-types库。

Umi 是由蚂蚁集团推出的可扩展的企业级前端应用框架。Umi 以路由为基础，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。然后配以生命周期完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求。UmiJS 是一个强大且灵活的企业级前端应用框架，基于 React 和插件化的思想构建。它提供了丰富的功能和插件生态系统，使得开发者能够高效地构建出稳定、可扩展的 Web 应用。

数据的改变发生通常是通过用户交互行为或者浏览器行为（如路由跳转等）触发的，当此类行为会改变数据的时候可以通过 dispatch 发起一个 action，如果是同步行为会直接通过 Reducers 改变 State。是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架。如果是异步行为（副作用）会先触发 Effects 然后流向 Reducers 最终改变 State。

Ant Design Pro 是基于 Ant Design 和 umi 的封装的一整套企业级中后台前端/设计解决方案，提供了一套丰富的UI组件和一些预设的布局模板，旨在帮助开发者快速搭建高质量的企业级应用程序。预设的布局模板：Antd Pro提供了多种预设的布局模板，包括经典的左侧菜单布局、顶部菜单布局和顶部导航布局等，开发者可以根据项目需求选择合适的布局模板，快速搭建页面结构。高度可定制化：Antd Pro 提供了丰富的配置选项和可扩展的插件机制，使得开发者可以根据自己的需求定制和扩展项目的功能和样式。

Redux是一个独立的第三方库，之后React官方在Redux的基础上推出了最新版的，已经全面拥抱了Hooks，内置了诸如：useStore一类的Hook，我们只要掌握这一类Hook，就可以轻松上手。另外，Redux官方还推出了，来简化整个Redux的使用。因此现在在React应用中，状态管理库的使用一般都是ToDoList安装使用 @reduxjs/toolkit configureStore 方法 创建 store 仓库reducer: {})

URL参数处理：在单页面应用中，通常需要从URL中获取参数，例如页面的过滤条件、排序方式等。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效。当用户点击网页中的链接时，浏览器不会刷新整个页面，而是通过 JavaScript 监听 URL 的变化，并根据新的 URL 加载对应的页面内容。在单页面应用中，页面只加载一次，所有的操作都是在页面上动态加载内容并改变 URL。后端路由主要用于处理URL的请求，将不同的URL请求映射到不同的逻辑处理函数上。

Hook是React 16.8的新增特性。它可以让你在不编写class的情况下使用state以及其他的React特性。Hooks告别令人疑惑的生命周期例如下面的例子，相同的代码在不同的生命周期中存在了两份// 类组件super();count : 0document.title = `你点击了${this.state.count}次`;document.title = `你点击了${this.state.count}次`;

生命周期是一个物体、生物或概念从诞生、成长、衰老到死亡的过程。React在组件的生命周期中提供了一系列的钩子函数（类似于事件），可以让开发者在函数中注入代码，这些代码会在适当的时候运行。生命周期钩子函数是属于类组件所独有的东西，但是从React 16.8推出Hooks以来，整体已经开始以函数组件为主，因此这里我们仅介绍一些常用的生命周期钩子函数。

的模式，将视图和视图模型进行绑定，视图模型的改变，会自然的带来视图的改变。开发人员需要专注在视图模型上面。因此，这里所谓的受控组件，本质上其实就是将表单中的控件和视图模型（状态）进行绑定，之后都是针对状态进行操作。中推荐使用受控组件来对表单进行操作，这样能够对表单控件的数据进行一个统一管理。，最重要的是要转换思想，这一步非常重要，往往也比较困难。节点，然后进行操作。而在现代前端开发中，采用的是。方案进行处理，此时替代的方案就是非受控组件。但是在某些特殊情况下，需要使用以前传统的。时代，开发人员需要获取到。

每次点击按钮，虽然我们设置了四次 count， 但是count只加了 1。在改变 count 值的时候，count 数据还没有改变，所以只加了1。中，如果子组件需要向父组件传递数据，同样是通过触发父组件传递给子组件的事件来进行传递。早期类组件被称之为有状态组件，就是因为在类组件中能够维护组件数据。中组件会存在层级关系，那么自然会涉及到组件之间进行数据的传递。执行后的数据，可以提前使用一个变量来存储计算结果，或者使用。的第二个参数，它是一个函数，这个函数会在。元素的事件中，则其是异步的，否则是同步。

React。

JSX是一种JavaScript的扩展语法，用于在React中编写组件的结构。JSX允许开发者将HTML结构和JavaScript代码混合在一起，使得编写React组件更加直观和简洁。通过使用JSX，开发者可以在JavaScript中直接编写类似HTML的标记，例如<div>、<p>等，同时可以将JavaScript表达式嵌入到标记中，使得动态的数据渲染变得更加方便。在React中，JSX被转换为React元素，然后由React进行渲染和更新。

React起源于Facebook的内部项目，因为该公司对市场上所有框架都不满意，就决定自己写一套，用来架设Instagram的网站。React的实质其实是一个用于构建用户界面的JavaScript库。React主要用于构建UI。React于2013年5月开源，由于拥有较高的性能，代码逻辑简单，越来越多的人已开始关注和使用它。UIfn(state)由于React的设计思想极其独特，属于革命性创新，性能出众，所以，越来越多的人开始关注和使用，认为它可能是将来。