《React小书》终结笔记

到今天为止终于刷完了胡子大哈的React小书，一开始就是冲着对Redux的理解去的，期间也在课后练习的ScriptOj上完成了小书推荐的题目，第三章是收费的，但是服务器好像挂了，邮件都收不了。。。后来发现react小书网站的第三章就是靠js增加了一层蒙版弹窗。。。在Chrome里把这个页面禁用js就可以看了。。。。

React小书地址：链接

ScriptOj地址：链接

我的ScriptOj AC代码：链接

我的练习笔记代码：链接

一些笔记？

1. 组件化，可以写一个component，然后引用的时候传入参数，在component里用this.props读取，更加定制话组件，比如组件的大小和位置。

2. redux的观察者模式，即数据发生变化时自动帮我们在dispatch的时候renderApp重新渲染页面
   
   具体实现一个观察者模式的例子，我们可以自己写一个EventEmitter，在scriptOj上刚好有这么一道题，题目链接，我的代码：github代码链接
   (观察者模式在前端开发中非常常用，我们经常用的事件就是观察者模式的一种体现。它对我们解耦模块、开发基于消息的业务起着非常重要的作用。Node.js 原生自带 EventEmitter 模块，可见它的重要性。）

3. • 高阶组件就是一个函数，传给它一个组件，它返回一个新的组件。新的组件使用传入的组件作为子组件。
   • 高阶组件的作用是用于代码复用，可以把组件之间可复用的代码、逻辑抽离到高阶组件当中。新的组件和传入的组件通过 props 传递信息。
   • 高阶组件有助于提高我们代码的灵活性，逻辑的复用性。灵活和熟练地掌握高阶组件的用法需要经验的积累还有长时间的思考和练习，如果你觉得本章节的内容无法完全消化和掌握也没有关系，可以先简单了解高阶组件的定义、形式和作用即可。

4. Dumb组件和Smart组件：

   • Dumb组件只依赖外部props，产出值不依赖全部变量，类似纯函数的高可服用性组件。
   • 当我们拿到一个需求开始划分组件的时候，要认真考虑每个被划分成组件的单元到底会不会被复用。如果这个组件可能会在多处被使用到，那么我们就把它做成 Dumb 组件。
   • Smart 组件。它们专门做数据相关的应用逻辑，和各种数据打交道、和 Ajax 打交道，然后把数据通过 props 传递给 Dumb，它们带领着 Dumb 组件完成了复杂的应用程序逻辑。
   • Smart 组件不用考虑太多复用性问题，它们就是用来执行特定应用逻辑的。Smart 组件可能组合了 Smart 组件和 Dumb 组件；但是 Dumb 组件尽量不要依赖 Smart 组件。因为 Dumb 组件目的之一是为了复用，一旦它引用了 Smart 组件就相当于带入了一堆应用逻辑，导致它无法无用，所以尽量不要干这种事情。一旦一个可复用的 Dumb 组件之下引用了一个 Smart 组件，就相当于污染了这个 Dumb 组件树。如果一个组件是 Dumb 的，那么它的子组件们都应该是 Dumb 的才对。
     

5. reducer不一定必须要和action分开，其实多数情况下特定的 action 只会影响特定的 reducer，直接放到一起可以更加清晰地知道这个 action 其实只是会影响到什么样的 reducer。而分开会给我们维护和理解代码带来额外不必要的负担，这有种矫枉过正的意味。
   胡子大哈写 reducer 文件的习惯，仅供参考：
   **定义 action types
   **编写 reducer
   **跟这个 reducer 相关的 action creators