ReactJS

2.1、前端开发的演变

到目前为止，前端的开发经历了四个阶段，目前处于第四个阶段。这四个阶段分别是：

阶段一：静态页面阶段

在第一个阶段中前端页面都是静态的，所有前端代码和前端数据都是后端生成的。前端只是纯粹的展示功能，js脚本的作用只是增加一些特殊效果，比如那时很流行用脚本控制页面上飞来飞去的广告。

那时的网站开发，采用的是后端 MVC 模式。

Model （模型层）：提供/保存数据
Controller （控制层）：数据处理，实现业务逻辑
View （视图层）：展示数据，提供用户界面

前端只是后端 MVC 的 V。

阶段二：ajax阶段

2004年，AJAX 技术诞生，改变了前端开发。Gmail 和 Google 地图这样革命性的产品出现，使得开发者发现，前端的作用不仅仅是展示页面，还可以管理数据并与用户互动。

就是从这个阶段开始，前端脚本开始变得复杂，不再仅仅是一些玩具性的功能。

阶段三：前端MVC阶段

2010年，第一个前端 MVC 框架 Backbone.js 诞生。它基本上是把 MVC 模式搬到了前端，但是只有 M （读写数据）和 V（展示数据），没有 C（处理数据）。

有些框架提出了 MVVM模式，用 View Model 代替 Controller。Model 拿到数据以后，View Model 将数据处理成视图层（View）需要的格式，在视图层展示出来。

阶段四：SPA阶段

前端可以做到读写数据、切换视图、用户交互，这意味着，网页其实是一个应用程序，而不是信息的纯展示。这种单张网页的应用程序称为 SPA（single-page-application）。

2010年后，前端工程师从开发页面（切模板），逐渐变成了开发“前端应用”（跑在浏览器里面的应用程序）。

目前，最流行的前端框架 Vue、Angular、React 等等，都属于 SPA 开发框架。

2.2、ReactJS简介

官网： https://reactjs.org/

官方一句很简单的话，道出了什么是 ReactJS，就是，一个用于构建用户界面的JavaScript框架，是Facebook开发的一款的JS框架。

ReactJS把复杂的页面，拆分成一个个的组件，将这些组件一个个的拼装起来，就会呈现多样的页面。ReactJS可以用于 MVC 架构，也可以用于 MVVM 架构，或者别的架构。

ReactJS圈内的一些框架简介：

Flux
- Flux 是Facebook用户建立客户端Web应用的前端架构，它通过利用一个单向的数据流补充了React的组合视图组件，这更是一种模式而非框架。
Redux
- Redux 是 JavaScript 状态容器，提供可预测化的状态管理。Redux可以让React组件状态共享变得简单。
Ant Design of React
- 阿里开源的基于 React的企业级后台产品，其中集成了多种框架，包含了上面提到的Flux、Redux。
- Ant Design 提供了丰富的组件，包括：按钮、表单、表格、布局、分页、树组件、日历等。

2.3、搭建环境

2.3.1、创建项目

我们依然选择使用 UmiJS作为构建工具。

创建工程：

输入命令，进行初始化：

tyarn init -y

初始化完成：

在命令输入如下命令：

tyarn add umi  --dev  #项目中添加umi的依赖

可以看到，相关的依赖已经导入进来了。

2.3.2、编写HelloWorld程序

第一步，在工程的根目录下创建config目录，在config目录下创建config.js文件。

在UmiJS的约定中，config/config.js将作为UmiJS的全局配置文件。

在 umi中，约定的目录结构如下：

在config.js文件中输入以下内存，以便后面使用：

// 导出一个对象，暂时设置为空对象，后面再填充内容
export default {};

第二步，创建HelloWorld.js页面文件

在umi中，约定存放页面代码的文件夹是在src/pages，可以通过singular:false来设置单数的命名方式，我们采用默认即可。

在 HelloWorld.js文件中输入如下内容：

export default () => {
 return <div>hello world</div>;
}

在这里，可以会比较奇怪，怎么可以在js文件中写html代码，其实，这是react自创的写法，叫JSX，后面我们再细说。

第三步，启动服务查看页面效果

# 启动服务
umi dev

可以看到，通过 /HelloWorld路径即可访问到刚刚写的HelloWorld.js文件。

在 umi 中，可以使用约定式的路由，在 pages 下面的 JS 文件都会按照文件名映射到一个路由，比如上面这个例子，访问 /helloworld 会对应到 HelloWorld.js。

当然了，也可以自定义路由，具体的路由配置在后面讲解。

2.3.3、添加umi-plugin-react插件

umi-plugin-react插件是umi官方基于react封装的插件，包含了13个常用的进阶功能。

具体可查看： https://umijs.org/zh/plugin/umi-plugin-react.html

# 添加插件
tyarn add umi-plugin-react --dev

添加成功：

接下来，在 config.js文件中引入该插件：

export default {
  plugins: [
   ['umi-plugin-react', {
      //暂时不启用任何功能
   }]
 ]
};

2.3.4、构建和部署

现在我们写的js，必须通过umi先转码后才能正常的执行，那么我们最终要发布的项目是普通的html、js、css，那么应该怎么操作呢？

其实，通过umi是可以进行转码生成文件的，具体操作如下：

umi build

可以看到，已经生成了 index.html和umi.js文件。我们打开umi.js文件看看。

首先，看到的是 umi.js文件是一个已经压缩过的文件，然后搜索“hello world”，可以找到，我们刚刚写的代码已经被转码了。

至此，开发环境搭建完毕。

2.4、React快速入门

2.4.1、JSX语法

JSX语法就是，可以在js文件中插入html片段，是React自创的一种语法。

JSX语法会被Babel等转码工具进行转码，得到正常的js代码再执行。

使用JSX语法，需要2点注意：

1. 所有的html标签必须是闭合的，如：

hello world ，写成这样是不可以的： hello world

2.在JSX语法中，只能有一个根标签，不能有多个。

const div1 = <div>hello world</div> //正确
const div2 = <div>hello</div> <div>world</div> //错误

在JSX语法中，如果想要在html标签中插入js脚本，需要通过{}插入js脚本。

2.4.2 、组件

组件是React中最重要也是最核心的概念，一个网页，可以被拆分成一个个的组件，像这样：

在 React中，这样定义一个组件：

import React from 'react'; //第一步，导入React
class HelloWorld extends React.Component { //第二步，编写类并且继承 React.Component
  render(){ //第三步，重写render()方法，用于渲染页面
    return <div>hello world!</div> //JSX语法
 }
}
export default HelloWorld; //第四步，导出该类

查看效果：

2.4.2.1 、导入自定义组件

创建Show.js文件，用于测试导入组件：

import React from 'react'
import HelloWorld from './HelloWorld' //导入HelloWorld组件
class Show extends React.Component{
  render(){
    return <HelloWorld/>; //使用HelloWorld组件
 }
}
export default Show;

测试：

2.4.2.2 、组件参数

组件是可以传递参数的，有 2种方式传递，分别是属性和标签包裹的内容传递，具体使用如下：

import React from 'react'
import HelloWorld from './HelloWorld' //导入HelloWorld组件
class Show extends React.Component{
  render(){
    return <HelloWorld name="zhangsan">shanghai</HelloWorld>; //使用HelloWorld组件
 }
}
export default Show;

其中，name="zhangsan"就是属性传递，shanghai就是标签包裹的内容传递。

那么，在HelloWord.js组件中如何接收参数呢？

对应的也是2种方法：

属性：this.props.name 接收；

标签内容：this.props.children 接收；

使用如下：

import React from 'react'; //第一步，导入React
class HelloWorld extends React.Component { //第二步，编写类并且继承 React.Component
  render(){ //第三步，编写render()方法，用于渲染页面
    return <div>hello world! name={this.props.name}, address=
{this.props.children}</div> //JSX语法
 }
}
export default HelloWorld; //第四步，导出该类

测试：

2.4.2.3 、组件的状态

每一个组件都有一个状态，其保存在this.state中，当状态值发生变化时，React框架会自动调用render()方法，重新渲染页面。

其中，要注意两点：

一： this.state值的设置要在构造参数中完成；

二：要修改this.state的值，需要调用this.setState()完成，不能直接对this.state进行修改；

下面通过一个案例进行演示，这个案例将实现：通过点击按钮，不断的更新this.state，从而反应到页面中。

import React from 'react'
class List extends React.Component{
  constructor(props){ // 构造参数中必须要props参数
    super(props); // 调用父类的构造方法
    this.state = { // 初始化this.state
      dataList : [1,2,3],
      maxNum : 3
   };
 }
  render(){
    return (
      <div>
        <ul>
         {
            // 遍历值
            this.state.dataList.map((value,index) => {
              return <li key={index}>{value}</li>
           })
         }
        </ul>
        <button
          onClick={()=>{ //为按钮添加点击事件
            let maxNum = this.state.maxNum + 1;
            let list = [...this.state.dataList, maxNum];
            this.setState({ //更新状态值
              dataList : list,
              maxNum : maxNum
           });
         }}>
          添加
         </button>
      </div>
   );
 }
}
export default List;

初始状态：

当点击 “添加”按钮：

过程分析：

2.4.2.4 、生命周期

组件的运行过程中，存在不同的阶段。React 为这些阶段提供了钩子方法，允许开发者自定义每个阶段自动执行的函数。这些方法统称为生命周期方法（lifecycle methods）。

生命周期示例：

import React from 'react'; //第一步，导入React
class LifeCycle extends React.Component {
  constructor(props) {
     super(props);
    //构造方法
    console.log("constructor()");
 }
  componentDidMount() {
    //组件挂载后调用
    console.log("componentDidMount()");
 }
  componentWillUnmount() {
    //在组件从 DOM 中移除之前立刻被调用。
    console.log("componentWillUnmount()");
 }
  componentDidUpdate() {
    //在组件完成更新后立即调用。在初始化时不会被调用。
    console.log("componentDidUpdate()");
 }
  shouldComponentUpdate(nextProps, nextState){
    // 每当this.props或this.state有变化，在render方法执行之前，就会调用这个方法。
    // 该方法返回一个布尔值，表示是否应该继续执行render方法，即如果返回false，UI 就不会更新，
默认返回true。
    // 组件挂载时，render方法的第一次执行，不会调用这个方法。
    console.log("shouldComponentUpdate()");
 }
  render() {
    return (
      <div>
        <h1>React Life Cycle!</h1>
      </div>
   );
 }
}
export default LifeCycle;

测试结果：

PreviousUmiJS Nextnest 框架

Last updated 4 years ago

Was this helpful?