Draft 事件处理机制
Draft.js 内部封装了一系列基础的事件处理函数，当事件触发时，这些函数接收当前event，并基于此生成new editorState，我们在接收到new editorState后再将该数据绑定到Draft上，这就是Draft的单向数据流。其中react层只负责视图层，我们将通过一些流程图与源码的展示来详细介绍这一点。
事件在 Draft 内部的传递
Draft 由事件驱动，任何事件的触发最终都会被转化为一个新的EditorState。上图是一个简单的流程图，展现了事件在 Draft 内部的传递机制。
react只负责事件的绑定与view的展示，将Draft中内置的事件editorBlur等方法与原生事件blur进行绑定，下面给出了Draft源码进行说明：
// DraftEditor.react.js
// 经过精简
render() {
<div
// 将原生事件与Draft内置事件相绑定
onBeforeInput={this._onBeforeInput}
onBlur={this._onBlur}
onCopy={this._onCopy}
onCut={this._onCut}
onDragEnd={this._onDragEnd}
onDragEnter={this.onDragEnter}
...
// 请暂时忽略下面这部分
<DraftEditorContents {...editorContentsProps} />
</div>
}
通过上面的代码部分我们可以看到，react将原生事件与内置事件做了绑定，例如将_onBlur绑定到了原生事件onBlur上面。而_onBlur内部的事件则被单独抽象出来，与视图层完全解耦。
Draft运用了一些很酷的小技巧来解决内置事件与原生事件的绑定问题：
// 经过精简
import React, { Component } from 'react';
import {onBlur, onCopy, onFocus} from './logicLayer';
const handler = {
onBlur(e) {
editOnBlur(e);
}
onCopy(e) {
editOnCopy(e);
}
onFocus(e) {
editonFocus(e);
}
}
class DraftEditor extends Component {
constructor(props){
super(props);
// 事件绑定
this._onBlur = this._buildHandler('onBlur');
this._onCopy = this._buildHandler('onCopy');
this._onCut = this._buildHandler('onCut');
this._onInput = this._buildHandler('onInput');
...
}
_buildHandler(eventName) {
return e => {
const method = this._handler && this.handler[eventName];
method && method(this, e);
}
}
}
核心函数是_buildHandler,通过此函数进行事件绑定的分发。
通过这种方式，可以完成视图层与逻辑层的解耦。
任何事件的触发最后都会被转化为一个new EditorState,通过onChange（update）方法抛出，我们接收到new EditorState后，再将其绑定到Draft上面，由Draft负责EditorState的转换，最终通过react渲染出来。
也就是说，任何new EditorState都一定会被Draft抛给我们，再由我们绑定到Draft上面进行展示，EditorState不是一个内部状态。
当然Draft对EditorState进行转换的过程远远没有这么简单，实际情况要复杂的多，这点我们将会在下面提到。
通过上面所提到的这种方式，Draft完成了由事件到状态对象的转化，并且完成了数据的单向流动。
Draft 事件层和展示层的分离
我在上面大致画出了draft的react层是如何划分的。其实这个图并不准确，但是用来说明已经够用了。
在react层将事件绑定层与实践展示层分离：
// DraftEditor.react.js
// 经过精简
/**
* Event层
*/
render() {
<div
// 将原生事件与Draft内置事件相绑定
onBeforeInput={this._onBeforeInput}
onBlur={this._onBlur}
...
/**
* View 层
*/
<DraftEditorContents {...editorContentsProps} />
</div>
}
仔细查看上面的代码，依旧是相同的render函数，这次我将事件绑定的部分隐去了大部分，主要可以看到在这个组件中引入了DraftEditorContents组件，这个组件就是事件的展示层。在此层中，储存了preEditorStatus,View层负责将diff过后的latestEditorStatus渲染出来。
中间会经过一些过程，在此期间Draft会向外暴露一些端口用于处理类似于block样式与inline样式，具体内容会在扩展中提及。
