一：前端开发的演变

二：ReactJS简介

三：搭建环境

四：React快速入门

一：前端开发的演变

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

阶段一：静态页面阶段

在第一个阶段中前端页面都是静态的，所有前端代码和前端数据都是后端生成的。前端只是纯粹的展示功能， 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 开发框架。

二：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 提供了丰富的组件，包括：按钮、表单、表格、布局、分页、树组件、日历等。

三：搭建环境

创建项目

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

创建工程：

输入命令，进行初始化：

tyarn init -y

初始化完成：

在命令输入如下命令：

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

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

编写HelloWorld程序

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

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

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

在confifig.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 。

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

添加 umi-plugin-react 插件

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

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

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

添加成功：

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

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

构建和部署

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

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

umi build

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

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

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

四：React快速入门

JSX语法

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

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

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

所有的html标签必须是闭合的
在JSX语法中，只能有一个根标签，不能有多个

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

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

组件

组件是 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; //第四步，导出该类

查看效果：

导入自定义组件

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

import React from 'react'
import HelloWorld from './HelloWorld' //导入HelloWorld组件

class Show extends React.Component{
render(){

return <HelloWorld/>; //使用HelloWorld组件

}
}

export default Show;

测试：

组件参数

组件是可以传递参数的，有 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; //第四步，导出该类

测试：

组件的状态

每一个组件都有一个状态，其保存在 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;

初始状态：

当点击“添加”按钮：

过程分析：

生命周期

组件的运行过程中，存在不同的阶段。 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;

测试结果：