React技术框架

# 什么是 React

React 用来构建UI的 JavaScript库,而不是一个 MVC 框架，仅仅是视图（V）层的库。

# React 基本原理

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

# 官方参考文档

# React 基本使用

# 1、直接引 js 入文件

直接去官网下载并引入这三个库： react.min.js 、react-dom.min.js 和 babel.min.js

react.min.js - React 的核心库
react-dom.min.js - 提供与 DOM 相关的功能
babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包（package）一同使用可以让源码的语法渲染上升到一个全新的水平。
注意

如果需要使用 JSX，则 <script> 标签的 type 属性需要设置为 text/babel。

# 2、直接使用 BootCDN 的 React CDN 库

<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>

1
2
3
4

# 3、官方提供的 CDN 地址：

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

1
2
3
4

# 4、通过 npm 安装 React

国内使用 npm 速度很慢，你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

npm install -g cnpm --registry=https://registry.npm.taobao.org
npm config set registry https://registry.npm.taobao.org

1
2

这样就可以使用 cnpm 命令来安装模块了：

cnpm install [name]

# 5、（推荐）使用 create-react-app 快速构建 React 开发环境

create-react-app 是来自于 Facebook，通过该命令我们无需配置就能快速构建 React 开发环境。

创建 JS 模板项目

npm install -g create-react-app  
create-react-app my-app
cd my-app/
npm start

#or
cnpm install -g create-react-app  
create-react-app my-app
cd my-app/
npm start

#or
npx create-react-app my-app
cd my-app
npm start

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

创建 TS 模板项目

npm install -g create-react-app
create-react-app my-app --typescript
cd my-app/
npm start

#or
cnpm install -g create-react-app  
create-react-app my-app --typescript
cd my-app/
npm start

#or
npx create-react-app my-app --typescript
cd my-app
npm start

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 组件的生命周期

组件的生命周期包含三个阶段：创建阶段（Mounting）、运行和交互阶段（Updating）、卸载阶段（Unmounting）

# 1、创建阶段（Mounting）

该阶段的函数只执行一次

constructor() //获取props 初始化state 通过 constructor() 的参数 props 获取
componentWillMount() //组件被挂载到页面之前调用，其在render()之前被调用，因此在这方法里同步地设置状态将不会触发重渲染，无法获取页面中的DOM对象，可以调用 setState() 方法来改变状态值，发送ajax请求获取数据
render()  //渲染组件到页面中，无法获取页面中的DOM对象，不要在render方法中调用 setState() 方法，否则会递归渲染，状态改变会重新调用render()，render()又重新改变状态
componentDidMount() //组件已经挂载到页面中，可以进行DOM操作，比如：获取到组件内部的DOM对象，可以发送请求获取数据，可以通过 setState() 修改状态的值，在这里修改状态会重新渲染

1
2
3
4

# 2、运行和交互阶段（Updating）

该阶段的函数执行多次，每当组件的props或者state改变的时候，都会触发运行阶段的函数

componentWillReceiveProps() //组件接受到新的props前触发这个方法，当前组件props值，可以通过 this.props 获取到上一次的值，若你需要响应属性的改变，可以通过对比this.props和nextProps并在该方法中使用this.setState()处理状态改变，修改state不会触发该方法
shouldComponentUpdate() //根据这个方法的返回值决定是否重新渲染组件，返回true重新渲染，否则不渲染，通过某个条件渲染组件，降低组件渲染频率，提升组件性能，如果返回值为false，那么，后续render()方法不会被调用，这个方法必须返回布尔值！！！，根据随机数决定是否渲染组件
componentWillUpdate() //组件将要更新，最新的属性和状态对象，不能修改状态 否则会循环渲染
render() //重新渲染组件，与Mounting阶段的render是同一个函数，这个函数能够执行多次，只要组件的属性或状态改变了，这个方法就会重新执行
componentDidUpdate() //组件已经被更新，旧的属性和状态对象

1
2
3
4
5

# 3、卸载阶段（Unmounting）

组件卸载期间，函数比较单一，只有一个函数，这个函数也有一个显著的特点：组件一辈子只能执行依次，只要组件不再被渲染到页面中，那么这个方法就会被调用（渲染到页面中 -> 不再渲染到页面中）

componentWillUnmount() //在卸载组件的时候，执行清理工作

# 4、生命周期案例

import React, { Component } from 'react'
class Test extends Component {
    constructor() {
        super()
        this.state = {
            text: 1
        }
        console.log('生命周期函数----- constructor --- 初始化state')
    }
    static getDerivedStateFromProps(nextProps, prevState) {
        // 必须返回一个 state
        // 实例化组件的时候 和  当组件接收新的 props 时 该生命周期函数被执行
        console.log('生命周期函数----- static getDerivedStateFromProps')
        return null
    }
    shouldComponentUpdate() {
        // 该函数必须返回一个布尔值 来控制是否更新
        console.log('生命周期函数----- shouldComponentUpdate 是否同意组件更新')
        return true
    }
    handleClick = () => {
        this.setState({
        text: this.state.text + 1
        })
    }
    render() {
        console.log('生命周期函数----- render 渲染到页面')
        return (
        <div>
            <button onClick={this.handleClick}>+</button>
            <span>{this.state.text}</span>
        </div>
        )
    }
    componentDidMount() {
        // 这个生命周期函数内 允许发送网络请求修改 state
        console.log('生命周期函数----- componentDidMount  组件装配完毕')
    }
    // 自定义代码片段
    componentDidUpdate() {
        console.log('生命周期函数----- componentDidUpdate  组件更新完毕')
    }
}
export default Test

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

::: info React 16.8 带来的全新特性，函数组件将替代 class 组件的的写法。例如： :::

class 组件

import React from 'react';
import PropTypes from 'prop-types';
class Hello extends React.Component {
  render() {
    const {greeting, firstName} = this.props;
    return (
      <button className="but" onClick={()=>{ alert('click'); }}>
        {greeting} {firstName}
      </button>
    );
  }
}
export default Hello;

1
2
3
4
5
6
7
8
9
10
11
12
13

函数组件

import React from 'react';
import PropTypes from 'prop-types';
function Hello({greeting, firstName}) {
    return (
        <button className="but" onClick={()=>{ alert('click'); }}>
        {greeting} {firstName}
        </button>
    );
}
export default Hello;

1
2
3
4
5
6
7
8
9
10

#React

上次更新: 2024/01/30, 00:35:17

← React使用State Hook React组合与继承→