基于svg的涂鸦组件（一）——构建思路

作为涂鸦项目的第一篇文章，该文章先总体介绍一下项目的构建思路，重点介绍一下组件间的通信方式。 该项目是基于webpack@3.x.x构建的多页应用，使用ES6开发，以组件的方式组织代码。

项目结构说明

git clone项目后（文末附上该项目github仓库地址），npm i安装相关依赖，npm run start即可启动项目，默认访问的是项目根目录下index.html页面。 项目的主目录结构如下图所示：
|-- index.html |-- package.json |-- build | |-- app.js //webpack构建后的js文件 |-- src | |-- app.js //入口文件 | |-- components | | |-- header.jsx //Header组件 | | |-- main.jsx //Main组件 | | |-- footer.jsx //Footer组件 | |-- index.html //首页模板文件 | |-- style | | |-- index.less //主样式文件 |-- dist | |-- app.js //webpack构建后的js文件 | |-- app.css //webpack构建后的css文件

组件间的通信方式说明

#### 方式一：父子组件通信 > 在子组件中通过this.props.xxx获取父组件传递的数据，而父组件通过调用子组件的某一个函数给子组件传递数据。

方式二：全局数据通信

通过创建一个全局数据对象，然后在组件中通过React.context的Consumer对象获取全局数据。

方式三：使用pubsub(发布-订阅)模式

核心思想是通过发布和订阅的方式，来实现组件之间的通信。

方式四：组件的生命周期函数

组件的生命周期函数主要用于组件的生命周期钩子函数，比如componentDidMount、componentWillUnmount等，通过监听组件的生命周期函数可以实现组件之间的通信。

方式五：组件的ref属性

组件的ref属性可以获取组件的DOM节点，这样就可以通过DOM节点来实现组件之间的通信。

总结

组件间的通信方式有很多种，每种方式都有其优缺点，需要根据具体的项目需求来选择使用哪种方式。总体来说，推荐使用pubsub模式，优点是代码可读性高，缺点是需要维护一个全局数据对象。

该项目中，使用了pubsub模式来实现组件之间的通信。具体实现方式是通过创建一个名为pubsub的全局数据对象，然后在组件中通过pubsub.subscribe()和pubsub.publish()方法来实现数据的发布和订阅。

该项目github仓库地址：https://github.com/xxx/xxx