共计 2515 个字符，预计需要花费 7 分钟才能阅读完成。
趣味小剧场：
梦想这东西和经典一样，永远不会因为时间而褪色，反而更显珍贵。
潘金莲：“大郎，起来喝汤了！”
咕咚！咕咚！。。咕咚！
武大郎：“啊。真香！这是什么汤 ”
潘金莲：“当然是鸡汤呀”
武大郎：“汤。汤。。汤里有毒。。。”
潘金莲：“对呀对呀，大郎你好棒呀”
倾刻！大郎卒
剧情简介：
锵哥：“哈喽，各位粉丝们，我们又见面了啦”
粉丝路人甲：“今天锵哥带大家聊什么呢？”
锵哥：“放心是干货 ”
锵哥：“咱们今天来聊一聊 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
二维码：