【React入门必备知识篇01】--- React 基础 & JSX，震撼来袭

总结一下

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

前端面试题汇总

JavaScript

性能

linux

前端资料汇总

前端工程师岗位缺口一直很大，符合岗位要求的人越来越少，所以学习前端的小伙伴要注意了，一定要把技能学到扎实，做有含金量的项目，这样在找工作的时候无论遇到什么情况，问题都不会大。

开源分享：docs.qq.com/doc/DSmRnRG…

• • 2.1 React 的安装

• 2.2 React 的使用

• 2.3 方法说明

• （3）React 脚手架的使用

• • 3.1 React 脚手架意义

• 3.2 使用 React 脚手架初始化项目

• 3.3 在脚手架中使用 React

• （4）React 基础小结

• 二、JSX

• • （1）JSX 的基本使用
• • 1.1 createElement() 的问题

• 1.2 JSX 简介

• 1.3 使用步骤

• 1.4 注意事项

• （2）JSX 中使用 JavaScript 表达式

• • 2.1 嵌入 JS 表达式

• 2.2 注意事项

• （3）JSX 的条件渲染

• （4）JSX 的列表渲染

• （5）JSX 的样式处理

• • 5.1 行内样式 --- style

• 5.2 类名 --- className（推荐）

• （6）JSX 小结

• 三、总结

一、React 基础

---

（1）React 概述

1.1 什么是 React

1️⃣ React 是一个用于构建用户界面的 JavaScript 库。

2️⃣ React 主要用来写HTML页面，或构建Web应用。如果从 MVC 的角度来看，React 仅仅是视图层（V），也就是只负责视图的渲染，而并非提供了完整的 M 和 C 的功能。

3️⃣ React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。

1.2 React 的特点

1.2.1 声明式设计

1️⃣ 你只需要描述 UI（HTML）看起来是什么样，就跟写HTML一样；

2️⃣ React 负责渲染 UI，并在数据变化时更新 UI；

代码演示如下：

const jsx =

1.2.2 基于组件

• 组件是 React 最重要的内容；

• 组件表示页面中的部分内容；

• 组合、复用多个组件，可以实现完整的页面功能；

• 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中；

1.2.3 学习一次，随处使用

• 使用 React 可以开发 Web 应用；

• 使用 React 可以开发移动端原生应用（react-native）；

• 使用 React 可以开发 VR（虚拟现实）应用（react 360）等；

---

（2）React 的基本使用

2.1 React 的安装

安装命令：npm i react react-dom

• react 包是核心，提供创建元素、组件等功能

• react-dom 包提供 DOM 相关功能等

2.2 React 的使用

1️⃣ 引入 react 和 react-dom 两个 js 文件；

2️⃣ 创建 React 元素；

3️⃣ 渲染 React 元素到页面中；

完整代码演示如下：

react基本使用

2.3 方法说明

• React.createElement() 说明（了解即可）

// 返回值：React元素

// 第一个参数：要创建的React元素名称

// 第二个参数：该React元素的属性

// 第三个及其以后的参数：该React元素的子节点

const el = React.createElement('h1', { title: '标题' }, 'Hello React')

• ReactDOM.render() 说明

// 第一个参数：要渲染的React元素

// 第二个参数：DOM对象，用于指定渲染到页面中的位置

ReactDOM.render(el, document.getElementById('root'))

---

（3）React 脚手架的使用

3.1 React 脚手架意义

1. 脚手架是开发 现代Web 应用的必备；

2. 充分利用 Webpack、Babel、ESLint 等工具辅助项目开发；

3. 零配置，无需手动配置繁琐的工具即可使用；

4. 关注业务，而不是工具配置；

3.2 使用 React 脚手架初始化项目

1. 初始化项目，命令：npx create-react-app my-app

2. 启动项目，在项目根目录执行命令：npm start

npx 命令介绍：

• npm v5.2.0 引入的一条命令；

• 目的：提升包内提供的命令行工具的使用体验；

• 从前：先安装脚手架包，再使用这个包中提供的命令；

• 现在：无需安装脚手架包，就可以直接使用这个包提供的命令；

3.3 在脚手架中使用 React

1️⃣ 导入 react 和 react-dom 两个包；

import React from 'react'

import ReactDOM from 'react-dom'

2️⃣ 调用 React.createElement() 方法创建 react 元素；

3️⃣ 调用 ReactDOM.render() 方法渲染 react 元素到页面中；

---

（4）React 基础小结

1. React是构建用户界面的JavaScript库。

2. 使用 react 时，推荐使用脚手架方式。

3. 初始化项目命令：npx create-react-app my-app 。

4. 启动项目命令：yarn start（或 npm start）。

5. React.createElement() 方法用于创建 react 元素（知道）。

6. ReactDOM.render() 方法负责渲染 react 元素到页面中。

---

二、JSX

---

（1）JSX 的基本使用

1.1 createElement() 的问题

1. 繁琐不简洁。

2. 不直观，无法一眼看出所描述的结构。

3. 不优雅，用户体验不爽。

1.2 JSX 简介

1️⃣ JSX 是 JavaScript XML 的简写，表示在 JavaScript 代码中写 XML（HTML） 格式的代码。

2️⃣ 优势：声明式语法更加直观、与HTML结构相同，降低了学习成本、提升开发效率。

3️⃣ JSX 是 React 的核心内容。

1.3 使用步骤

1️⃣ 使用 JSX 语法创建 react 元素；

// 使用 JSX 语法，创建 react 元素：

const title =

Hello JSX

2️⃣ 使用 ReactDOM.render() 方法渲染 react 元素到页面中；

// 渲染react元素

ReactDOM.render(title, document.getElementById('root'))

😆思考：为什么脚手架中可以使用 JSX 语法？😆：

1. JSX 不是标准的 ECMAScript 语法，它是 ECMAScript 的语法扩展。

2. 需要使用 babel 编译处理后，才能在浏览器环境中使用。

3. create-react-app 脚手架中已经默认有该配置，无需手动配置。

4. 编译 JSX 语法的包为：https://babeljs.io/docs/en/babel-preset-react

1.4 注意事项

1. React元素的属性名使用驼峰命名法。

2. 特殊属性名：class → className、for → htmlFor、tabindex → tabIndex 。

3. 没有子节点的React元素可以用 /> 结束 。

4. 推荐：使用小括号()包裹 JSX ，从而避免 JS 中的自动插入分号陷阱。

---

（2）JSX 中使用 JavaScript 表达式

2.1 嵌入 JS 表达式

• 数据存储在JS中

• 语法：{ JavaScript表达式 }

• 注意：语法中是单大括号，不是双大括号！

完整代码演示如下：

import React from 'react'

import ReactDOM from 'react-dom'

/*

JSX中使用JavaScript表达式

*/

const name = 'Jack'

const age = 19

const title = (

Hello JSX, {name}, 年龄：{age}

)

// 渲染react元素

ReactDOM.render(title, document.getElementById('root'))

2.2 注意事项

• 单大括号中可以使用任意的 JavaScript 表达式

• JSX 自身也是 JS 表达式

• 注意：JS 中的对象是一个例外，一般只会出现在 style 属性中

• 注意：不能在{}中出现语句（比如：if/for 等）

---

（3）JSX 的条件渲染

• 场景：loading效果

• 条件渲染：根据条件渲染特定的 JSX 结构

• 可以使用 if/else 或 三元运算符 或 逻辑与运算符 来实现

完整代码演示如下：

JavaScript

• js的基本类型有哪些？引用类型有哪些？null和undefined的区别。

• 如何判断一个变量是Array类型？如何判断一个变量是Number类型？（都不止一种）

• Object是引用类型嘛？引用类型和基本类型有什么区别？哪个是存在堆哪一个是存在栈上面的？

• JS常见的dom操作api

• 解释一下事件冒泡和事件捕获

• 事件委托（手写例子），事件冒泡和捕获，如何阻止冒泡？如何组织默认事件？

• 对闭包的理解？什么时候构成闭包？闭包的实现方法？闭包的优缺点？

• this有哪些使用场景？跟C,Java中的this有什么区别？如何改变this的值？

• call，apply，bind

• 显示原型和隐式原型，手绘原型链，原型链是什么？为什么要有原型链

• 创建对象的多种方式

• 实现继承的多种方式和优缺点

• new 一个对象具体做了什么

• 手写Ajax，XMLHttpRequest

• 变量提升

• 举例说明一个匿名函数的典型用例

• 指出JS的宿主对象和原生对象的区别，为什么扩展JS内置对象不是好的做法？有哪些内置对象和内置函数？

• attribute和property的区别

• document load和document DOMContentLoaded两个事件的区别

• JS代码调试

• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】