1： React是什么
React，用于构建用户界面的 JavaScript 库，提供了 UI 层面的解决方案，遵循组件设计模式、声明式编程范式和函数式编程概念，以使前端应用程序更高效，使用虚拟DOM来有效地操作DOM，遵循从高阶组件到低阶组件的单向数据流,帮助我们将界面成了各个独立的小块，每一个块就是组件，这些组件之间可以组合、嵌套，构成整体页面.
2： React的要点和优势
- JSX语法
- 单向数据绑定:(在 React 中，数据仅朝一个方向流动，即从父组件流向子组件。如果数据在兄弟子组件之间共享，那么数据应该存储在父组件，并同时传递给需要数据的两个子组件。)
- 虚拟DOM
- 声明式编程
- Component(组件化)
- 高效灵活
- 声明式的设计，简单使用
- 组件式开发，提高代码复用率
- 单向响应的数据流会比双向绑定的更安全，速度更快
3: Real DOM和Virtual DOM
Real DOM，为文档对象模型，是一个结构化文本的抽象，在页面渲染出的每一个结点都是一个真实DOM结构
- 更新缓慢
- 可以直接更新 HTML
- 如果元素更新，则创建新DOM
- DOM操作代价很高
- 消耗的内存较多
Virtual Dom，本质上是以 JavaScript 对象形式存在的对 DOM 的描述。创建虚拟DOM目的就是为了更好将虚拟的节点渲染到页面视图中，虚拟DOM对象的节点与真实DOM的属性一一照应
- 更新更快
- 无法直接更新 HTML
- 如果元素更新，则更新 JSX
- DOM 操作非常简单
- 很少的内存消耗
4： 什么是JSX和它的特性
JSX 是JavaScript XML的缩写，不是html或xml，基于ECMAScript的一种新特性，一种定义带属性树结构的语法；
特性：
- 自定义组件名首字母大写
- 嵌套；在render函数中return返回的只能包含一个顶层标签，否则也会报错。
- 求值表达式；JSX基本语法规则，遇到HTML标签（以<开头），就用HTML规则解析；遇到代码块（以{开头），就用JS规则解析
- 驼峰命名
- class属性需要写成className
- JSX允许直接在模板插入JS变量。如果这个变量是一个数组，则会展开这个数组的所有成员
- 在JSX中插入用户输入是安全的，默认情况下ReactDOM会在渲染前，转义JSX中的任意值，渲染前，所有的值都被转化为字符串形式，这能预防XSS攻击。
5：类组件和函数组件之间有什么区别
类组件：
- 无论是使用函数或是类来声明一个组件，它决不能修改它自己的 props。
- 所有 React 组件都必须是纯函数，并禁止修改其自身 props。
- React是单项数据流，父组件改变了属性，那么子组件视图会更新。
- 属性 props是外界传递过来的，状态 state是组件本身的，状态可以在组件中任意修改
- 组件的属性和状态改变都会更新视图。
函数组件：
- 函数组件接收一个单一的 props 对象并返回了一个React元素
- 函数组件的性能比类组件的性能要高，因为类组件使用的时候要实例化，而函数组件直接执行函数取返回结果即可。为了提高性能，尽量使用函数组件。
6: Virtual DOM 工作原理。
Virtual DOM 是一个轻量级 JavaScript 对象，它最初只是 real DOM 的副本。它是一个节点树，它将元素、它们的属性和内容作为对象及其属性。 React 的渲染函数从 React 组件中创建一个节点树。然后它响应数据模型中的变化来更新该树，该变化是由用户或系统完成的各种动作引起的。
Virtual DOM 工作过程有三个简单的步骤：
- 每当底层数据发生改变时，整个 UI 都将在 Virtual DOM 描述中重新渲染。
- 然后计算之前 DOM 表示与新表示的之间的差异。
- 完成计算后，将只用实际更改的内容更新 real DOM。
7: 说说对 State 和 Props的理解，有什么区别
State
- 一个组件的显示形态可以由数据状态和外部参数所决定，而数据状态就是state，一般在 constructor 中初始化
- 当需要修改里面的值的状态需要通过调用setState来改变，从而达到更新组件内部数据的作用，并且重新调用组件render方法
- setState还可以接受第二个参数，它是一个函数，会在setState调用完成并且组件开始重新渲染时被调用，可以用来监听渲染是否完成
Props
- React的核心思想就是组件化思想，页面会被切分成一些独立的、可复用的组件，组件从概念上看就是一个函数，可以接受一个参数作为输入值，这个参数就是props，所以可以把props理解为从外部传入组件内部的数据
- react具有单向数据流的特性，所以他的主要作用是从父组件向子组件中传递数据
- props除了可以传字符串，数字，还可以传递对象，数组甚至是回调函数
- 在子组件中，props在内部不可变的，如果想要改变它看，只能通过外部组件传入新的props来重新渲染子组件(componentWillReceiveProps?)，否则子组件的props和展示形式不会改变
相同点
- 两者都是 JavaScript 对象
- 两者都是用于保存信息
- props 和 state 都能触发渲染更新
区别
- props 是外部传递给组件的，而 state 是在组件内被组件自己管理的，一般在 constructor 中初始化
- props 在组件内部是不可修改的，但 state 在组件内部可以进行修改
- state 是多变的、可以修改
8: React refs 的理解,应用场景
React 中的 Refs提供了一种方式，允许我们访问: DOM节点或在 render方法中创建的 React元素。
本质为ReactDOM.render()返回的组件实例，如果是渲染组件则返回的是组件实例，如果渲染dom则返回的是具体的dom节点。
在某些情况下，我们会通过使用refs来更新组件，但这种方式并不推荐，过多使用refs，会使组件的实例或者是DOM结构暴露，违反组件封装的原则；
但下面的场景使用refs非常有用：
- 对Dom元素的焦点控制、内容选择、控制。
- 对Dom元素的内容设置及媒体播放。
- 对Dom元素的操作和对组件实例的操作。
- 集成第三方 DOM 库。
9：setState是同步还是异步？？？
10：React组件生命周期有几个阶段
初始渲染阶段：这是组件即将开始其生命之旅并进入 DOM 的阶段。
- getDefaultProps:获取实例的默认属性
- getInitialState:获取每个实例的初始化状态
- componentWillMount：组件即将被装载、渲染到页面上
- render:组件在这里生成虚拟的 DOM 节点
- componentDidMount:组件真正在被装载之后
更新阶段：一旦组件被添加到 DOM，它只有在 prop 或状态发生变化时才可能更新和重新渲染。这些只发生在这个阶段。
- componentWillReceiveProps:组件将要接收到属性的时候调用
- shouldComponentUpdate:组件接受到新属性或者新状态的时候（可以返回 false，接收数据后不更新，阻止 render 调用，后面的函数不会被继续执行了）
- componentWillUpdate:组件即将更新不能修改属性和状态
- render:组件重新描绘
- componentDidUpdate:组件已经更新
卸载阶段：这是组件生命周期的最后阶段，组件被销毁并从 DOM 中删除。
- componentWillUnmount:组件即将销毁
详细解释 React 组件的生命周期方法
- componentWillMount() – 在渲染之前执行，在客户端和服务器端都会执行。
- componentDidMount() – 仅在第一次渲染后在客户端执行。
- componentWillReceiveProps() – 当从父类接收到 props 并且在调用另一个渲染器之前调用。
- shouldComponentUpdate() – 根据特定条件返回 true 或 false。如果你希望更新组件，请返回true ，不想更新组件则返回 false就会阻止render渲染。默认情况下，它返回 true。
- componentWillUpdate() – 在 DOM 中进行渲染之前调用。
- componentDidUpdate() – 在渲染发生后立即调用。
- componentWillUnmount() – 从 DOM 卸载组件后调用。用于清理内存空间。
11: react在哪个生命周期做优化
shouldComponentUpdate，这个方法用来判断是否需要调用 render 方法重绘 dom。
因为 dom 的描绘非常消耗性能，如果我们能在这个方法中能够写出更优化的 dom diff 算法，可以极大的提高性能。
12: 受控组件和非受控组件的区别
受控组件是:React控制的组件,input等表单输入框值不存在于 DOM 中，而是以我们的组件状态存在。每当我们想要更新值时，我们就像以前一样调用setState。
不受控制组件:是您的表单数据由 DOM 处理，而不是React 组件，Refs 用于获取其当前值；
详情参考：【React】知识点归纳：受控组件与非受控组件区别_Dream_Lee的博客-CSDN博客
13： 为什么虚拟 dom 会提高性能
虚拟dom(virtual dom) 是 JS对象，是一个真实dom的JS对象；虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存，利用 dom diff 算法避免了没有必要的 dom 操作，从而提高性能。
用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异把 2 所记录的差异应用到步骤 1 所构建的真正的 DOM 树上，视图就更新了。
14：React中的key有什么作用
跟Vue一样，React 也存在diff算法，而元素key属性的作用是用于判断元素是新创建的还是被移动的元素，从而减少不必要的Diff，因此key的值需要为每一个元素赋予一个确定的标识。
- key 应该是唯一的
- key不要使用随机值（随机数在下一次 render 时，会重新生成一个数字）
- 避免使用 index 作为 key？？
15： react组件之间如何通信
- 父子：父传子：props； 子传父：子调用父组件中的函数并传参；
- 兄弟：利用redux实现和利用父组件
- 所有关系都通用的方法：利用PubSub.js订阅
16：React context是什么
简单说就是，当你不想在组件树中通过逐层传递props或者state的方式来传递数据时，可以使用Context来实现跨层级的组件数据传递
17: Redux的原理
redux将所有的状态进行集中管理，当需要更新状态的时候，仅需要对这个管理集中处理，而不用去关心状态是如何分发到每一个组件内部的，redux是一个实现集中管理的容器，遵循三大基本原则：单一数据源、state 是只读的、使用纯函数来执行修改；
注意的是，redux并不是只应用在react中，还与其他界面库一起使用，如Vue。
redux要求我们把数据都放在 store公共存储空间，一个组件改变了 store 里的数据内容，其他组件就能感知到 store的变化，再来取数据，从而间接的实现了这些数据传递的功能
18：Redux遵循的三个原则是什么
- 单一事实来源：整个应用的状态存储在单个 store 中的对象/状态树里。单一状态树可以更容易地跟踪随时间的变化，并调试或检查应用程序。
- 状态是只读的：改变状态的唯一方法是去触发一个动作。动作是描述变化的普通 JS 对象。就像 state 是数据的最小表示一样，该操作是对数据更改的最小表示
- 使用纯函数进行更改：为了指定状态树如何通过操作进行转换，你需要纯函数。纯函数是那些返回值仅取决于其参数值的函数。
版权声明：本文为CSDN博主「安静、认真听」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_44182284/article/details/116979015