React中的核心概念

                                                         React中的核心概念                                                          

* 1 虚拟DOM（Virtual DOM）

* 2 Diff算法（虚拟DOM的加速器，提高React性能的法宝）

 

虚拟DOM（Vitural DOM）

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

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

VituralDOM的处理方式

* 1 用 JavaScript 对象结构表示 DOM 树的结构，而后用这个树构建一个真正的 DOM 树，插到文档当中

* 2 当状态变动的时候，从新构造一棵新的对象树。而后用新的树和旧的树进行比较，记录两棵树差别

* 3 把2所记录的差别应用到步骤1所构建的真正的DOM树上，视图就更新了

Diff算法

当你使用React的时候，在某个时间点 render() 函数建立了一棵React元素树，

在下一个state或者props更新的时候，render() 函数将建立一棵新的React元素树，

React将对比这两棵树的不一样之处，计算出如何高效的更新UI（只更新变化的地方）

 

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="标题" className="cls container">Hello JSX!</div>

)

 

/* 4 渲染 JSX 到页面中 */

ReactDOM.render(dv, document.getElementById('app'))

JSX的注意点

* 注意 1: 若是在 JSX 中给元素添加类, 须要使用 className 代替 class

* 相似：label 的 for属性，使用htmlFor代替

* 注意 2：在 JSX 中能够直接使用 JS代码，直接在 JSX 中经过 {} 中间写 JS代码便可

* 注意 3：在 JSX 中只能使用表达式，可是不能出现 语句！！！

* 注意 4：在 JSX 中注释语法：{/* 中间是注释的内容 */}

React组件

React 组件可让你把UI分割为独立、可复用的片断，并将每一片断视为相互独立的部分。

* 组件是由一个个的HTML元素组成的

* 概念上来说, 组件就像JS中的函数。它们接受用户输入（props），而且返回一个React对象，用来描述展现在页面中的内容

React建立组件的两种方式

* 1 经过 JS函数 建立（无状态组件）

* 2 经过 class 建立（有状态组件）

函数式组件 和 class 组件的使用场景说明：

1 若是一个组件仅仅是为了展现数据，那么此时就可使用 函数组件

2 若是一个组件中有必定业务逻辑，须要操做数据，那么就须要使用 class 建立组件，由于，此时须要使用 state

JavaScript函数建立

* 注意：1 函数名称必须为大写字母开头，React经过这个特色来判断是否是一个组件

* 注意：2 函数必须有返回值，返回值能够是：JSX对象或null

* 注意：3 返回的JSX，必须有一个根元素

* 注意：4 组件的返回值使用()包裹，避免换行问题

function Welcome(props) {

  return (

    // 此处注释的写法

    <div className="shopping-list">

      {/* 此处 注释的写法 必需要{}包裹 */}

      <h1>Shopping List for {props.name}</h1>

      <ul>

        <li>Instagram</li>

        <li>WhatsApp</li>

      </ul>

    </div>

  )

}

 

ReactDOM.render(

  <Welcome name="jack" />,

  document.getElementById('app')

)

class建立

在es6中class仅仅是一个语法糖，不是真正的类，本质上仍是构造函数+原型 实现继承

// ES6中class关键字的简单使用

 

// - **ES6中的全部的代码都是运行在严格模式中的**

// - 1 它是用来定义类的，是ES6中实现面向对象编程的新方式

// - 2 使用`static`关键字定义静态属性

// - 3 使用`constructor`构造函数，建立实例属性

// - [参考](http://es6.ruanyifeng.com/#docs/class)

 

// 语法：

class Person {

  // 实例的构造函数 constructor

  constructor(age){

    // 实例属性

    this.age = age

  }

  // 在class中定义方法 此处为实例方法 经过实例打点调用

  sayHello () {

    console.log('你们好，我今年' + this.age + '了');

  }

 

  // 静态方法 经过构造函数打点调用 Person.doudou()

  static doudou () {

    console.log('我是小明，我新get了一个技能，会暖床');

  }

}

// 添加静态属性

Person.staticName = '静态属性'

// 实例化对象

const p = new Person(19)

// 实现继承的方式

class American extends Person {

  constructor() {

    // 必须调用super(), super表示父类的构造函数

    super()

    this.skin = 'white'

    this.eyeColor = 'white'

  }

}

 

// 建立react对象

// 注意：基于 `ES6` 中的class，须要配合 `babel` 将代码转化为浏览器识别的ES5语法

// 安装：`npm i -D babel-preset-env`

//  react对象继承字React.Component

class ShoppingList extends React.Component {

  constructor(props) {

    super(props)

  }

  // class建立的组件中 必须有rander方法 且显示return一个react对象或者null

  render() {

    return (

      <div className="shopping-list">

        <h1>Shopping List for {this.props.name}</h1>

        <ul>

          <li>Instagram</li>

          <li>WhatsApp</li>

        </ul>

      </div>

    )

  }

}