工程化开发

一、前言

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

二、使用React脚手架

1. 什么是React脚手架?

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

2. 操作步骤

全局安装create-react-app
npm install create-react-app -g
yarn add create-react-app -g
检测是否成功
create-react-app --version
图示
创建一个脚手架项目
① 第一步
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. 概述

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

2. 案例技术点拆解

多组件拆解和组合
多组件数据传递
父子组件事件回传

3. 案例实现步骤

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

4. 案例核心代码

静态组件拆分, 组合

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

注意：采用父子组件传递数据和回传, 两层没问题, 但是多层后问题就逐步显现!
头部实现
核心代码
尾部实现
作业

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

1. props父子组件消息传递

2. pubsub-js

概念：PubSub消息订阅与发布
安装
yarn add pubsub-js
使用
① 引入
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');
}
```

React：工程化开发相关推荐

前端工程化开发方案app-proto
什么是前端工程化?根据具体的业务特点,将前端的开发流程.技术.工具.经验等规范化.标准化就是前端工程化.它的目的是让前端开发能够"自成体系",最大程度地提高前端工程师的开发效率,降 ...
react项目开发步骤_成为专业React开发人员的31个步骤
react项目开发步骤我为达到可雇用水平而进行的每个项目和课程. (Every single project and course I took to reach a hireable level. ...
react前端开发_是的，React正在接管前端开发。问题是为什么。
react前端开发 by Samer Buna 通过Samer Buna 是的,React正在接管前端开发. 问题是为什么. (Yes, React is taking over front-end ...
React+Redux开发实录（一）搭建工程脚手架
React+Redux开发实录(一)搭建工程脚手架 React+Redux开发实录(二)React技术栈一览搭建工程脚手架准备工作安装node 安装git 安装一款前端IDE 推荐VSCode, ...
使用React.js开发自己的Chrome插件
文章目录 1.配置环境 2.最简项目 3.修改内容 1.配置环境先安装nodejs,下载地址:下载 | Node.js 然后打开node命令行: 更改更新源: npm config set regi ...
【转】【React Native开发】
[React Native开发]React Native控件之ListView组件讲解以及最齐全实例(19) [React Native开发]React Native控件之Touchable*系列组 ...
windows 下配置 react native 开发环境
windows 下配置 react native 开发环境安装nvm 由于react native 需要使用 NodeJs 4.0以上版本,为了方便切换NodeJs,首先我们需要安装nvm. 你可以 ...
基于webpack的前端工程化开发解决方案探索（一）：动态生成HTML
基于webpack的前端工程化开发解决方案探索(一):动态生成HTML 参考文章: (1)基于webpack的前端工程化开发解决方案探索(一):动态生成HTML (2)https://www.cnbl ...
React Native开发之必备React基础
为了帮助大家快速上手React Native开发,在这本节中将向大家介绍开发React Native所需要的一些React必备基础知识. 概述本节课将从React的特点.如何使用React.JSX语 ...
React Native开发错误警告处理总结（已解决！持续更新）
注:本文是我在开发过程中遇到问题解决方法的总结,之后会持续更新,希望帮助到更多的学习者.文中有不妥的地方希望指出共同学习,同时欢迎大神补充.(之后我会放出自己开发整理的笔记和GithubDemo地址, ...

React：工程化开发

工程化开发

一、前言

二、使用React脚手架

1. 什么是React脚手架?

2. 操作步骤

三、脚手架案例-日程表

1. 概述

2. 案例技术点拆解

3. 案例实现步骤

4. 案例核心代码

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

1. props父子组件消息传递

2. pubsub-js

React：工程化开发相关推荐

最新文章

热门文章