React工程化开发

一、使用React脚手架

1）react脚手架是用来帮助我们快速创建一个基于react库的模板项目, 主要包括三部分：模板项目所有需要的配置，模板项目所有需要的依赖、安装/编译/运行的环境。

2）使用脚手架开发的项目一定是要遵循模块化、组件化、工程化的；在react中提供了一个用于创建react项目的脚手架库：create-react-app。

3）全局安装create-react-app。

yarn add create-react-app -g

4）创建项目并运行。

create-react-app demo
yarn start

二、脚手架项目结构

1. React.StrictMode

1）作用

• 识别具有不安全生命周期的组件
• 有关旧式字符串ref用法的警告
• 关于已弃用的findDOMNode用法的警告
• 检测意外的副作用
• 检测遗留 context API

2）注意：严格模式检查只在开发模式下运行，不会与生产模式冲突。

2. serviceWorker.unregister()

1）作用：渐进式 Web 应用程序(PWA)

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

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

1. props父子组件消息传递

2. pubsub-js

1）概念：PubSub消息订阅与发布。

2）安装。

yarn add pubsub-js

3）使用。

1. 引入：

import PubSub from ‘pubsub-js’

2. 发布消息：

 PubSub.publish('addTodo', todo);

3. 在componentDidMount中订阅消息：

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

4. 在componentWillUnMount中取消消息订阅：

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