React：工程化开发

工程化开发

一、前言

1. 在企业中用react进行项目开发, 都是基于react的脚手架的, 我们称之为SPA(Singer Page Application)应用;
2. 在这些应用中, 我们会用到路由, 网络, 状态管理等等全家桶体系的知识; 也会进一步运用ES6/7语法, 构架工具, 架构, 设计模式等等。

二、使用React脚手架

1. 什么是React脚手架?

1. react脚手架是用来帮助我们快速创建一个基于react库的模板项目, 主要包括三部分:
   ① 模板项目所有需要的配置
   ② 模板项目所有需要的依赖
   ③ 安装/运行/编译的环境，可以直接跑起来
2. 使用脚手架开发的项目一定是要遵循模块化、组件化、工程化的；在react中提供了一个用于创建react项目的脚手架库: create-react-app
3. 通常项目的整体技术配置是：react + react-?? + es6/7

2. 操作步骤

1. 全局安装create-react-app
   npm install create-react-app -g
yarn add create-react-app -g
   检测是否成功
   create-react-app --version
   图示
   

2. 创建一个脚手架项目
   ① 第一步
   1. create-react-app hk-react-demo
   2. cd hk-react-demo
   3. npm start
   ② 第二步
   运行
   成功截图
   

   ③ 第三步

   1. 脚手架项目结构和运行结果
      ① React.StrictMode：在开发模式下使用严格的语法模式
      1. 作用
      1）识别具有不安全生命周期的组件
      2）有关旧式字符串ref用法的警告
      3）关于已弃用的findDOMNode用法的警告
      4）检测意外的副作用
      5）检测遗留 context API
      2. 注意
      严格模式检查只在开发模式下运行，不会与生产模式冲突
      ② serviceWorker.unregister()

      1. 作用
         渐进式 Web 应用程序(PWA)
      2. 使用
         如果你希望应用程序能脱机工作并加载更快
         那么可以将unregister() 改为 register()
         但是，存在一些陷阱，慎用

   2. 去除杂七杂八，写一个最精简的React案例，如下图所示：
      ① 图示
      

      ② 效果
      

三、脚手架案例-日程表

1. 概述

1. 日程表案例无论是在react中，还是在vue中都是十分经典的入门级Demo，非常有助于帮助我们理解和吸收脚手架开发思想，以及vuex或者react-redux状态管理。
2. 我们先不用redux状态管理方式实现, 而是采用传统的方式实现, 看看多组件数据如何传递和回传?
3. 案例运行效果如下
   

2. 案例技术点拆解

1. 多组件拆解和组合
2. 多组件数据传递
3. 父子组件事件回传

3. 案例实现步骤

1. 使用命令create-react-app hk-todo创建一个新的项目
2. 删除不需要的代码文件
   
3. 将index.js和App.js中的代码删除掉
   
4. 新建组件components文件夹，并在其中新建头部、尾部、列表、列表项组件
   

4. 案例核心代码

1. 静态组件拆分, 组合
   

   呈现效果
   注意点：必须要充分考虑组件该拆分到什么度才合适, 拆的太细, 数据传递链条太长; 拆的太大, 耦合性太高!

2. 列表逻辑实现
   
   注意：采用父子组件传递数据和回传, 两层没问题, 但是多层后问题就逐步显现!

3. 头部实现
   核心代码

4. 尾部实现
   作业

四、工程化中常用的通信方式

1. props父子组件消息传递

2. pubsub-js

1. 概念：PubSub消息订阅与发布
2. 安装
   yarn add pubsub-js
3. 使用
   ① 引入
   import PubSub from ‘pubsub-js’
   ② 发布消息
   PubSub.publish('addTodo', todo);
   ③ 在componentDidMount中订阅消息

   PubSub.subscribe('addTodo',(msg, data) => {
   	if(msg === 'addTodo'){
   		this.addOneTodo(data);
   	}
   })
   

   ④ 在componentWillUnMount中取消消息订阅

   componentWillUnmount() {
   	PubSub.unsubscribe('addTodo');
   }