趣味小剧场：
梦想这东西和经典一样，永远不会因为时间而褪色，反而更显珍贵。
潘金莲：“大郎，起来喝汤了！
”
咕咚！咕咚！。。咕咚！
武大郎：“啊。真香！这是什么汤
”
潘金莲：“当然是鸡汤呀”
武大郎：“汤。汤。。汤里有毒。。。”
潘金莲：“对呀对呀，大郎你好棒呀”
倾刻！大郎卒
剧情简介：
锵哥：“哈喽，各位粉丝们，我们又见面了啦”
粉丝路人甲：“今天锵哥带大家聊什么呢？”
锵哥：“放心是干货
”
锵哥：“咱们今天来聊一聊React组件，在React的世界里，可以说是万物皆为组件，组件设计的好坏，决定了你的房屋的根基是否稳固”
粉丝路人甲：“那么我们该如何写好一个组件呢？”
锵哥：“首先你要知道什么样的组件设计，才是一个高质量的组件”
粉丝路人甲：“板凳已就位”
正文：
章节：《深入浅出React和Redux》(第二章：设计高质量的React组件)
1.作为软件设计的通则，组件的划分要满足高内聚（High Cohesion）和低耦合（Low Coupling）的原则。
2.高内聚指的是把逻辑紧密相关的内容放在一个组件中。
3.低耦合指的是不同组件之间的依赖关系哟啊尽量弱化，也就是每个组件要尽量独立。保持整个系统的低耦合度。
4.prop是组件的对外接口，state是组件的内部状态，对外用prop，对内用state。
5.在React中，prop（property的简写）是从外部传递给组件的数据，一个React组件通过定义自己能够接受的prop就定义了自己的对外公关接口。
6.每个React组件都是独立存在的模块，组件之外的一切都是外部世界，外部世界就是通过prop来和组件对话的。
7.既然prop是组件的对外接口，那么就应该有某种方式让组件声明自己的接口规范。简单说，一个组件应该可以规范以下这方面：
A：这个组件支持哪些prop
B：每个prop应该是什么样的格式
8.propTypes检查是一个辅助开发的功能，并不会改变组件的行为。
9.最好的方式是，开发者在代码中定义propTypes，在开发过程中避免犯错，但是在发布产品代码时，用一种自动的方式将propTypes去掉，这样最终部署到产品环境的代码就会更优。现有的babel-react-optimize就有这个功能，可以通过npm安装，但是应该确保只在发布产品代码时使用它。
10.由于React组件不能修改传入的prop，所以需要记录自身数据变化，就要使用state。
11.我们可以使用React的defaultProps功能来设置prop的默认值。
12.this.setState()函数所做的事情，首先是改变this.state的值，然后驱动组件经历更新过程，这样才会有机会让this.state里新的值出现在界面上。
13.React严格定义了组件的生命周期，生命周期可能会经历如下三个过程；
A:装载过程（Mount）,也就是把组件第一次在DOM树中渲染的过程
B:更新过程（Update），当组件被重新渲染的过程
C:卸载过程（Unmount），组件从DOM中删除的过程
三种不同的过程，React库会依次调用组件的一些成员函数，这些函数称为生命周期函数，所以，要定制一个React组件，实际上就是定制这些生命周期函数。
14.一个React组件需要构造函数，往往是为了下面的目的：
A:初始化state，因为组件生命周期中任何函数都可能要访问state，那么整个生命周期中第一个被调用的构造函数自然是初始化state最理想的地方
B:绑定成员函数的this环境
15.render函数无疑是React组件中最重要的函数，一个React组件中可以忽略其他所有函数都不实现，但是一定要实现render函数，因为所有React组件的父类React.Component类对除render之外的生命周期函数都有默认实现。
16.componentDidMount可不是紧跟着render函数被调用，当所有三个组件对的render函数都被调用之后，三个组件的componentDidMount才连在一起被调用。
17、componentDidMount只能在浏览器端被调用，在服务器端使用React的时候不会被调用。
18.关于这个componentWillReceiveProps存在一些误解。在互联网上有些教材声称这个函数只有在当组件的props发生改变的时候才会被调用，其实是不正确的，实际上，只要是父组件的render函数被调用，在render函数中被渲染的子组件就会经历更新过程，不管父组件传给子组件的props有没有变化，都会触发子组件的componentWillReceiveProps函数。
19.在React组件组合中，完全可以只渲染一个子组件，而其他组件完全不需要渲染，这是提高React性能的重要方式。
20.除了render函数，shouldComponentUpdate可能是React组件生命周期中最重要的一个函数了。说render函数重要，是因为render函数决定了改渲染生命，而说shouldComponentUpdate函数重要，是因为它决定了一个组件生命时候不需要渲染。
21.componenetDidUpdate函数并不是只在浏览器端才执行的，无论更新过程发生在服务器端还是浏览器端，改函数都会被调用。
22正常情况下服务器端不会调用componenetDidUpdate函数，如果调用了，说明我们的程序有错误，需要改进。
观后小剧场：
粉丝路人甲：“哇哦，原来是酱紫呀，妈妈再也不用担心我的组件了，锵哥，刚才有人找你”
锵哥：“哈？谁呀”
粉丝路人甲：“好像是导演”
导演：“咔！那个谁？放广告啦！”
锵哥：“好嘞”
广告：
本人从事全栈工程师，目前主要工作能力涵盖的范围有：android，ios，h5，pcWeb，react，vue，node，java服务端，微信服务号，微信小程序，支付宝生活号，支付宝小程序。
本公众号会不定期的将自己的研发感悟，以及心得笔记无私奉献给大家。还等啥，赶快上车吧，铁子们！！！（还会有其他的福利哦！快来吧）
官方订阅号：锵哥的觉悟
微信号：DY_suixincq
二维码：
