react中概念性总结（一）

目录

React中组件性能优化的方案有哪些？

说说你是如何提高组件的渲染效率，如何避免不必要的render?

说说React中Jsx的原理？

说说真实DOM和虚拟DOM之间区别？有什么优缺点？

说说React中事件机制？

合成事件的原理？

说说你对React中 setState的执行机制？

说说setState的运行原理是什么？

State和props有什么区别？

React中key的有什么作用？

说说你对Fiber架构的理解？

说说Vue和React之间的区别是什么？

说说你对React中Redux的理解是什么，用过React-Redux吗？

说说React中JSX转换成真实DOM的过程

---

React中组件性能优化的方案有哪些？

在 React 中，可以采取以下一些方案来优化组件的性能：

1. 使用 shouldComponentUpdate 或 PureComponent：通过实现 shouldComponentUpdate 生命周期函数或使用 PureComponent 类型的组件，可以避免不必要的重新渲染。这些方法可以在组件更新前进行判断，决定是否需要重新渲染组件。

2. 列表组件使用 keys：在渲染具有多个子元素的列表时，为列表项添加唯一的 keys 属性，以帮助 React 更高效地进行元素的更新和重排。使用稳定的 ID 或唯一的标识符作为 key，而不是使用数组索引。

3. 使用适当的数据结构：根据数据的读写特性和更新频率，选择合适的数据结构来存储和管理数据。例如，如果需要频繁地根据索引更新数组中的元素，可以考虑使用 Map 或对象来存储数据，而不是数组。

4. 使用组件性能分析工具：React 提供了一些性能分析工具，如 React DevTools 和 Performance 工具，可以帮助定位性能瓶颈并进行优化。使用这些工具可以检查组件的重复渲染次数、更新所需时间等指标。

5. 避免在渲染函数中进行昂贵的操作：在渲染函数中避免执行耗时的操作，如大量的计算、网络请求等。可以将这些操作移到组件的生命周期方法或异步操作中。

6. 使用 memo 或 useMemo：React 的 memo 函数可以用来包裹组件，以缓存组件的渲染结果，避免不必要的重新渲染。useMemo 钩子函数可以用来缓存计算结果，只有依赖项发生变化时才重新计算。

7. 拆分大型组件：将大型的复杂组件拆分成更小粒度的子组件，每个子组件只关注自己的部分数据和逻辑。这样可以提高组件的可维护性和重用性，并减少不必要的渲染。

说说你是如何提高组件的渲染效率，如何避免不必要的render?

要提高组件的渲染效率并避免不必要的渲染，可以采取以下几个方法：

1. 使用PureComponent或memo：使用PureComponent（对于类组件）或memo（对于函数组件）可以避免在属性没有变化时触发不必要的重新渲染。它们会对组件的属性进行浅比较，只有当属性发生改变时才会重新渲染组件。

2. 使用shouldComponentUpdate或useMemo：对于类组件，可以手动实现shouldComponentUpdate生命周期方法，在该方法中比较属性的值，手动决定是否进行重新渲染。对于函数组件，可以使用useMemo来缓存计算结果，避免重复计算。

3. 使用key属性：在渲染列表时，为每个列表项指定唯一的key属性。这样在列表项的顺序发生改变时，React可以根据key来判断哪些列表项需要进行重新渲染，从而提高渲染效率。

4. 避免在render方法中执行昂贵的操作：render方法应该保持简洁，不要做耗时的操作或复杂的计算。可以将这些操作移到组件的生命周期方法中执行，或者使用useEffect（对于函数组件）在渲染后执行。

5. 使用React.memo包裹高阶组件：如果使用高阶组件包裹组件，可以使用React.memo对高阶组件进行包裹，以避免重复渲染。

6. 使用虚拟化技术：对于大型列表或表格等组件，可以使用虚拟化技术（如react-window、react-virtualized）来只渲染可见区域的内容，以减少不必要的渲染和提高性能。

7. 使用Immutable数据：使用Immutable数据结构（如immutable.js、immer.js）可以减少引用变更，从而减少不必要的渲染。

8. 使用函数式组件：函数式组件相较于类组件，渲染速度更快，因为它们没有实例化和维护实例的开销。所以在性能要求较高的场景中，尽量使用函数式组件。

以上是一些常用的方法来提高组件的渲染效率和避免不必要的渲染。根据具体的应用场景，可以选择适合的方法来优化组件的性能。

说说React中Jsx的原理？

JSX 是 React 中用于声明组件结构的一种语法扩展，它类似于 XML 或 HTML。在 React 中，可以使用 JSX 编写组件的结构和交互，并通过编译工具将 JSX 转换为纯 JavaScript 代码。

JSX 的原理可以归结为以下几个关键点：

1. 语法解析和转换：React 使用 Babel 或其他类似工具对 JSX 进行语法解析，将 JSX 代码转换为纯 JavaScript 代码。在解析时，JSX 被转换为 React.createElement() 函数的调用，这个函数接受组件类型、props 对象和子元素作为参数，并返回一个描述组件节点的对象。

2. React.createElement() 函数：React.createElement() 函数是 JSX 转换后的结果。它接受三个参数：组件类型（可以是函数组件、类组件或内置 HTML 组件），props 对象（包含组件传递来的属性）和子元素（可选的组件子元素）。这个函数返回一个 JavaScript 对象，用于描述组件的结构和属性。

3. 组件的渲染：React 通过组件描述对象将组件的结构和属性传递给渲染引擎。渲染引擎将根据组件描述对象创建虚拟 DOM 对象，然后比较虚拟 DOM 和真实 DOM 的差异，并更新只有需要改变的部分。

4. JSX 与 JavaScript 的交互：JSX 可以直接在 JavaScript 代码中使用，并与 JavaScript 代码进行交互。可以在 JSX 中使用花括号 {} 来引用 JavaScript 变量、执行 JavaScript 表达式和调用 JavaScript 函数。

总结起来，JSX 的原理是通过解析和转换 JSX 代码为 React.createElement() 函数的调用，生成描述组件的结构和属性的 JavaScript 对象。这个对象通过渲染引擎创建虚拟 DOM 对象，并与真实 DOM 进行比较和更新。这种方式简化了组件的编写和维护，并提升了代码的可读性和可重用性。

说说真实DOM和虚拟DOM之间区别？有什么优缺点？

真实DOM和虚拟DOM是前端开发中两种不同的操作和渲染方式。

1. 区别： 真实DOM是浏览器中实际存在的DOM树结构，它由浏览器直接管理和维护。当页面中的内容发生变化时，浏览器会重新渲染整个DOM树。

虚拟DOM是一个轻量级的JavaScript对象表示的DOM结构，它是在内存中构建并维护的。当页面的状态发生变化时，虚拟DOM会被更新，然后通过比较前后两个虚拟DOM的差异，只更新需要变化的部分，最后才会将这些变化更新到真实DOM中。

1. 优点： 真实DOM：

• 动态变化时，可以实时响应并且自动更新。

• 直接操作真实DOM可以更精确地控制页面的渲染和交互。

• 对于简单的应用，操作真实DOM可能更加直观和方便。

虚拟DOM：

• 提高性能，通过批量更新和差异更新，减少了对真实DOM的直接操作，合并了多次改变，减少了浏览器的重绘和重排。

• 跨平台，虚拟DOM可以被用于不同平台上，如浏览器、桌面和移动端等。

• 开发者友好，通过虚拟DOM的抽象层，可以更方便地进行组件化开发，提高代码可维护性。

1. 缺点： 真实DOM：

• 操作真实DOM可能引起页面的重绘和重排，性能较差。

• 动态变化时，频繁的DOM操作会导致性能问题。

虚拟DOM：

• 引入了额外的开销，需要进行虚拟DOM和真实DOM之间的转换、比较和更新操作。

• 对于简单的应用，使用虚拟DOM可能相对复杂，增加了开发的复杂性。

总的来说，真实DOM和虚拟DOM各有优势和劣势，选择使用哪种取决于具体的应用场景和性能需求。对于复杂的应用或追求高性能的场景，可以考虑使用虚拟DOM来提高性能和开发效率。对于简单的应用，直接操作真实DOM可能更加直观和方便。

说说React中事件机制？

在 React 中，事件机制是用于处理用户交互和响应的重要部分。React 通过将事件处理函数绑定到组件的特定元素上，实现了事件的触发和处理。

React 的事件机制主要包括以下几个方面：

1. 事件绑定：在 React 中，可以通过使用 JSX 的语法，在组件元素上使用事件属性（如 onClick、onChange）来指定事件的处理函数。将事件处理函数绑定到组件元素上，使得组件可以监听特定的事件。

2. 事件处理函数：React 的事件处理函数通常是在组件中定义的普通 JavaScript 函数。它们通常接收一个事件对象作为参数，并在函数体中处理事件。事件处理函数可以根据需要修改组件的状态（state）或触发其他操作。

3. 事件传递：在 React 中，事件在组件层次结构中按照冒泡（bubbling）的方式传递。当某个子组件触发了一个事件时，该事件会冒泡至上层的父组件，父组件可以通过监听相应的事件来进行处理。通过事件传递，可以实现在组件层次结构中的多个组件中共享事件的处理逻辑。

4. 阻止事件冒泡和默认行为：在 React 中，可以通过调用事件对象的 stopPropagation() 方法来阻止事件冒泡，即不再继续向上传递。同时，通过调用事件对象的 preventDefault() 方法可以阻止事件的默认行为，如禁止表单的提交或超链接的跳转。

React的事件机制与原生的DOM事件机制类似，但有一些区别。React 采用了合成事件（SyntheticEvent）的概念，它是对底层浏览器原生事件的封装，提供了跨浏览器的一致性和性能优化。另外，React 事件处理函数中的 this 默认绑定到组件实例上，不需要手动绑定或使用箭头函数来绑定上下文。

合成事件的原理？

在React中，事件处理机制是通过合成事件（Synthetic Event）来处理的。React为了兼容不同浏览器和提供更好的性能，采用了合成事件的方式，即在组件的顶层统一处理实际的浏览器事件。

合成事件的原理如下：

1. React在组件的顶层（在document上）注册了事件监听器，用于捕获和处理浏览器事件。

2. 当某个组件内部触发事件时，会生成一个合成事件对象，并通过事件委派机制将合成事件传递给组件的最顶层（在document上）。

3. 在组件的最顶层，React根据组件层级关系，通过事件冒泡的方式将合成事件传递给真正触发事件的组件。

4. 在真正触发事件的组件中，React会根据事件的类型，去调用组件中相应的事件处理方法。

合成事件具有以下优势：

1. 跨浏览器兼容性：React封装了底层的浏览器事件系统，使得开发者无需关心浏览器兼容性问题。

2. 性能优化：React采用了事件委派机制，将事件处理推迟到组件的最顶层进行处理，避免了每个组件都注册和处理事件的开销。

3. 合并事件处理：React会将一系列连续的相同类型的事件（如多次点击事件）合并成一个，以提高性能和减少不必要的渲染。

需要注意的是，由于React使用了合成事件，事件对象是React自己构建的，而不是浏览器原生的事件对象。因此，在事件处理方法中访问事件对象的属性可能会有一些差异。

说说你对React中 setState的执行机制？

在React中，setState是管理组件状态的关键方法之一。setState用于修改组件状态，以触发组件的重新渲染。根据执行机制的不同，setState可以分为同步和异步两种：

1. 同步的setState执行机制：

• 在React的事件处理函数、钩子函数和setTimeout/setInterval等回调函数中的setState方法，都会同步更新组件状态和重新渲染组件。

• 当有多个setState调用时，React会将这些调用合并为一次更新，然后再执行一次渲染。这种情况下，React不会立即更新所有状态，因为它需要等待所有setState调用完成才能进行下一步操作。

1. 异步的setState执行机制：

• 在React的合成事件（SyntheticEvent）和原生DOM事件处理函数中的setState方法，执行是异步的。

• 当有多个setState调用时，React可能会将这些调用放在一个队列中，然后批量进行更新和渲染，以提高性能。

在异步的情况下，setState修改状态并不立即生效，而是会放入一个队列中，在下一次React更新周期时，React会批量更新状态并重新渲染组件。setState的异步执行机制，在多次状态更新情况下，减少了组件的重复渲染。

需要注意的是，由于setState是可异步执行的，因此如果需要基于上一个状态进行修改，最好使用这种形式的调用：

this.setState(prevState => ({ count: prevState.count + 1 }));

这样，setState将根据前一个状态(prevState)计算新状态，并避免对前一个状态直接进行修改或依赖。

说说setState的运行原理是什么？

setState 是 React 组件中用来更新组件状态的方法。它的运行原理可以总结为以下几个步骤：

1. 合并更新对象：当调用 setState 时，React 会将传入的更新对象与当前状态对象进行合并，形成一个新的状态对象。

2. 触发事务处理：React 会将合并后的状态对象放入队列中，并在合适的时机触发事务处理。

3. 执行批处理：React 会批量处理状态更新，将队列中的所有状态更新合并成一个新的状态对象。

4. 基于新状态进行更新：React 会基于新的状态对象，计算出需要更新的 DOM，并将其应用到页面上。

这种处理方式是为了优化性能和减少 DOM 更新次数。React 会根据需要进行批量处理和合并状态更新，以减少重复计算和 DOM 操作，从而提高应用性能。

需要注意的是，由于 setState 是异步操作，因此不能立即获得更新后的状态值。如果需要在 setState 之后获取最新的状态值，需要使用 setState 的回调函数或在生命周期方法中访问。

此外，React 还提供了一种基于当前状态计算下一个状态的方式，即使用函数作为 setState 的参数。这样可以避免因为异步操作而导致的状态更新不及时的问题。

总的来说，setState 的运行原理是通过合并、批处理和优化操作来实现状态更新和 DOM 更新的过程，以提高应用的性能和可靠性。

State和props有什么区别？

在React中，State和props都是组件的数据来源，可以用于控制UI的状态和行为。二者的主要区别如下：

1. 定义和作用：

• props（properties）是由组件的父级传递给组件的可读属性（read-only）, 用于控制React组件的外部环境和上下文。即，父组件可以通过props传递数据到子组件中，让子组件进行展示或处理。

• state（状态）是由组件自身管理和维护的状态数据，通常用于控制组件的外观和行为，以响应组件的交互。

1. 修改方式：

• props是只读的，即父组件不能直接修改子组件中的props，只能通过重新渲染传递新的props来改变子组件的状态或行为。

• state是一种可变的状态，可以通过setState()方法来修改和更新。setState()方法本质上是一个异步函数，通常用于更新组件的状态并触发重新渲染。

1. 作用域：

• props可以流动到子组件甚至孙子组件中，但是它不能流向兄弟组件或组件外部。

• state只存在于组件本身内部，不能传递到其他组件中。对于需要在多个组件中共享或操作的状态，应该将其提升到它们共同的祖先组件中，或者使用一种全局状态管理工具，如Redux或MobX。

需要注意的是，props和state都是React组件的基础构建模块，同时也都应该优化和避免不必要的渲染，以提升组件性能和用户体验。通常，props应该尽量保持简单和纯净，在需要时才传递必要的数据；而state应该尽量减少和隔离其作用域和依赖关系，避免多个组件共享和依赖同一个状态。

React中key的有什么作用？

在React中，key是用于帮助React识别子元素的特殊属性。它主要用于对数组或迭代的子元素进行唯一标识，以便React能够更高效地更新和渲染这些元素。

key属性在以下几个方面起到了重要的作用：

1. 帮助React识别组件：

• 在简单的场景下，key可以帮助React准确地找到需要更新的组件，避免不必要的重新渲染。当子元素重新排序或添加/移除时，React使用key来与之前的元素进行匹配，从而确定是否进行更新。

1. 提升性能：

• 在使用列表渲染时，使用唯一的key可以帮助React更高效地更新和重用相同类型的元素。在没有key时，React会将所有子元素都重新渲染，而使用了key后，React可以通过比较key来判断哪些元素需要进行更新。

1. 保持组件的状态：

• 在某些场景下，组件可能会拥有内部状态。当子元素重新排序或添加/移除时，如果没有key，React会销毁旧的组件实例并创建新的实例。而使用key，React可以保持组件的状态，并复用现有的组件实例，从而避免重新创建和销毁，提升性能和用户体验。

需要注意的是，key属性应该是唯一且稳定的，不应该是随机数或索引，最好使用唯一的标识符，如数据库中的id或其他不会重复的值。同时，key属性只在组件的兄弟元素之间需要唯一，组件本身不需要唯一的key。

说说你对Fiber架构的理解？

Fiber架构是React在版本16中引入的一种新的协调机制。它的设计目标是实现更好的渲染性能和用户体验，以解决React在大型应用中可能出现的页面卡顿和不流畅的问题。

传统的React渲染采用的是基于递归的调和算法，即在每次更新时将整个组件树进行递归遍历和比较，然后更新所有需要更新的DOM元素。这种更新方式在组件层级较深、组件数量较多或者更新频率较高时，会导致一次更新的时间过长，造成页面卡顿和用户感知的延迟。

Fiber架构通过引入Fiber数据结构和任务调度算法来改善这个问题。Fiber数据结构是一种轻量级的、可被中断和恢复的数据结构，用于表示组件树的工作单元。通过将组件的工作划分为多个优先级较低的任务，Fiber架构可以在渲染过程中根据优先级动态调整任务执行的顺序，从而使得页面的渲染可以被更细粒度地控制。

在Fiber架构下，React引入了调度器和调度优先级的概念。调度器负责任务的调度和执行，而调度优先级用于确定任务的执行顺序。通过调度器和调度优先级的配合，React可以将任务划分为不同的优先级，高优先级的任务可以打断低优先级的任务，从而更灵活地响应用户操作和保证页面的流畅。

Fiber架构还提供了时间切片(Time Slicing)的机制，使得渲染任务可以分段执行，每次执行一个时间片段，然后将控制权交还给浏览器，让浏览器有足够的时间去处理事件和渲染其他的内容。这样可以避免长时间阻塞主线程，提高应用的响应性能。

总的来说，Fiber架构通过引入Fiber数据结构、任务调度和时间切片等机制，实现了对渲染过程的更细粒度控制，从而提升了React应用的渲染性能和用户体验。它是React在性能优化方面的重要改进，使得React可以更好地处理大型应用和复杂组件树的更新。

说说Vue和React之间的区别是什么？

React 和 Vue 是两个流行的前端框架，它们都有相似的目标，即帮助开发者构建交互式的单页面应用。以下是 React 和 Vue 的一些主要区别：

1. 原理和架构：React 是基于虚拟 DOM（Virtual DOM）实现的，通过比较虚拟 DOM 的差异来进行高效的 DOM 更新。Vue 也使用了虚拟 DOM，但同时也引入了响应式数据绑定的概念，通过追踪数据的变化来自动更新 DOM。

2. 语法和模板：React 使用 JSX（一种类似 HTML 的语法）来描述组件的结构和交互，JSX 将组件的结构和 JavaScript 代码紧密结合在一起。Vue 使用基于 HTML 的模板语法，将组件的结构和交互以声明式的方式描述。这使得 Vue 的模板相对更易于理解和编写，尤其适合于小型项目或需要设计师参与的项目。

3. 生态系统和学习曲线：React 有一个庞大的生态系统，配套了许多第三方库和工具，例如 React Router 和 Redux。React 的学习曲线相对较陡峭，因为它倾向于给予开发者更多的自由度。Vue 也有一定的生态系统，但规模相对较小，但它的学习曲线相对较平缓，对于初学者来说更容易上手。

4. 社区支持和工具链：React 拥有庞大的社区，相应的文档、教程和资源丰富。React 社区提供了强大的工具链，使得开发体验更加高效。Vue 社区也很活跃，但相对来说规模较小。

5. 组件化：React 和 Vue 都采用组件化的开发方式，但在组件开发的方式上有所区别。React 鼓励使用函数或类定义无状态（stateless）组件和有状态（stateful）组件，组件之间的通信通过 props 和状态管理库（如 Redux）来实现。Vue 则使用更直接的 API，通过模板语法和选项对象来描述组件，组件之间的通信主要依赖于 Vue 提供的响应式数据绑定机制。

需要注意的是，React 和 Vue 在某些方面有着相似的功能和核心思想，但实际使用中还是有一些差异。选择使用 React 还是 Vue 取决于个人或团队的偏好、项目需求以及已有的技术栈等因素。每个框架都有其优势和劣势，根据实际情况选择合适的框架是最重要的。

 

说说你对React中Redux的理解是什么，用过React-Redux吗？

在React中，Redux是一种用于管理应用程序状态的第三方库。它通过提供一个可预测的状态容器，实现了状态的集中管理和可预测的状态变化。Redux的核心概念包括：

1. Store（存储）：Redux应用程序的状态存储在一个单一的对象中，被称为Store。Store是只读的，唯一改变状态的方式是派发一个Action。

2. Action（动作）：Action是一个描述状态变化的普通JavaScript对象，它必须包含一个type属性来指示执行的动作类型。Action作为触发状态变化的唯一途径，可以把它看作是将要执行的指令。

3. Reducer（归纳器）：Reducer是一个纯函数，接收当前的状态和一个Action作为参数，并返回一个新的状态。Reducer根据Action的类型来决定如何执行状态的更新，并返回一个新的状态对象。

4. Middleware（中间件）：Middleware是Redux中的扩展机制，它可以在Action派发到Reducer之前进行一些额外的处理。例如，可以使用中间件来处理异步操作、日志记录或者对特定类型的Action进行特殊处理等。

React-Redux是结合React和Redux的官方绑定库，它简化了使用Redux的过程，提供了一些用于在React组件中连接Redux Store的API。React-Redux主要包括组件和connect()函数。

通过使用组件，可以将Redux的Store作为React应用的上下文提供，使得所有的组件都能够方便地访问到Redux的状态。而connect()函数可以在组件中使用，用于将组件连接到Redux Store，并提供将状态和动作作为属性传递给组件的能力。

React-Redux进一步促进了React和Redux的集成，简化了Redux状态管理在React应用中的使用，提供了更便捷、可预测的状态管理方式。

说说React中JSX转换成真实DOM的过程

在React中，将JSX（JavaScript XML）转换为真实DOM的过程主要包括以下几个步骤：

1. 解析JSX：React会使用内置的转换器将JSX代码转换为React元素。

2. 创建React元素：通过解析JSX，将其转换为一个包含了描述组件、元素类型、属性和子元素的普通JavaScript对象，称为React元素。

3. 创建虚拟DOM：React元素本质上是一种描述界面结构的数据结构，为了方便对界面进行操作和优化，React会将React元素转换为虚拟DOM对象。虚拟DOM是一个轻量级的、与真实DOM结构相似的JavaScript对象树。虚拟DOM具备与真实DOM对应节点的类型、属性和子节点等信息。

4. Diff算法比对：在进行组件或元素更新时，React会将新的虚拟DOM与之前的虚拟DOM进行对比，使用Diff算法对变化的部分进行精确计算以最小化对真实DOM的操作。

5. 更新真实DOM：通过Diff算法的比对结果，React确定需要进行更新的部分，并将这些变化应用到真实DOM中。React会根据需要插入、删除、替换或更新真实DOM的元素和属性。

需要注意的是，React并不实时地将虚拟DOM转换为真实DOM。在Diff算法比对完成后，React会根据需要将变化应用到真实DOM中，这一阶段通常会批量处理多个操作，以减少DOM操作的次数，提高性能。

总结起来，JSX转换为真实DOM的过程包括解析JSX、创建React元素、创建虚拟DOM、Diff算法比对和更新真实DOM等步骤，借助这些步骤，React能够高效地管理和渲染界面。