React— React面试题按照学习顺序持续更新

1.React的特点

• 采用组件化模式，命名式编码，提高代码复用率；
• 在React Native中可以使用react语法进行移动端开发
• 使用虚拟DOM（v-dom）和diff算法，减少DOM和浏览器的交互

2.babel在React的作用

• ES6语法转ES5，如箭头函数、模板字符串、解构赋值等。Babel 可以将这些高级语法转换为浏览器能够兼容的 ES5 代码，确保代码在各种浏览器环境下正常运行。
• JSX 转换：React 使用 JSX 语法来描述 UI 组件，而浏览器无法直接理解 JSX。Babel 可以将 JSX 代码转换为普通的 JavaScript 代码，使得浏览器能够正确解析和渲染 React 组件。
• 有些新的 JavaScript API（如 Promise、Map、Set 等）并不是所有浏览器都原生支持的，Babel 可以通过插件的形式提供对这些 API 的 polyfill，使得开发者可以在所有浏览器上使用这些特性。

3.为什么不用JS，使用JSX

• JSX是原始JS的语法糖；
• 易读性和易写性，JSX 使得编写 React 组件更加直观和易读，可以在 JavaScript 代码中直接嵌入 HTML 结构；
• React 使用虚拟 DOM 来提高渲染性能，而 JSX 可以被编译为创建虚拟 DOM 的 JavaScript 代码。

4.什么是虚拟DOM

• 本质是一个“Object对象” ；
• 虚拟DOM是React内部在使用，比真实DOM中的属性要少；
• 虚拟DOM最终会被React转化为真实DOM，渲染在页面上。

5.JSX语法

• 全称JavaScript XML，是React定义的一种类似于XML的JS扩展语法：JS+XML；
• 定义虚拟DOM时，不要加引号，类似 HTML 的标签来表示 UI 元素，比如 <div>、<span>、<h1>；
• 在 JSX 中使用 JavaScript 表达式，使用大括号 {}；
• class 是 JavaScript 的保留关键字，在 JSX 中使用 CSS 类名时需要使用 className 属性；
• 可以使用 style 属性来设置元素的内联样式，样式需要使用对象的形式表示，例如 style={{ color: 'red', fontSize: '14px' }}；
• 对于没有子元素的标签，可以使用自闭合形式，比如 <br />、<input type="text" />；
• 使用 {/* */} 来添加注释。

6.模块与组件、模块化和组件化

•  模块：向外提供特定功能的js程序，一般就是个js

　　　作用 ：复用js，简化js的编写，提高js的运行效率

•  组件：用来实现局部宫那个效果的代码和资源的集合（html + css + js +image + ...）

　　　作用：复用代码，简化项目编码，提高运行效率

• 模块化：当应用的js都以模块来编写的，这个应用就是一个模块化的应用
• 组件化：当应用以多组件的方式实现，这个应用就是一个组件化的应用

7.React面向组件编程

• 函数式组件：适用简单组件

// 函数式组件
    function ModeDemo(){
　　　　　console.log(this)//此处的this是undefined，因为babel开启了严格模式
        return <h1>函数式组件</h1>
    }

• 类式组件

import React, { Component } from 'react';
class MyComponent extends Component {
  render() {
    return <div>Hello, I am a class component!</div>;
  }
}
export default MyComponent;

8.