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>

    )

  }

}

React中的核心概念

React中的核心概念

猜你喜欢