学习react基础(1)_虚拟dom、diff算法、函数和class创建组件

最新推荐文章于 2024-04-30 10:50:19 发布

六卿

最新推荐文章于 2024-04-30 10:50:19 发布

阅读量707

点赞数 3

分类专栏： # react 文章标签： react.js javascript class

本文链接：https://blog.csdn.net/qq_43291759/article/details/120526187

版权

react 专栏收录该内容

48 篇文章 3 订阅

订阅专栏

React中的核心概念

1.虚拟DOM
2.Diff算法(虚拟dom的加速器，提升react性能的法宝)

虚拟DOM

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

为什么用虚拟dom？

当dom发生更改时需要遍历，而原生dom可遍历属性多达231个，且大部分与渲染五官，更新页面代价太大。

虚拟dom的处理方式？

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

根元素 div ⇒ span 直接销毁整个dom树，重新创建新树。

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属性

当节点相同时候，会比较属性，会进行一个属性更新的操作。

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

父级标签判断完成后，会子级逐个进行比较，对没有的进行新增操作。

3：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属性

为了解决上面的问题，增加了 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' 仅仅移动位置即可

对没有的dom进行新增操作，对已经有的进行移动操作。

1：key属性在React内部使用，但是不会传递给组件。
2：推荐：在遍历的时候，推荐给组件中使用key属性，绑定唯一key值。
3：注意：key只需要保持与他自己的兄弟节点位移即可，不需要全局唯一。
4：尽可能的减少数组的index作为key，数组中插入的元素的等操作时，会效率低下。

React的基本使用

需要安装 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'))

使用react上的创建元素的方法创建虚拟dom，使用react-dom上的render方法，将虚拟dom渲染到真实dom上。

由于react.createElment的创建方式不太友好，所以诞生了jsx的形式来实现虚拟dom。

JSX 的基本使用

jsx语法最终还是会被编译成createElement()方法。
JSX-javascript xml
安装
npm i -D babel-preset-react
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使用hemlFor替代
2：在jsx中直接使用js代码，直接在jsx中通过{}中间写js代码即可
3：在jsx中只能使用表达式，但是不能出出现语句
4：在jsx中注释：{/注释语句/}

React组件

react组件可以吧UI分割为独立、可复用的片段，并将每一片段视为独立的部分。
组件是由一个个的HTML元素组成的。
概念上来讲，组件就像JS中的函数，他们接受用户输入(props)，并且返回一个React对象，用来描述展示在页面中的内容。

React创建组件的两种形式

1：通过js函数创建无状态组件
2：通过class创建有状态组件

函数式组件和calss组件的使用场景：
1：如果一个组件仅仅为了展示数据那么此时就可以使用函数组件
2：如果一个组件中有一定的业务逻辑，需要操作数据，那么就需要使用class创建组件，因为此时需要使用state.

js函数创建组件

1：函数名称必须为大写字母开头,React通过这个特点判断是不是一个组件。
2：函数必须有返回值，返回值可以是jsx对象或者null
3：返回jsx，只能有一个根元素
4：组件的返回值使用()包裹，避免换行问题。

function Amyfun(){
	return (
			<div className="zjq">
				我是一个函数组件，我的name是{props.name}
			</div>
		  )
}
ReactDOM.render(
		<Amyfun name="zjq" />,
		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>
    )
  }
}