学习React框架-总结

参加了华为云的大前端全栈成长计划学习课程，每次学习一个新的知识后都要总结一下学习的过程，这样有助于自己的知识整理，内容回顾，加深记忆。从前端基础Html，CSS，JavaScript的学习，移动端H5开发的学习，到前端框架NodeJs、Vue的学习，现在已经到了最后一个阶段了。既然想在技术这个行业成长，那就要时刻保持对新技术和流行技术的敏感性，而React，Vue和Angular已占领了前端的大部分市场，因此我们也要学习和了解这些主流框架方面的知识。

这篇文章我们主要来总结一下React的学习过程，React是一个声明式，高效且灵活的用于构建用户界面的JavaScript库，主要用来构建UI，是起源于Facebook的一个内部项目。React的生态完善，社区活跃，官方文档也比较详细，学起来也比较容易。可以参考官方文档：React 

创建项目

1.静态页面创建

页面直接引入React，ReactDOM的js文件：react.js，react-dom.js，

页面CDN引入：

React：https://cdn.bootcdn.net/ajax/libs/react/16.14.0/umd/react.development.js

ReactDOM：https://cdn.bootcdn.net/ajax/libs/react-dom/16.14.0/cjs/react-dom.development.js

2.通过脚手架创建

全局安装：npm install -g create-react-app

创建项目：create-react-app react-demo

有了vue的基础，我们直接通过脚手架创建项目，开始我们React的学习旅程。

目录结构

react-demo
--node_modules   // 项目依赖包
--public   // 公共资源文件，如：图片，json文件等
--src        // 项目页面组件，样式，脚本文件，路由等
--package.json  // 项目webpack配置和包管理文件
--README.md  // 项目说明文件

运行：npm run start

项目模板的初始页面就可以访问了：http://localhost:3000/

渲染组件

文件 src/index.js

可以看到 ReactDOM.render() ，渲染组件（App），把模板转换成html语言并插入到指定的节点。

导入 react（import React from 'react'），react-dom（import ReactDOM from 'react-dom'）

文件src/App.js

这里使用了JSX语法写html页面，遇到html标签（例如：<>）就用html解析，遇到代码块（例如：{ }）就用javascript规则解析。

可以尝试修改里面的内容，预览效果。

数据绑定

React里面没有像Vue里面那么简单的数据绑定功能，这里需要我们自己去完成表单控件的数据绑定的功能。

使用状态 state 存储输入控件的值，使用 onChange 的回调函数，通过 this.setState 修改 state 里面的值，每次修改完会自动调用 this.render 方法，再次渲染组件。这样就可以实现输入框的数据绑定。

import React, { Component } from 'react'

export default class AddUser extends Component {
    // 定义状态
    state = {
        userName: "",
        userAge: ""
    }
    // 定义表单控件输入框事件
    handleChange = (event)=>{
        // 获取控件名称 name
        const name = event.target.name;
        this.setState({
            [name]: event.target.value   // 获取控件的值
        });
    }
    // 定义按钮事件
    handleAddUser = () => {
        console.log("用户名和年龄：", this.state)
    }
    render() {
        return (
            <div>
                <div><input name="userName" value={this.state.userName} onChange={this.handleChange} placeholder="请输入用户名" /></div>
                <div><input name="userAge" value={this.state.userAge} onChange={this.handleChange} placeholder="请输入年龄" /></div>
                <div><input onClick={this.handleAddUser} value="添加"/></div>
            </div>
        )
    }
}

生命周期

React中组件的生命周期分为三个状态，Mounting是已经插入真实DOM，Updating是正在被重新渲染，Unmounting是已移出真实DOM。每个状态都有两种处理函数，will函数是进入状态之前，did函数是进入状态之后，共有五个函数如下：

componentWillMount()

componentDidMount()，一般会在这个里面请求数据

componentWillUpdate(object nextProps,object nextState)

componentWillUpdate(object prevState, object prevState)

componentWillUnMount()，这里面一般会清除定时器，清空对象

唯一ID生成器

nanoid是一个非常小巧，安全友好的JavaScript唯一ID生成器，比 uuid 更可靠和易用，源码地址：https://github.com/ai/nanoid

在模拟添加数据的时候，一般都会需要一个唯一ID值，那么我们就使用 nanoid 来生成这个ID值。

安装：npm install nanoid --save

导入：import { nanoid } from 'nanoid'

使用：const id = nanoid();

其它使用方法参考文档：https://www.npmjs.com/package/nanoid

Props

Props 是只读的，不能修改自身的props，父子组件传值就要通过 props 来完成。

Props 验证使用 propTypes，它可以保证我们的应用组件被正确使用。参考：https://www.npmjs.com/package/prop-types

安装：npm install prop-types --save

发布订阅（pubsub-js）

React的父子组件之间可以通过props传递值，如果组件和组件之间需要传值的话要借助它们的父组件进行传值，这样父组件需要定义state和写好多回调函数。如果想在任意组件传递数据可以使用 pubsub-js 来完成。

安装：npm install pubsub-js --save

导入：import PubSub from 'pubsub-js'

使用：

PubSub.publish('name', param)   // 发布订阅，name: 发布的消息名，param：提供给订阅者的参数

PubSub.subscribe('name', func)  // 订阅消息，name: 发布的消息名，func：事件的监听函数

var func = function(msg, data) {

    console.log(msg,data);

}

PubSub.unsubscribe('name')  // 取消订阅

有关 pubsub-js 的其它用法，可以参考文档：https://www.npmjs.com/package/pubsub-js

调试工具

谷歌浏览器安装插件：react developer tools，打开开发者工具，调试窗口如下图：