Draft 事件处理机制

Draft.js 内部封装了一系列基础的事件处理函数，当事件触发时，这些函数接收当前event，并基于此生成new editorState，我们在接收到new editorState后再将该数据绑定到Draft上，这就是Draft的单向数据流。其中react层只负责视图层，我们将通过一些流程图与源码的展示来详细介绍这一点。

事件在 Draft 内部的传递

eventInDraft.png

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 事件层和展示层的分离

Event&View.png

我在上面大致画出了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样式，具体内容会在扩展中提及。