《深刻浅出React和Redux》读书笔记一

• 使用React.createClass是一种过期的方法
• React 判断一个元素是HTML元素仍是React组件的原则就是看第一个字母是否大写
• 在HTML中直接写onclick一直就是为人诟病的写法，网页应用开发界一直倡导的是用jQuery的方法添加事件处理函数，直接写onclick会带来代码混乱的问题
• 既然长期以来不倡导在HTML中使用onclick，为何在React的JSX中咱们却要使用onClick这样的方式来添加事件处理函数呢？
• 之前使用HTML来表明内容、用CSS表明样式、用JavaScript来定义交互行为，这三种语言分在三种不一样的文件里面，其实是把不一样的技术分开管理了，而不是逻辑上的"分而治之"
• 根据作同一件事的代码应该有高耦合性的设计原则，既然咱们要实现一个Click-Counter，那为何不把实现这个功能的全部代码集中在一个文件里呢？

• 即便如今，咱们仍是要说在HTML中直接使用onclick很不专业，缘由以下：

  • onclick 添加的事件处理函数是在全局环境下执行的，这污染了全局环境，很容易产生意料不到的后果；
  • 给不少DOM元素添加onclick事件，可能会影响网页的性能，毕竟，网页须要的事件处理函数越多，性能就会越低；
  • 对于使用onclick的DOM元素，若是要动态地从DOM树中删除的话，须要把对应的事件处理器注销，若是忘了注销，就可能形成内存泄漏，像这样的Bug很难被发现
  • 上述的这些问题，在JSX中都不存在

• 由于

  • JSX中一个组件使用了onClick，并无直接使用onclick的HTML，而是使用了事件委托(event delegation)的方式处理事件，不管有多少个onClick出现，其实最后都只在DOM树上添加了一个事件处理函数，挂在最顶层的DOM节点上；
  • 全部的点击事件都被这个事件处理函数捕获，而后根据具体组件分配给特定函数，使用事件委托的性能固然要比为每一个onClick都挂载一个事件处理函数要高；
  • 由于React控制了组件的生命周期，在unmount的时候天然可以清楚相关的全部事件处理函数，内存泄漏也再也不是一个问题；
• 选取一些DOM元素，而后对这些元素作一些操做，这是一种最容易理解的开发模式；jQuery的发明人John Resig就是发现了网页应用开发者的这个编程模式，才创造出了jQuery，其一问世就受到广泛承认，由于这种模式直观易懂。可是，对于庞大的项目，这种模式会形成代码结构复杂，难以维护，每一个jQuery的使用者都会有这种体会
• 用React开发的ClickCounter组件并无像jQuery那样作"选中一些DOM元素而后作一些事情的动做"

打一个比方，React是一个聪明的建筑工人，而jQuery是一个比较傻的建筑工人，开发者你就是一个建筑的设计师，若是是jQuery这个建筑工人为你工做，你不得不事无巨细地告诉jQuery“如何去作”，要告诉他这面墙要拆掉重建，那面墙上要新开一个窗户，反之，若是是React这个建筑工人为你工做，你所要作的就是告诉这个工人“我想要什么样子”，只要把图纸递给React这个工人，他就会替你搞定一切，固然他不会把整个建筑拆掉重建，而是很聪明地把此次的图纸和上次的图纸作一个对比，发现不一样之处，而后只去作适当的修改就完成任务了。
显而易见，React的工做方式把开发者从繁琐的操做中解放出来，开发者只须要着重“我想要显示什么”，而不用操心“怎样去作”。
这种新的思惟方式，对于一个简单的例子也要编写很多代码，感受像是用高射炮打蚊子，可是对于一个大型的项目，这种方式编写的代码会更容易管理，由于整个React应用要作的就是渲染，开发者关注的是渲染成成什么样子，而不用关心如何实现增量渲染。
React的理念，归结为一个公式，就像下面这样：
UI＝render（data）
让咱们来看看这个公式表达的含义，用户看到的界面（UI），应该是一个函数（在这里叫render）的执行结果，只接受数据（data）做为参数。这个函数是一个纯函数，所谓纯函数，指的是没有任何反作用，输出彻底依赖于输入的函数，两次函数调用若是输入相同，获得的结果也绝对相同。如此一来，最终的用户界面，在render函数肯定的状况下彻底取决于输入数据。