React学习笔记（二）——React深入

2.1 事件系统

React基于Virtual DOM实现了一个SyntheticEvent层，定义的事件处理器会接收到一个SyntheticEvent对象的实例。

2.1.1 合成事件的绑定方式

React事件的绑定方式在写法上与原生的HTML事件监听器的属性很相似，并且含义和触发的场景也全都是一致的。

2.1.2 合成事件的实现机制

在React底层，主要对合成事件做了两件事：事件委派和自动绑定。

2.1.3 在React中使用原生事件

React提供了完备的生命周期方法，其中componentDidMount会在组件已经完成安全并在浏览器中存在真实的DOM后调用，此时就可以完成原生事件的绑定。

2.1.4 合成事件与原生事件混用

虽然可以，但最好不要。

2.1.5 对比合成事件与原生事件

1.事件传播与阻止事件传播

浏览器原生DOM事件的传播可以分为3个阶段：事件捕获阶段、目标对象本身事件处理程序调用以及事件冒泡。

事件捕获在程序中的意义并不大，更致命的是它的兼容性问题。所以，React的合成事件并没有实现事件捕获，仅支持事件冒泡机制。

阻止原生事件传播需要使用e.preventDefault，不过对于不支持该方法的浏览器，只能使用e.cancelBubble=true来阻止。在React合成事件中，只需要使用e.preventDefault()即可。

2.事件类型

React合成事件的事件类型是JavaScripe原生事件类型的一个子集。

3.事件绑定方式

直接在DOM元素中绑定。

在JS中，通过为元素的事件属性赋值的方式实现绑定。

通过事件监听函数来实现绑定。

4.事件对象

原生DOM事件对象在W3C标准和IE标准下存在着差异。在低版本的IE浏览器中，只能通过window.event来获取对象。而在React合成事件系统中，不存在这种兼容性问题，在事件处理函数中可以得到一个合成事件对象。

2.2 表单

2.2.1 应用表单组件

HTML表单中的所有组件在React的JSX都有相应的实现，只是它们在用法上有些区别，有些是JSX语法上的，有些则是由于React对状态处理导致的一些区别。

2.2.2 受控组件

每当表单的状态发生变化时，都会被写入到组件的state中，这种组件在React中被称为受控组件。在受控组件中，组件渲染出的状态与它的value或checked props相对应。React通过这种方式消除了组件的局部状态，使得应用的整个状态更加可控。React官方同样推荐使用受控表单组件。

2.2.3 非受控组件

如果一个表单组件没有value props，就可以称为非受控组件。

2.2.4 两者对比

最大的区别是：非受控组件的状态并不会受应用组件的控制，应用中也多了局部组件状态，而受控组件的值来自于组件state。

2.3 样式处理

2.3.1 基本样式设置

React组件最终会生成HTML，所以可以使用普通HTML设置CSS一样的方法来设置样式。如果想给组件添加类名，为了避免命名冲突，React中需要设置className prop。此外，也可以通过style prop来给组件设置行内样式，注意style prop需要的是一个对象。

2.3.2 CSS Modules

CSS模块化的解决方案有很多，但主要有两类：

InLine Style。这种方案扯淡抛弃CSS，使用JS或JSON来写样式，能给CSS提供JS同样强大的模块化能力。但缺点同样明显，几乎不能利用CSS本身的特性，另外，这种方案需要依赖框架实现。

CSS Modules。依旧使用CSS，但使用JS来管理样式依赖。能最大化地结合现有CSS生态和JS模块化能力，其API非常简洁。发布时依旧编译出单独的JS和CSS文件。

2.4 组件间通信

2.4.1 父组件向子组件通信

React数据流动是单向的，父组件向子组件的通信也是最常见的方式。父组件通过props向子组件传递需要的信息。

2.4.2 子组件向父组件通信

利用回调函数：可以拿到运行时的状态。

利用自定义事件机制：这种方法更通用，使用也更广泛。

在React中，子组件向父组件通信可以使用上面的任意一种，但在这种简单场景下利用自定义事件比较复杂，一般选择简单的方法。

2.4.3 跨级组件通信

当需要让子组件跨级访问信息时，可以像之前那样向更高级组件层层传递props，但此时代码显得不那么优雅。在React中，还可以使用context来实现跨级父子组件间的通信。

2.4.4 没有嵌套关系的组件通信

没有嵌套关系的，那只能通过可以影响全局的一些机制去考虑。自定义事件机制就可以。

2.5 组件间抽象

2.5.1 mixin

1.使用理由

为创造一种类似多重继承的效果，事实上说它是组合更为贴切。

2.封装mixin方法

它的作用就是把任意多个源对象所拥有的自身可枚举属性复制给目标对象，然后返回目标对象。

3.在React中使用mixin

React在使用createClass构建组件时提供了mixin属性。

4.ES6 Classes与decorator

ES6 Classes形式构建组件时，并不支持mixin。

语法糖decorator，可以用来实现class上的mixin。

decorator是ES7中定义的新特性，与Java中的预定义注解相似。

5.mixmin的问题

破坏了原有组件的封装。

命名冲突。

增加复杂性。

2.5.2 高阶属性

当React组件被包裹时，高阶组件会返回一个增强的React组件。

2.6 组件性能优化

从React渲染过程中，防止不必要的渲染可能是最需要去解决的问题。React官方提供了一个方法，那就是PureRender。

2.6.1 纯函数

纯函数三大原则：

给定相同的输入，它总是返回相同的输出。

过程没有副作用。

没有额外的状态依赖。

2.6.2 PureRender

PureRender中的Pure指的就是组件满足纯函数的条件，即组件的渲染是被相同的props和state渲染进而得到相同的结果。

2.6.3 Immutable

在传递数据时，可以使用Immutable Data来进一步提升组件的渲染性能。

2.6.4 key

用来标识当前项唯一性的props。