React快速入门-指南

react - JSX

React 背景介绍

• React 入门实例教程

React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。

什么是React

• A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES

  • 用来构建UI的 JavaScript库
  • React 不是一个 MVC 框架，仅仅是视图（V）层的库
• React 官网
• React 中文文档

特点

• 1 使用 JSX语法 创建组件，实现组件化开发，为函数式的 UI 编程方式打开了大门
• 2 性能高的让人称赞：通过 diff算法 和 虚拟DOM 实现视图的高效更新
• 3 HTML仅仅是个开始

> JSX --TO--> EveryThing

- JSX --> HTML
- JSX --> native ios或android中的组件（XML）
- JSX --> VR
- JSX --> 物联网

为什么要用React

• 1 使用组件化开发方式，符合现代Web开发的趋势
• 2 技术成熟，社区完善，配件齐全，适用于大型Web项目（生态系统健全）
• 3 由Facebook专门的团队维护，技术支持可靠
• 4 ReactNative - Learn once, write anywhere: Build mobile apps with React
• 5 使用方式简单，性能非常高，支持服务端渲染
• 6 React非常火，从技术角度，可以满足好奇心，提高技术水平；从职业角度，有利于求职和晋升，有利于参与潜力大的项目

React中的核心概念

• 1 虚拟DOM（Virtual DOM）
• 2 Diff算法（虚拟DOM的加速器，提升React性能的法宝）

虚拟DOM（Vitural DOM）

React将DOM抽象为虚拟DOM，虚拟DOM其实就是用一个对象来描述DOM，通过对比前后两个对象的差异，最终只把变化的部分重新渲染，提高渲染的效率

为什么用虚拟dom，当dom反生更改时需要遍历 而原生dom可遍历属性多大231个 且大部分与渲染无关 更新页面代价太大

• 如何实现一个 Virtual DOM 算法
• 理解 Virtual DOM

VituralDOM的处理方式

• 1 用 JavaScript 对象结构表示 DOM 树的结构，然后用这个树构建一个真正的 DOM 树，插到文档当中
• 2 当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异
• 3 把2所记录的差异应用到步骤1所构建的真正的DOM树上，视图就更新了

Diff算法

• Reconciliation diff
• diff算法 - 中文文档
• 不可思议的 react diff
• React diff 算法

当你使用React的时候，在某个时间点 render() 函数创建了一棵React元素树，
在下一个state或者props更新的时候，render() 函数将创建一棵新的React元素树，
React将对比这两棵树的不同之处，计算出如何高效的更新UI（只更新变化的地方）

<!-- 了解：

有一些解决将一棵树转换为另一棵树的最小操作数算法问题的通用方案。然而，树中元素个数为n，最先进的算法 的时间复杂度为O(n3) 。
如果直接使用这个算法，在React中展示1000个元素则需要进行10亿次的比较。这操作太过昂贵，相反，React基于两点假设，实现了一个O(n)算法，提升性能： -->

• React中有两种假定：

  • 1 两个不同类型的元素会产生不同的树(根元素不同结构树一定不同)
  • 2 开发者可以通过key属性指定不同树中没有发生改变的子元素

Diff算法的说明 - 1

• 如果两棵树的根元素类型不同，React会销毁旧树，创建新树

// 旧树
<div>
  <Counter />
</div>

// 新树
<span>
  <Counter />
</span>

执行过程：destory Counter -> insert Counter

Diff算法的说明 - 2

• 对于类型相同的React DOM 元素，React会对比两者的属性是否相同，只更新不同的属性
• 当处理完这个DOM节点，React就会递归处理子节点。

// 旧
<div className="before" title="stuff" />
// 新
<div className="after" title="stuff" />
只更新：className 属性

// 旧
<div style={
  {color: 'red', fontWeight: 'bold'}} />
// 新
<div style={
  {color: 'green', fontWeight: 'bold'}} />
只更新：color属性

Diff算法的说明 - 3

• 1 当在子节点的后面添加一个节点，这时候两棵树的转化工作执行的很好

// 旧
<ul>
  <li>first</li>
  <li>second</li>
</ul>

// 新
<ul>
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ul>

执行过程：
React会匹配新旧两个<li>first</li>，匹配两个<li>second</li>，然后添加 <li>third</li> tree

• 2 但是如果你在开始位置插入一个元素，那么问题就来了：

// 旧
<ul>
  <li>Duke</li>
  <li>Villanova</li>
</ul>

// 新
<ul>
  <li>Connecticut</li>
  <li>Duke</li>
  <li>Villanova</li>
</ul>

在没有key属性时执行过程：
React将改变每一个子删除重新创建，而非保持 <li>Duke</li> 和 <li>Villanova</li> 不变

key 属性

为了解决以上问题，React提供了一个 key 属性。当子节点带有key属性，React会通过key来匹配原始树和后来的树。

// 旧
<ul>
  <li key="2015">Duke</li>
  <li key="2016">Villanova</li>
</ul>

// 新
<ul>
  <li key="2014">Connecticut</li>
  <li key="2015">Duke</li>
  <li key="2016">Villanova</li>
</ul>
执行过程：
现在 React 知道带有key '2014' 的元素是新的，对于 '2015' 和 '2016' 仅仅移动位置即可 

• 说明：key属性在React内部使用，但不会传递给你的组件
• 推荐：在遍历数据时，推荐在组件中使用 key 属性：<li key={item.id}>{item.name}</li>
• 注意：key只需要保持与他的兄弟节点唯一即可，不需要全局唯一
• 注意：尽可能的减少数组index作为key，数组中插入元素的等操作时，会使得效率底下

React的基本使用

• 安装：npm i -S react react-dom
• react：react 是React库的入口点
• react-dom：提供了针对DOM的方法，比如：把创建的虚拟DOM，渲染到页面上

// 1. 导入 react
import React from 'react'
import ReactDOM from 'react-dom'

// 2. 创建 虚拟DOM
// 参数1：元素名称  参数2：元素属性对象(null表示无)  参数3：当前元素的子元素string||createElement() 的返回值
const divVD = React.createElement('div', {
  title: 'hello react'
}, 'Hello React！！！')

// 3. 渲染
// 参数1：虚拟dom对象  参数2：dom对象表示渲染到哪个元素内 参数3：回调函数
ReactDOM.render(divVD, document.getElementById('app'))

createElement()的问题

• 说明：createElement()方式，代码编写不友好，太复杂

var dv = React.createElement(
  "div",
  { className: "shopping-list" },
  React.createElement(
    "h1",
    null,
    "Shopping List for "
  ),
  React.createElement(
    "ul",
    null,
    React.createElement(
      "li",
      null,
      "Instagram"
    ),
    React.createElement(
      "li",
      null,
      "WhatsApp"
    )
  )
)
// 渲染
ReactDOM.render(dv, document.getElementById('app'))

JSX 的基本使用

• 注意：JSX语法，最终会被编译为 createElement() 方法
• 推荐：使用 JSX 的方式创建组件
• JSX - JavaScript XML
• 安装：npm i -D babel-preset-react （依赖与：babel-core/babel-loader）

注意：JSX的语法需要通过 babel-preset-react 编译后，才能被解析执行

/* 1 在 .babelrc 开启babel对 JSX 的转换 */
{
  "presets": [
    "env", "react"
  ]
}

/* 2 webpack.config.js */
module: [
  rules: [
    { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },
  ]
]

/* 3 在 js 文件中 使用 JSX */
const dv = (
  <div title="标题"