面试官：react用三年多了？ 来看看下面的知识点你是如何理解的...
先有问题再有答案
react是什么react设计理念是什么有哪些核心概念如何系统性的认识react
一图胜千言
设计理念
数据驱动视图UI=fn(data)： 在 React 中，UI 完全由数据的状态（state）驱动。当数据变化时，UI 会相应地重新渲染，这个概念体现了声明式编程的特点，在 React 的整个设计理念中贯穿始终
一切皆为js：React 中利用 JavaScript 来集成 UI 的元素、事件处理和状态管理的能力。JavaScript 在 React 中用于描述组件的结构、样式、和逻辑，即所谓的 "JSX" 和 "CSS-in-JS" 等概念。
函数式编程：React 受到了函数式编程的强烈影响，并倡导无副作用函数、使用不变性（immutability）、以及函数作为一等公民等思想。例如，React 组件可以是纯函数，而且 React Hooks 鼓励使用函数而非类来构建组件。
UI/渲染
调度器 (Scheduler)
React Scheduler负责优先级调度，决定了什么时候执行什么工作。在React 16的Concurrent Mode中，这种调度特性允许React中断和恢复工作，这正是Fiber架构所带来的能力之一。这样的调度策略有助于提高应用的响应性和性能，特别是在复杂更新和大型应用中。
协调器 (Reconciler)
协调器负责对比新旧虚拟DOM树（即Diff过程），确定实际DOM需要进行哪些更新。自React Fiber架构出现，协调过程可以更有效地处理，支持任务分割和优先级分配，在必要时可以中断和恢复更新任务。
渲染器 (renderer)
Renderer根据Reconciler为虚拟 DOM 打的标记，同步执行对应的 DOM 操作。
JSX
JSX是一种看起来很像XML的JavaScript扩展语法。它允许在JavaScript代码中直接编写HTML，让开发者更直观地描述UI结构。
组件（Components）
组件是React应用的核心单元，它们是构建React应用的基本构建块。React组件允许将UI拆分成独立、可复用的部分，并单独思考每一部分。
高阶组件（Higher-Order Components）
高阶组件（HOC）是一种基于组件的复用逻辑的技术。一个高阶组件是一个函数，它接受一个组件并返回一个新的组件。
元素（Elements）
React元素是构成React应用视图的最小单元。它们是不可变对象，并用来描述组件的外观和行为。
生命周期（Lifecycle）
React类组件通过生命周期方法描述了一个组件在其被加载、更新和卸载过程中的行为。生命周期方法允许开发者在不同的阶段执行代码（例如，componentDidMount, componentDidUpdate等）。
Hook
React Hooks是React 16.8引进的功能，让你在不编写类（class）的情况下使用 state 以及其他React特性。例如，useState、useEffect等Hooks让函数组件能利用React的多种能力。
Refs(真实dom)
Refs提供了一种访问DOM节点或在渲染周期中创建的React元素的方式。
渲染函数（Render Function）
渲染函数是React组件中的一个核心函数，它定义了组件的结构和呈现方式。在类组件中，这通常是render()方法；在函数组件中，整个组件本身可以视为一个渲染函数。渲染函数的任务是返回一个描述所需UI的React元素树。
React.createElement
React.createElement是React API的一部分，用于创建和返回React元素（即虚拟DOM结构）。当你在JSX中写下像<div></div>这样的标签时，Babel转译器实际上将它转化为React.createElement函数调用。这个函数调用构建了一个对象，这个对象描述了应该如何构建真实的DOM结构。
虚拟DOM（Virtual DOM）
本质上是一个轻量级的JavaScript对象，是真实DOM的一个抽象表示。虚拟DOM使React能够在内存中预先计算出与实际DOM交互（更新）的最小操作集，从而减少对实际DOM的操作次数——这是昂贵的，因为DOM操作非常耗时，直接关联到浏览器的渲染引擎。
Vdom的优点可以从三个角度考虑：
- 效率：减少了开发者手动操作dom，磨平了浏览器的差异，通过数据驱动提升了开发效率。
- 性能：通过批量异步更新 降低了dom的修改频率和修改范围 提高了渲染性能。
- 跨平台：通过抽象dom层 可以脱离浏览器环境。例如react native的方式。
Diff 算法
React 在更新组件时使用 Diff 算法来比较新旧两棵虚拟DOM树，找出需要进行实际DOM更新的部分。这个过程称为 Reconciliation（协调）。React将此过程的复杂度从潜在的 O(n^3) 优化到 O(n)。
在渲染列表元素时，使用key可以帮助React识别哪些元素改变了、添加了或删除了。提供一个稳定的key值（每个条目唯一的ID比如）可以在动态更新时保持组件状态，并提高渲染效率。
Patch
在Diff过程之后，React生成了一个“补丁”列表（Patch list），用来高效地更新DOM。这些补丁描述了如何修改真实DOM来与最新的虚拟DOM树同步。
Fiber
Fiber 是 React 16 中引入的新的重构版本的核心算法，它允许React执行增量渲染，也就是将渲染工作分割成多个小任务并将这些任务分散到多个帧中执行。Fiber 的目标是增强React的适用性，使其更好地适用于动画、布局和手势等场景。每个React元素都有一个与之对应的Fiber节点，它记录了组件的类型、对应的DOM节点等信息。
Concurrent Mode
并发模式（Concurrent Mode）是一个实验性功能，允许React在渲染时将任务分成小块执行，可以中断和恢复这些任务，还可以为不同任务指定优先级。这有助于大型应用中的性能优化，使UI保持流畅。
Lanes
在React的Fiber架构中，Lanes是一种新的任务优先级和调度的系统，用来追踪组件或更新的优先级。通过使用不同的lanes（类似于“车道”），React能管理多个任务的调度，根据任务的紧急程度和相关性处理更新。这确保了高优先级的更新（如用户输入）可以迅速完成，而低优先级的更新（如offscreen数据的预加载）可以延后处理。
Commit 阶段
这是生命周期的一部分，在所有节点的Diffing计算之后，React实际更新DOM的阶段称为Commit阶段。这个阶段非常关键，因为它涉及到实际的DOM操作，是改变用户界面的直接阶段。
状态
单项数据流
数据总是在应用的组件树中按照一定的方向流动，这种方式简化了数据的跟踪和调试，增强了代码的稳定性和可维护性。
- 可预测性：由于数据总是按照相同的方式流动（从父到子），组件之间的数据流动很容易理解和预测。
- 易于调试：由于数据是单向流动的，当出现数据相关的问题时，可以沿着数据流动的路径逐层检查，这大大简化了调试过程。
- 清晰的数据结构：鼓励将状态提升至需要它的最近的共同父组件中，这有助于集中管理状态，避免了状态分散和重复。
Props
props是父组件向子组件传递数据的方式。props是只读的，组件不应修改接收到的props。
State
state提供了React组件的状态管理能力。当组件的state发生变化时，React会重新渲染该组件。
Context
Context提供了一种在组件树中共享数据的方式，而无需明确通过每个组件逐级传递props。
状态库
Redux/MobX，外部状态管理库，用于更复杂的状态管理需求，跨多个组件或整个应用共享状态。
事件
合成事件（Synthetic Event）
React将原生JS事件封装在合成事件（SyntheticEvent）中，提供了跨浏览器的一致性。开发者可以绑定事件处理函数来响应用户交互。
事件池（Event Pooling）
React使用了事件池来管理合成事件的对象。每当事件被触发并传递给事件处理程序时，React会从池中取出一个事件对象并将其传递给你的事件处理函数。一旦事件处理函数被调用完成，React会清除该事件对象的属性，并将其放回事件池中，这个事件对象之后可被重用于其他事件。
这种重用机制减少了频繁的垃圾回收操作和对象创建，从而优化了应用的性能。在繁忙的系统中，这种优化可以显著减少内存压力和提升响应速度。
事件委托
将事件监听器添加到一个共同的父元素上，而不是在每个子元素上单独添加监听器。当子元素上的事件被触发并冒泡到父元素时，可以通过事件对象的 target 属性确定是哪个子元素触发了该事件。
原生事件流（捕获 目标 冒泡）
事件委托与原生事件流的执行顺序可以看下 blog.csdn.net/zz130428/ar…
总结
自从 2013年发布以来，React 成为了前端开发中最流行的库之一，它的影响力遍及全球成千上万的项目和开发团队。React 的出现改变了开发者构建界面的方式，对现代前端框架和库的发展产生了深远的影响。
对于有三年以上使用 React 经验的前端开发者来说，深入理解并能够应用上述讨论的各个核心概念是非常重要的。尤其是现在的就业环境 如果你还不清楚上面的知识点是什么意思 可能是一个非常危险的信号。当然即使已经掌握了上面的全部内容也只是及格了而已......
转载自:https://juejin.cn/post/7363220286764646438