欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

ReactJS入门

程序员文章站 2022-05-09 13:49:07
...

1、前端开发的演变

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

阶段一:静态页面阶段

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

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

  • Model(模型层):提供/保存数据
  • Controller(控制层):数据处理,实现业务逻辑
  • View(视图层):展示数据,提供用户界面

前端只是后端 MVC 的 V。

阶段二:ajax阶段

2004年,A JAX 技术诞生,改变了前端开发。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、ReactJS简介

官网: https://reactjs.org/ ReactJS入门

官方一句很简单的话,道出了什么是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提供了丰富的组件,包括:按钮、表单、表格、布局、分页、树组件、日历等。

3、搭建环境

3.1、创建项目

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

创建工程: ReactJS入门

ReactJS入门

ReactJS入门

输入命令,进行初始化:

tyarn init -y

ReactJS入门

在命令输入如下命令:

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

ReactJS入门

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

3.2、编写HelloWorld程序

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

在UmiJS的约定中,config/config.js将作为UmiJS的全局配置文件。 在umi中,约定的目录结构如下:

├─ dist/                            // 默认的 build 输出目录
├─ mock/                            // mock 文件所在目录,基于 express
├─ config/
    ├─ config.js                    // umi 配置,同 .umirc.js, 二选一
├─ src/                             // 源码目录,可选
    ├─ layouts/index.js             // 全局布局
    ├─ pages/                       // 页面目录,里面的文件及路由
        ├─ .umi/                    // dev 临时目录,需添加到 .gitignore
        ├─ .umi-production/         // build 临时目录,会自动删除
        ├─ document.ejs             // HTML 模板
        ├─ 404.js                   // 404 页面
        ├─ page1.js                 // 页面1,任意命名,到处 react 组件
        ├─ page1.test.js            // 用例文件,umi test 会匹配所有 .test.js 和 .e2e.js 结尾文件
        ├─ page2.js                 // 页面2,任意命名
    ├─ global.css                   // 约定的全局样式文件,自动引入,也可以用global.less
    ├─ global.js                    // 可以在这里加入 polyfill
├─ .umirc.js                        // umi 配置,同 config/config.js, 二选一
├─ .env                             // 环境变量
├─ package.json

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

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

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

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

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

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

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

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

#启动服务
umi dev

ReactJS入门

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

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

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

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

添加成功: ReactJS入门

接下来,在config.js文件中引入该插件:

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

3.4、构建和部署

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

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

umi build

ReactJS入门

ReactJS入门

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

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

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

4、React快速入门

4.1、JSX语法

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

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

使用JSX语法,需要2点注意:

  1. 所有的html标签必须是闭合的,如:
<div>hello world</div>
# 写成这样是不可以的:
<div>hello world
  1. 在JSX语法中,只能有一个根标签,不能有多个。
const div1 = <div>hello world</div> //正确
const div2 = <div>hello</div> <div>world</div> //错误

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

export default () => {
    function name() {
        return "李四";
    }
    // 引用js脚本 使用 { } 插入脚本
    return <div>hello world {name()}</div>;
}

4.2、组件

件是React中最重要也是最核心的概念,一个网页,可以被拆分成一个个的组件, 像这样: ReactJS入门React中,这样定义一个组件:

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

查看效果: ReactJS入门

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;

测试: ReactJS入门

4.2.2、组件参数

组件是可以传递参数的,有2种方式传递,分别是属性和标签包裹的内容传递,具体使用如下,修改Show.js:

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 接收;

使用如下,修改HelloWorld.js:

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; //第四步,导出该类

测试: ReactJS入门ReactJS入门

4.2.3、组件的状态

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

其中,要注意两点:

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

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

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

新建一个List.js 文件:

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;

初始化状态: ReactJS入门

当点击“添加”按钮: ReactJS入门

过程分析: ReactJS入门

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;

测试结果: ReactJS入门

源代码获取

本文首发于公众号「晓明的30天实验室」,微信公众号里回复 11299 获取源代码地址;

如果你觉得文章还不错,请大家点赞分享下。你的肯定是我最大的鼓励和支持。