【React】1、React入门与概览（JSX语法）

系列文章目录 React入门与概览（JSX语法）面向组件编程——组件实例的三大核心属性state、props和refs超详解受控组件与非受控组件（vue和react的双向绑定分别是怎么实现的？）

---

React入门

文章目录 系列文章目录React入门一、React全家桶1. React是什么?2. 谁开发的?3. 为什么要学?4. React的特点5. 学习React之前要掌握的JavaScript基础知识 二、React 概览组件JSXVirtual DOM关于虚拟DOM： Data Flow 三、React基本使用相关js库 四、React JSXJSX 语法规则 五、模块与组件、模块化与组件化的理解5.1 模块5.2 组件5.4 模块化5.5 组件化

一、React全家桶 React基础React-Router(React路由库)PubSub(消息管理的库)Redux(集中式状态管理的库)Ant-Design(UI组件库) 1. React是什么?

React是一个用于构建用户界面的 JavaScript 库.

React 帮助开发者 *** 作DOM元素,是一个将数据渲染为HTML视图的开源的JavaSCript库

React:你给我数据,我帮你渲染为HTML视图

2. 谁开发的?

由FaceBook开发,且开源.

3. 为什么要学?

原声JavaScript *** 作DOM繁琐、效率低（DOM-API *** 作UI）。

document.getElementById('app')
document.querySelector('#app')
document.getElementByTagName('span')

使用JavaScript直接 *** 作DOM，浏览器会进行大量的重绘重排。

原声JavaScript没有组件化编码方案，代码复用率低。

4. React的特点 采用组件化模式、声明式编码，提高开发效率及组件复用率。在React Native中可以使用React语法进行移动端开发。使用虚拟DOM+优秀Diffing 算法，尽量减少与真实DOM交互。

Diffing算法：进行虚拟DOM的比较，发现之前的虚拟DOM和现在的虚拟DOM一样，就不再重新生成新的真实DOM了，

只渲染与之前不同的虚拟DOM为真实DOM。

5. 学习React之前要掌握的JavaScript基础知识 判断this的指向class（类）ES6语法规范npm包管理器原型、原型链数组常用方法模块化 二、React 概览

React 的核心思想是：封装组件。

各个组件维护自己的状态和 UI，当状态变更，自动重新渲染整个组件。

基于这种方式的一个直观感受就是我们不再需要不厌其烦地来回查找某个 DOM 元素，然后 *** 作 DOM 去更改 UI。

React 大体包含下面这些概念：

组件JSXVirtual DOMData Flow

这里通过一个简单的组件来快速了解这些概念，以及建立起对 React 的一个总体认识。

import React, { Component } from 'react';
import { render } from 'react-dom';

class HelloMessage extends Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

// 加载组件到 DOM 元素 mountNode
render(<HelloMessage name="John" />, mountNode);

组件

React 应用都是构建在组件之上。

上面的 HelloMessage 就是一个 React 构建的组件，最后一句 render 会把这个组件显示到页面上的某个元素 mountNode 里面，显示的内容就是 Hello John。

props 是组件包含的两个核心概念之一，另一个是 state（这个组件没用到）。可以把 props 看作是组件的配置属性，在组件内部是不变的，只是在调用这个组件的时候传入不同的属性（比如这里的 name）来定制显示这个组件。

JSX

从上面的代码可以看到将 HTML 直接嵌入了 JS 代码里面，这个就是 React 提出的一种叫 JSX 的语法，这应该是最开始接触 React 最不能接受的设定之一，因为前端被“表现和逻辑层分离”这种思想“洗脑”太久了。但实际上组件的 HTML 是组成一个组件不可分割的一部分，能够将 HTML 封装起来才是组件的完全体，React 发明了 JSX 让 JS 支持嵌入 HTML 不得不说是一种非常聪明的做法，让前端实现真正意义上的组件化成为了可能。

好消息是你可以不一定使用这种语法，后面会进一步介绍 JSX，到时候你可能就会喜欢上了。现在要知道的是，要使用包含 JSX 的组件，是需要“编译”输出 JS 代码才能使用的，之后就会讲到开发环境。

JSX 实际上是原生 JS 的一种语法糖，由 babel 将 JSX 转译为 JS

using jsx:

<script type="text/babel">  /* 此处一定要写babel，表示这个脚本是jsx格式的 */
    // 1.创建虚拟DOM
    const VDOM = (  /* 此处不要写引号，因为不是字符串 */
      <h1 id="title">
        <span>Hello,React</span>
      </h1>
    )
    // 2.渲染虚拟DOM到页面,ReactDOM.render(虚拟DOM，容器)
    ReactDOM.render(VDOM, document.getElementById('test'))
  </script>

using js:

<script type="text/javascript">
    // 1.创建虚拟DOM,React.createElement(标签名，标签属性，标签内容)
    const VDOM = React.createElement('h1', { id: 'title' }, React.createElement('span', {}, 'Hello React'))
    // 2.渲染虚拟DOM到页面,ReactDOM.render(虚拟DOM，容器)
    ReactDOM.render(VDOM, document.getElementById('test'))
  </script>
// 一般不使用这种纯JS方式创建虚拟DOM

Virtual DOM

当组件状态 state 有更改的时候，React 会自动调用组件的 render 方法重新渲染整个组件的 UI。当然如果真的这样大面积的 *** 作 DOM，性能会是一个很大的问题，所以 React 实现了一个Virtual DOM，组件 DOM 结构就是映射到这个 Virtual DOM 上，React 在这个 Virtual DOM 上实现了一个 diff 算法，当要重新渲染组件的时候，会通过 diff 寻找到要变更的 DOM 节点，再把这个修改更新到浏览器实际的 DOM 节点上，所以实际上不是真的渲染整个 DOM 树。这个 Virtual DOM 是一个纯粹的 JS 数据结构，所以性能会比原生 DOM 快很多。

关于虚拟DOM：

本质是一个Object类型的 JS 对象（一般对象）；

虚拟DOM比较‘轻’，真实DOM比较‘重’，因为虚拟DOM只是React内部在用，无需真实DOM上那么多属性。

console.log('虚拟DOM'，VDOM)
console.log('真实DOM'，document.getElementById('test'))
// 浏览器控制台显示虚拟DOM只有少量属性，而真实DOM有很多属性

虚拟DOM最终会被React转化为真实DOM，呈现在页面上。

Data Flow

“单向数据绑定”是 React 推崇的一种应用架构的方式。当应用足够复杂时才能体会到它的好处，虽然在一般应用场景下你可能不会意识到它的存在，也不会影响你开始使用 React，你只要先知道有这么个概念。

三、React基本使用 相关js库 react.js: React核心库react-dom.js: 提供 *** 作DOM的react扩展库babel.min.js: 解析JSX语法代码转为JS代码的库。 四、React JSX

全称：JavaScript XML

react定义的一种类似于 XML 的 JS 的扩展语法：JS+XML

本质是 React.createElement(component, props,…children)方法的语法糖

作用：用来简化创建虚拟DOM

写法：

var ele = Hello JSX!

注意1: 它不是字符串，也不是HTML/XML标签

注意2: 它最终产生的就是一个 JS 对象。

标签名任意：HTML 标签或其他标签

标签属性任意: HTML标签属性或其它

基本语法规则

遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析遇到以{开头的代码，以JS语法解析: 标签中的js表达式必须用{ }包含

babel.js的作用

浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行

只要用了JSX，都要加上type="text/babel, 声明需要babel来处理

---

JSX 语法规则

定义虚拟DOM，不要写引号！

标签中混入 JS 表达式时要用 {} ；

一定注意区分：【js语句（代码)与js表达式】

表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方 a （表达式）a+b （表达式）demo(1) （表达式）arr.map() （表达式）function test（） {} （表达式）

这些都可以用自定义变量let接到值，属于表达式

语句（代码）： if() {} （语句）for() {} （语句）swith() {case:xxxx} （语句）

这些都不能赋值给变量，属于语句

样式的类名指定不要用class，而是用className.

行内样式（内联样式），要用style={{ key:value }}的形式去写；

虚拟DOM必须只有一个根标签；

标签必须闭合；

标签首字母

小写字母开头，则将该标签转为HTML中同名元素；若HTML中无该标签同名元素则报错；大写字母开头，React就去渲染对应的组件，若组件没有定义，则报错。（“xxx” is not defined）

---

五、模块与组件、模块化与组件化的理解 5.1 模块 理解：向外提供特定功能的 js 程序，一般就是一个 js 文件；为什么要拆分成模块：随着业务逻辑的增加，代码越来越多且复杂。作用：复用 js ，简化 js 的编写，提高 js 的运行效率。 5.2 组件 理解：用来实现局部功能效果的代码和资源的集合（html/css/image 等等）为什么：一个界面的功能更复杂作用：复用编码，简化项目编码，提高运行效率 5.4 模块化

当应用的 js 都以模块来编写，这个应用就是一个模块化的应用

5.5 组件化

当应用是以多组件的方式实现，这个应用就是一个组件化的应用