React面试题

1.说说对React的理解？有哪些特性？

React是一个用于构建用户界面的JavaScript库。它被广泛应用于Web应用程序的开发，特别是单页面应用（SPA）。以下是对React的理解和一些主要特性的介绍：

组件化：React将用户界面划分为独立的组件，每个组件都有自己的状态（state）和属性（props）。组件可以嵌套和组合，使得界面的开发和维护更加模块化和可复用。
虚拟DOM：React使用虚拟DOM（Virtual DOM）来提高性能。它通过在内存中构建一个轻量级的DOM副本，然后与实际DOM进行比较，只更新需要变化的部分，从而减少了对实际DOM的操作次数，提高了渲染效率。
单向数据流：React采用了单向数据流的数据管理模式。数据从父组件通过props传递给子组件，子组件通过回调函数将数据的变化通知给父组件。这种数据流的设计使得应用程序的数据流动更加可控和可预测，降低了出现数据混乱和难以追踪的可能性。
JSX语法：React使用JSX语法，它是一种将HTML和JavaScript结合的语法扩展。JSX允许开发者在JavaScript代码中直接编写类似HTML的结构，使得界面的编写更加直观和易于理解。
生命周期方法：React组件具有一系列的生命周期方法，用于在组件的不同阶段执行特定的操作。例如，组件的挂载、更新和卸载等阶段都有相应的生命周期方法，开发者可以在这些方法中处理数据的初始化、网络请求、事件绑定等操作。
强大的社区支持：React拥有庞大而活跃的开发者社区，提供了丰富的第三方库和工具，以及大量的教程和文档资源。这使得学习和使用React变得更加容易，并且可以快速解决问题。

总的来说，React是一个高效、灵活且可扩展的前端开发库，它通过组件化、虚拟DOM和单向数据流等特性，使得开发者能够更加高效地构建交互性强、可维护性好的用户界面。

2、super（）和super（props）有什么区别？

在React中，super()和super(props)都是在子类的构造函数中调用父类的构造函数。

super()是在子类的构造函数中调用父类的构造函数，而不传递任何参数。这种情况下，父类的构造函数会被调用，但不会传递任何参数给父类的构造函数。这在子类不需要访问父类的props时使用。

示例代码如下：

class ChildComponent extends React.Component {
  constructor() {
    super(); // 调用父类的构造函数
    // 子类的其他初始化操作
  }
}

super(props)是在子类的构造函数中调用父类的构造函数，并传递props参数给父类的构造函数。这种情况下，父类的构造函数会接收到props参数，可以在父类中进行相关的初始化操作。这在子类需要访问父类的props时使用。

示例代码如下：

class ChildComponent extends React.Component {
  constructor(props) {
    super(props); // 调用父类的构造函数，并传递props参数
    // 子类的其他初始化操作
  }
}

需要注意的是，如果子类的构造函数中使用了super(props)，那么在构造函数中访问this.props时，this.props将会是父类的props，而不是子类的props。如果需要在子类的构造函数中访问子类的props，可以在调用super(props)之后将props保存到子类的实例中。

综上所述，super()和super(props)的区别在于是否传递props参数给父类的构造函数，根据具体的需求选择使用哪种形式。

3、说说对受控组件和非受控组件的理解？应用场景？

在React中，受控组件（Controlled Components）和非受控组件（Uncontrolled Components）是两种处理表单元素的方式。

受控组件是指表单元素的值受React组件的状态（state）控制的组件。在受控组件中，表单元素的值由组件的状态管理，每当表单元素的值发生变化时，都会触发组件的状态更新。通过使用受控组件，可以将表单元素的值与组件的状态保持同步，使得React能够掌控表单数据的变化。

非受控组件是指表单元素的值由DOM自身管理的组件。在非受控组件中，表单元素的值不受React组件的状态控制，而是通过ref属性从DOM中获取。非受控组件适用于简单的表单场景，不需要频繁地更新组件状态。

4、说说React的事件机制

React使用了一种合成事件（SyntheticEvent）的机制来处理事件。合成事件是React封装的一种跨浏览器兼容的事件系统，它提供了一致的事件接口，使得事件处理在不同浏览器和平台上表现一致。

React的事件机制有以下几个关键点：

事件绑定：在React中，可以通过将事件处理函数绑定到组件的事件属性上来处理事件。例如，使用onClick属性来处理点击事件，使用onChange属性来处理输入框的值变化事件。
合成事件对象：当事件被触发时，React会创建一个合成事件对象，该对象包含了与原生事件对象相似的属性和方法，但是它是跨浏览器兼容的。通过访问合成事件对象，可以获取事件的相关信息，如事件类型、目标元素、键盘状态等。
事件处理函数：事件处理函数是一个普通的JavaScript函数，它接收一个合成事件对象作为参数。在事件处理函数中，可以通过访问合成事件对象来获取事件的相关信息，并根据需要进行相应的处理逻辑。
事件委托：React使用了事件委托的机制来处理事件。事件委托是指将事件处理函数绑定到父元素上，而不是直接绑定到每个子元素上。当事件被触发时，React会根据事件冒泡的机制将事件传递到正确的组件上进行处理。这种方式可以减少事件处理函数的数量，提高性能。
阻止默认行为：在事件处理函数中，可以通过调用event.preventDefault()方法来阻止事件的默认行为。例如，在点击链接时可以阻止浏览器进行页面跳转。

需要注意的是，由于React使用了合成事件机制，事件处理函数中的this关键字指向的是组件实例，而不是触发事件的DOM元素。如果需要在事件处理函数中使用组件实例的方法或访问组件的状态，需要使用箭头函数或显式地绑定函数的this。

总结起来，React的事件机制通过合成事件对象、事件绑定和事件委托来处理事件，并提供了一致的跨浏览器兼容性和灵活的事件处理方式。

5、React事件绑定的方式有哪些？区别？

React中事件绑定的方式有以下几种：

直接在JSX中绑定事件处理函数：
1
<button onClick={handleClick}>Click me</button>
这种方式将事件处理函数直接绑定到组件的事件属性上，例如onClick、onChange等。事件处理函数可以是组件中定义的方法，也可以是内联的匿名函数。
使用箭头函数绑定事件处理函数：
1
<button onClick={() => handleClick()}>Click me</button>
这种方式使用了箭头函数来包装事件处理函数，可以在函数内部访问组件的this，无需显式地绑定函数的this。
使用bind方法绑定事件处理函数：
1
<button onClick={handleClick.bind(this)}>Click me</button>
这种方式使用了bind方法来绑定事件处理函数的this，确保在事件处理函数中可以访问组件的实例。

这些方式在功能上是等效的，它们都可以用来绑定事件处理函数。它们的区别在于对事件处理函数中的this的处理方式：

直接在JSX中绑定事件处理函数的方式，事件处理函数中的this指向组件实例。
使用箭头函数绑定事件处理函数的方式，事件处理函数中的this也指向组件实例，无需显式地绑定函数的this。
使用bind方法绑定事件处理函数的方式，可以显式地将函数的this绑定为指定的值，通常用于在事件处理函数中访问组件实例的方法或状态。

需要根据具体的需求和场景选择合适的事件绑定方式。一般来说，如果事件处理函数中需要访问组件实例的方法或状态，推荐使用箭头函数或bind方法来绑定事件处理函数。如果事件处理函数不需要访问组件实例，可以直接在JSX中绑定事件处理函数。

6、React构建组件的方式有哪些？区别？

在React中，构建组件的方式主要有以下几种：

函数组件（Function Components）：
函数组件是一种简单的组件构建方式，它是一个纯粹的JavaScript函数，接收一个props对象作为参数，并返回一个React元素。函数组件没有自己的状态（state），只依赖于传入的props进行渲染。函数组件使用函数声明的方式定义，例如：
1
2
3
function MyComponent(props) {
return <div>Hello, {props.name}!</div>;
}
函数组件的优点是简洁、易于理解和测试，适用于无状态的展示型组件。
类组件（Class Components）：
类组件是使用ES6的类语法来定义的组件，它继承自React.Component类，并可以拥有自己的状态和生命周期方法。类组件使用类声明的方式定义，例如：
1
2
3
4
5
class MyComponent extends React.Component {
render() {
return <div>Hello, {this.props.name}!</div>;
}
}
类组件可以通过继承React.Component类来获得更多的功能，如生命周期方法、状态管理等。类组件适用于有状态的组件和需要进行复杂逻辑处理的组件。

高阶组件（Higher-Order Components）：
高阶组件是一种函数，接收一个组件作为参数，并返回一个新的组件。高阶组件可以用于封装通用的逻辑，例如处理数据获取、权限控制等。通过使用高阶组件，可以实现组件的复用和逻辑的抽象。例如：

function withLogger(WrappedComponent) {
  return class extends React.Component {
    componentDidMount() {
      console.log("Component mounted");
    }
    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
}

高阶组件可以通过包装其他组件来添加额外的功能或行为。

这些组件构建方式在功能上是等效的，它们都可以用来构建React组件。它们的区别在于语法和特性：

函数组件是一种简单的函数声明，没有自己的状态和生命周期方法，适用于无状态的展示型组件。
类组件是使用类声明的方式定义的组件，可以拥有自己的状态和生命周期方法，适用于有状态的组件和复杂逻辑处理。
高阶组件是一种函数，用于封装通用的逻辑，可以通过包装其他组件来添加额外的功能或行为。

选择合适的组件构建方式取决于具体的需求和场景。一般来说，如果组件只需要展示数据，没有自己的状态和生命周期方法，可以使用函数组件。如果组件需要管理自己的状态或进行复杂逻辑处理，可以使用类组件。如果需要封装通用的逻辑或添加额外的功能，可以使用高阶组件。

7、说说React中引入css的方式有哪几种？区别？

在React中，引入CSS的方式有以下几种：

内联样式（Inline Styles）：
内联样式是将CSS样式直接写在组件的JSX代码中，使用JavaScript对象的形式表示样式。例如：
1
2
3
4
5
6
7
8
function MyComponent() {
const styles = {
color: 'red',
fontSize: '16px',
};

return <div style={styles}>Hello, world!</div>;
}
内联样式的优点是可以直接在组件中定义样式，样式与组件紧密关联，方便维护和调试。但是对于复杂的样式，内联样式可能会显得冗长和不易维护。
模块化CSS（CSS Modules）：
CSS Modules是一种将CSS样式文件与组件关联起来的方式。在使用CSS Modules时，每个CSS文件都被视为一个独立的模块，其中的类名会被自动转换为唯一的标识符。在组件中引入CSS文件，并使用生成的标识符来应用样式。例如：
1
2
3
4
5
import styles from './MyComponent.module.css';

function MyComponent() {
return <div className={styles.container}>Hello, world!</div>;
}
CSS Modules的优点是可以实现样式的模块化，避免样式冲突，并且可以在开发过程中进行静态类型检查。每个组件都有自己的样式作用域，提高了样式的可维护性。
CSS-in-JS：
CSS-in-JS是一种将CSS样式直接写在JavaScript代码中的方式，通过使用特定的库或工具，可以在组件中定义和应用样式。常见的CSS-in-JS库包括Styled Components、Emotion等。例如使用Styled Components：
1
2
3
4
5
6
7
8
9
10
import styled from 'styled-components';

const Container = styled.div`
color: red;
font-size: 16px;
`;

function MyComponent() {
return <Container>Hello, world!</Container>;
}
CSS-in-JS的优点是可以将样式与组件紧密集成，提供了更灵活和动态的样式定义和应用方式。它还支持使用JavaScript的特性，如条件渲染、动态样式等。

这些引入CSS的方式在功能上是等效的，它们都可以用来引入和应用CSS样式。它们的区别在于语法和特性：

内联样式直接将样式写在组件的JSX代码中，使用JavaScript对象表示样式，样式与组件紧密关联。
CSS Modules将CSS样式文件与组件关联起来，实现样式的模块化，避免样式冲突。
CSS-in-JS将CSS样式直接写在JavaScript代码中，提供了更灵活和动态的样式定义和应用方式。

选择合适的引入CSS的方式取决于具体的需求和个人偏好。如果样式较简单且与组件紧密关联，可以使用内联样式。如果需要实现样式的模块化和避免样式冲突，可以使用CSS Modules。如果需要更灵活和动态的样式定义和应用方式，可以使用CSS-in-JS。

8、说说React生命周期有哪些不同阶段？每个阶段对应的方法是？

在早期版本的React中，组件生命周期由一系列生命周期方法组成，用于在组件的不同阶段执行特定的操作。然而，随着React的发展，一些生命周期方法已被标记为过时，并在新版本中被替代或移除。下面是React中常用的组件生命周期阶段及其对应的方法：

挂载阶段（Mounting Phase）：
- constructor：组件实例化时调用，用于初始化状态和绑定方法。
- static getDerivedStateFromProps：在组件实例化和更新阶段调用，用于根据props更新状态。
- render：根据当前的props和state渲染组件的UI。
- componentDidMount：组件挂载到DOM后调用，可以进行异步操作、数据获取等。
更新阶段（Updating Phase）：
- static getDerivedStateFromProps：在更新阶段调用，用于根据props更新状态。
- shouldComponentUpdate：在更新阶段调用，用于决定是否重新渲染组件。
- render：根据当前的props和state渲染组件的UI。
- componentDidUpdate：组件更新后调用，可以进行DOM操作、数据更新等。
卸载阶段（Unmounting Phase）：
- componentWillUnmount：组件从DOM中移除前调用，用于清理定时器、取消订阅等。
错误处理阶段（Error Handling Phase）：
- static getDerivedStateFromError：在子组件发生错误时调用，用于更新错误状态。
- componentDidCatch：在子组件发生错误后调用，用于记录错误信息、发送错误报告等。

需要注意的是，随着React版本的更新，一些生命周期方法已被废弃或替代。例如，React 16.3版本引入了新的生命周期方法：

static getDerivedStateFromProps 替代了 componentWillReceiveProps
getSnapshotBeforeUpdate 替代了 componentWillUpdate

此外，React 17版本中还有一些生命周期方法被标记为过时，包括 componentWillMount、componentWillUpdate 和 componentWillReceiveProps。在新的React版本中，推荐使用其他替代方法来执行相应的操作。

请注意，React 16.8版本引入了Hooks，它提供了一种新的方式来处理组件的状态和副作用，可以替代部分生命周期方法的使用。

总结起来，React中常用的组件生命周期阶段包括挂载阶段、更新阶段、卸载阶段和错误处理阶段，每个阶段对应的方法有所不同。具体使用哪些方法取决于React的版本和具体的需求。

9、React中组件之间如何通信？

在React中，组件之间可以通过以下几种方式进行通信：

Props（属性）：
组件之间最常用的通信方式是通过props（属性）传递数据。父组件可以将数据作为props传递给子组件，在子组件中通过props来访问这些数据。这种单向数据流的方式使得组件之间的通信清晰可控。父组件可以通过props向子组件传递数据和回调函数，子组件可以通过调用回调函数来与父组件进行通信。
Context（上下文）：
Context提供了一种在组件树中共享数据的方式，避免了通过props层层传递数据的繁琐。通过创建一个Context对象，并在组件树中的某个位置提供该Context的值，子组件可以通过在组件中使用Context.Consumer来访问该值。Context可以在跨层级的组件之间进行通信，但在使用时需要注意避免滥用，以免导致组件之间的耦合性增加。
Redux（状态管理库）：
Redux是一个流行的状态管理库，它可以帮助组件之间共享和管理状态。通过Redux，可以将应用的状态存储在一个全局的store中，组件可以通过连接（connect）到store来获取和更新状态。Redux使用了一个单一的状态树和纯函数来管理状态的变化，使得状态的管理更加可预测和可维护。
其他第三方库：
除了Redux，还有其他一些第三方库可以用于组件之间的通信，如MobX、React Context API的第三方实现（如Recoil、Zustand等）等。这些库提供了不同的方式来管理和共享状态，可以根据具体的需求选择合适的库。

需要根据具体的场景和需求选择合适的通信方式。如果组件之间的通信较简单，可以使用props进行数据传递；如果组件层级较深或需要在多个组件之间共享数据，可以考虑使用Context；如果应用的状态较为复杂，可以选择使用状态管理库（如Redux）来管理状态。

10、说说对高阶组件的理解？应用场景

高阶组件（Higher-Order Component，HOC）是一种在React中用于复用组件逻辑的模式。它本质上是一个函数，接受一个组件作为参数，并返回一个新的增强组件。

通过使用高阶组件，可以将通用的逻辑从组件中提取出来，并将其应用于多个组件中，实现代码的复用和逻辑的解耦。高阶组件可以在不修改原始组件的情况下，为其添加额外的功能或修改其行为。

高阶组件的应用场景包括：

代码复用：通过将通用的逻辑抽象为高阶组件，可以在多个组件中共享该逻辑，避免代码重复。
条件渲染：高阶组件可以根据特定的条件来决定是否渲染原始组件，从而实现条件渲染的功能。
认证和授权：高阶组件可以用于处理用户认证和授权的逻辑，例如检查用户是否登录并根据权限控制组件的渲染。
数据获取和处理：高阶组件可以用于处理数据获取和处理的逻辑，例如从API获取数据并将其传递给原始组件。
动画和过渡效果：高阶组件可以用于添加动画和过渡效果的逻辑，例如在组件进入或离开时应用动画效果。
性能优化：高阶组件可以用于对组件进行性能优化，例如通过对组件进行记忆化或懒加载等操作来提高性能。

需要注意的是，高阶组件并不是React的官方概念，而是一种模式和约定。在实际使用中，可以根据具体的需求和场景来定义和使用高阶组件。同时，React Hooks的引入也提供了一种替代高阶组件的方式，可以根据具体情况选择使用高阶组件或Hooks来实现相应的功能。

11、在React中组件间过渡动画如何实现？

在React中实现组件间的过渡动画可以使用多种方式，以下是其中几种常见的方法：

CSS Transition和CSS Animation：
可以使用CSS Transition和CSS Animation来实现组件间的过渡动画。通过在组件的CSS样式中定义过渡效果或动画效果，并在组件的状态变化时添加相应的CSS类名，可以触发过渡或动画效果。例如，在组件进入或离开时，通过添加或移除CSS类名来实现淡入淡出、滑动等过渡效果。
React Transition Group：
React Transition Group是一个第三方库，提供了一组用于实现过渡动画的组件。它基于React的生命周期和动画事件，可以在组件的进入、离开和状态变化时触发动画效果。通过使用React Transition Group的组件（如Transition、CSSTransition等），可以方便地定义和控制组件间的过渡动画。
React Spring：
React Spring是另一个流行的第三方库，用于实现动态的、物理引擎驱动的过渡动画。它提供了一组用于创建和控制动画的Hooks和组件，可以实现更复杂和流畅的过渡效果。React Spring使用物理引擎来模拟真实的物理效果，例如弹簧、摩擦等，可以创建更具交互性和真实感的过渡动画。
使用其他动画库：
除了React Transition Group和React Spring，还有其他一些第三方动画库可以用于实现组件间的过渡动画，如GreenSock Animation Platform（GSAP）、Anime.js等。这些库提供了更多的动画效果和控制选项，可以根据具体需求选择合适的库。

需要根据具体的需求和场景选择合适的方法来实现组件间的过渡动画。无论选择哪种方式，都需要注意动画的性能和流畅度，避免过多的计算和重绘导致性能问题。

12、说说你在React项目是如何捕获错误的？

在React项目中，可以使用以下几种方式来捕获和处理错误：

错误边界（Error Boundaries）：
错误边界是一种React组件，用于捕获并处理其子组件中抛出的错误。通过在组件树中的特定位置包裹错误边界组件，可以将错误限定在边界内，并提供自定义的错误处理逻辑。当子组件抛出错误时，错误边界会触发其componentDidCatch生命周期方法，并可以在该方法中记录错误信息、展示备用UI或发送错误报告等。
try-catch语句：
在函数组件中，可以使用try-catch语句来捕获和处理同步代码中的错误。将可能抛出错误的代码放在try块中，然后在catch块中处理错误，例如记录错误信息或展示错误提示。
错误处理钩子（Error Handling Hooks）：
自定义钩子可以用于处理特定场景下的错误。通过创建自定义钩子，可以在其中使用try-catch语句来捕获和处理错误，并提供相应的错误处理逻辑。这种方式可以将错误处理逻辑与组件逻辑分离，提高代码的可维护性和复用性。
全局错误处理：
在React应用的根组件或应用入口处，可以通过监听全局错误事件（如window.onerror或window.addEventListener('error')）来捕获未被任何组件处理的错误。在全局错误处理函数中，可以记录错误信息、展示错误提示或发送错误报告等。

需要注意的是，无论使用哪种方式捕获错误，都应该遵循适当的错误处理原则，包括记录错误信息、提供友好的错误提示、恢复应用的正常状态或向开发团队报告错误等。同时，为了更好地调试和定位错误，建议在开发环境中启用React的错误边界和错误信息显示功能。

13、说说对React refs的理解？应用场景？

在React中，ref是一种用于访问组件或DOM元素的引用的机制。通过使用ref，我们可以在函数组件或类组件中获取对组件实例或DOM节点的引用，并直接操作它们。

理解React refs的关键点如下：

创建和使用ref：
在函数组件中，可以使用useRef钩子来创建ref。在类组件中，可以通过创建实例属性并赋值为React.createRef()来创建ref。然后，可以将ref传递给组件或DOM元素的ref属性，从而获取对它们的引用。
访问引用的值：
通过访问ref的current属性，可以获取对组件实例或DOM节点的引用。例如，ref.current可以是一个组件实例、一个DOM节点对象或null（如果ref未关联到任何内容）。
应用场景：
- 访问DOM元素：通过ref可以获取到DOM节点的引用，从而可以直接操作DOM，例如改变样式、获取尺寸、添加事件监听等。
- 获取子组件的引用：可以在父组件中使用ref获取对子组件实例的引用，从而可以调用子组件的方法或访问其属性。
- 焦点管理：可以使用ref在组件挂载后自动设置焦点到特定的输入框或元素上。
- 动画和过渡：一些动画库或过渡库可能需要使用ref来获取组件或DOM节点的引用，以便进行动画效果的操作和控制。

需要注意的是，在使用ref时应遵循React的设计原则，尽量避免直接操作DOM，而是优先使用React的声明式方式来管理组件状态和行为。在大多数情况下，应该通过props和状态来传递数据和控制组件，而不是直接依赖ref。只有在必要的情况下，才应使用ref来访问组件实例或DOM节点。

14、说说React中的setState执行机制

在React中，setState是用于更新组件状态的方法。当调用setState时，React会执行以下步骤来处理状态更新：

合并更新对象：
当调用setState时，可以传递一个更新对象或一个更新函数。如果传递的是更新对象，React会将该对象与当前状态进行浅合并，生成新的状态。如果传递的是更新函数，React会调用该函数，并将当前状态作为参数传递给它，然后使用函数返回的对象作为新的状态。
批量更新：
React会将多个setState调用合并为单个更新，以提高性能。在同一个事件循环中，多个setState调用会被放入一个队列中，然后一次性进行更新。这样可以避免不必要的组件重新渲染。
异步更新：
React会将状态更新视为异步操作，即使在setState之后立即访问状态，也不能保证立即得到更新后的状态。React会将状态更新推迟到合适的时机进行，以提高性能和优化渲染。
执行更新：
在合适的时机，React会开始执行状态更新。它会比较新的状态与旧的状态，确定哪些组件需要重新渲染。然后，React会触发组件的更新过程，包括调用生命周期方法、执行render方法生成新的虚拟DOM，并将新的虚拟DOM与旧的虚拟DOM进行对比，最终更新实际的DOM。

需要注意的是，由于setState是异步的，不能直接依赖当前状态的值来计算新的状态。如果需要基于当前状态计算新的状态，应该使用更新函数的形式来调用setState，以确保获取到最新的状态值。

另外，React还提供了setState的第二个参数，用于在状态更新完成后执行回调函数。这个回调函数可以用于在状态更新完成后执行一些额外的操作，例如获取更新后的DOM节点或执行其他逻辑。

15、说说React render 方法的原理？在什么时候会被触发？

在React中，render方法是类组件中的一个生命周期方法，用于生成组件的虚拟DOM（Virtual DOM）。它定义了组件的外观和结构，并返回一个描述组件如何渲染的React元素。

render方法的原理如下：

虚拟DOM生成：
当组件需要进行渲染时，React会调用组件的render方法。在render方法中，可以使用JSX语法或React.createElement函数来描述组件的结构和内容。render方法会返回一个React元素，它是一个轻量级的JavaScript对象，描述了组件的结构和属性。
虚拟DOM对比：
生成的虚拟DOM会与上一次渲染时生成的虚拟DOM进行对比。React使用一种称为”协调”（Reconciliation）的算法来比较两个虚拟DOM树的差异，并找出需要更新的部分。
更新实际DOM：
根据对比的结果，React会确定需要更新的部分，并将这些变化应用到实际的DOM上。React使用高效的算法来最小化DOM操作，以提高性能。

render方法会在以下情况下被触发：

组件首次渲染：当组件首次被挂载到DOM树上时，会调用组件的render方法生成初始的虚拟DOM，并将其转换为实际的DOM，呈现在页面上。
组件状态更新：当组件的状态通过setState方法进行更新时，React会重新调用组件的render方法，生成新的虚拟DOM，并与之前的虚拟DOM进行对比，最终更新实际的DOM。
父组件重新渲染：如果组件的父组件发生重新渲染，那么子组件的render方法也会被调用，以生成新的虚拟DOM。

需要注意的是，虽然render方法是必须的，但是它不应该直接修改组件的状态或执行其他副作用操作。render方法应该是一个纯函数，只负责根据输入的属性和状态生成虚拟DOM。副作用操作应该放在其他生命周期方法中或使用钩子函数来处理。

16、说说Real DOM和 Virtual DOM 的区别？优缺点？

Real DOM（真实DOM）和 Virtual DOM（虚拟DOM）是两种不同的概念，用于描述浏览器中的DOM操作方式。

Real DOM（真实DOM）是浏览器中实际存在的DOM树结构，它由浏览器解析HTML文档时创建。当页面中的元素发生变化时，Real DOM会进行重新渲染和布局，这是一种比较昂贵的操作。因为每次更新都会导致整个DOM树的重新构建和页面的重绘，这对于复杂的应用程序或频繁的DOM操作会影响性能。

Virtual DOM（虚拟DOM）是React等一些JavaScript库和框架引入的概念。它是一个轻量级的JavaScript对象，用于描述真实DOM的结构和属性。Virtual DOM可以在内存中进行操作，而不需要直接操作真实的DOM。当组件的状态发生变化时，React会通过对比新旧两个虚拟DOM树的差异，找出需要更新的部分，并将这些变化批量应用到真实DOM上。这样可以减少对真实DOM的直接操作，提高性能。

虚拟DOM的优点包括：

性能优化：通过批量更新和最小化DOM操作，减少了对真实DOM的访问和操作，提高了性能。
跨平台：虚拟DOM是与平台无关的，可以在浏览器环境和其他环境（如服务器端渲染）中使用。
方便的抽象层：虚拟DOM提供了一种方便的抽象层，可以通过JavaScript对象来描述和操作DOM，简化了DOM操作的复杂性。

虚拟DOM的缺点包括：

内存消耗：虚拟DOM需要在内存中维护一份DOM树的副本，对于大型应用程序或复杂的组件结构，可能会占用较多的内存。
学习成本：使用虚拟DOM需要学习和理解其工作原理和使用方式，对于新手来说可能需要一定的学习成本。

总结起来，虚拟DOM通过在内存中操作轻量级的JavaScript对象，减少了对真实DOM的直接操作，提高了性能。虽然它也有一些缺点，但在大多数情况下，虚拟DOM的优势远远超过了其缺点，使得开发者能够更高效地构建复杂的用户界面。

17、说说React Jsx 转换成真实 DOM 过程？

在React中，JSX是一种类似于HTML的语法扩展，用于描述组件的结构和内容。当使用JSX编写组件时，React会将JSX代码转换为真实的DOM元素。

JSX转换成真实DOM的过程如下：

JSX编写：
开发者使用JSX语法编写组件的结构和内容，类似于HTML的写法。例如：
1
const element = <div className="my-class">Hello, React!</div>;
Babel编译：
JSX代码无法直接被浏览器解析，所以需要通过工具进行转换。通常使用Babel这样的工具将JSX代码转换为普通的JavaScript代码。转换后的代码类似于以下形式：
1
const element = React.createElement("div", { className: "my-class" }, "Hello, React!");
创建虚拟DOM：
转换后的代码中，React会调用React.createElement函数来创建一个虚拟DOM元素。这个虚拟DOM元素是一个JavaScript对象，包含了元素的类型、属性和子元素等信息。
虚拟DOM转换为真实DOM：
通过虚拟DOM，React可以了解组件的结构和内容。在组件需要渲染到页面上时，React会根据虚拟DOM的信息，创建真实的DOM元素，并将其添加到页面的相应位置。
更新和重渲染：
当组件的状态发生变化时，React会重新执行上述过程，生成新的虚拟DOM，并通过对比新旧虚拟DOM的差异，最小化DOM操作，只更新需要变化的部分，从而提高性能。

总结起来，JSX代码经过编译和转换后，会生成虚拟DOM，然后通过对比虚拟DOM的差异，将变化的部分更新到真实的DOM上，实现组件的渲染和更新。这种方式可以提高性能，避免了频繁的直接DOM操作。