draft-js 的 decorator 与 blockRendererFn 的区别

1. decorator

1.1 作用：对block中的部分（或全部）文本做特殊渲染。

// 创建
const { CompositeDecorator } = Draft;

const decorator = new CompositeDecorator([
	{
		// 从block中的text截取出[start,end]的文本用component组件渲染；通常用于从block中选出某个entity对应的[start,end]来用component渲染；
		strategy: (block: ContenBlock, callback: (start: number, end: numer) => void, contentState: ContentState) => {
			/** 案例1: 选取某个entity做特殊渲染 start **/
			// ContentBlock.findEntityRanges(filterFn, callback)：遍历block中的entity，并将满足条件的entity的[start,end]作为参数调用callback
			block.findEntityRanges(
				character => {
            		const entityKey = character.getEntity();
            		return (
              			entityKey !== null && block.getEntity(entityKey).getType() === 'ENTITY-TYPE'
            		);
          		},
          		callback
        	);
        	/** 案例1: 选取某个entity做特殊渲染 end **/

        	/** 案例2: 手动指定[start,end] start **/
        	callback(start, end);
        	/** 案例2: 手动指定[start,end] end **/
		},
		component: (props: {
			contentState: ContentState;
			entityKey: null | string;
			blockKey: string;
			start: number;
			end: number;
			// block文本的[start,end]部分
			decoratedText: string;
			// 被选中的文本用span标签包裹
			children: React.Children;
			...
		}) => <div />,
	},
]);

// 使用
EditorState.createWithContent(contentState, decorator)
// 或
EditorState.createEmpty(decorator)

2. blockRendererFn

2.1 作用：对指定block做特殊渲染。

// 创建
function blockRendererFn(block: ContentBlock) {
	// 过滤block
	if (block.getType() === 'atomic') {
		// 如果返回null会按原内容渲染；
		return null | {
			component: (props: {
				block: ContentBlock;
            	blockProps: CustomProps;
            	selection: SelectionState;
            	contentState: ContentState;
            	decorator: CompositeDraftDecorator;
            	customStyleMap: Object;
            	...
			}) => <div />,
            // 是否可变，会在壳子上加一个contenteditable="true|false" 属性
            editable?: boolean;
            // 自定义传入组件的数据
            props?: CustomProps;
        };
     }
     return null;
}

// 使用
const { Editor } = Draft;

function MyComponent() {
	return <Editor blockRendererFn={blockRendererFn} ... />;
}

3. 两者的区别

3.1 影响范围

1. 两者都可以对整个block或block中的entity生效。
2. blockRendererFn原则上只对整个block生效，但能拿到所有的block信息，所以也可以对不同entity做不同渲染。
3. decorator原本只对block中的部分字符起效，但可以手动指定字符起始位置，所以也可以渲染整个block，而且组件里能拿到block的参数。
4. decorator对block文本的装饰只限制于callback中指定的start->end间的字符，其他字符保持原样。

3.2 参数

1. blockRendererFn 可以为渲染组件增加额外的自定义参数。

3.3 优先级

1. blockRendererFn的优先级比decorator高。
2. decorator会先进行匹配；如果之后的 blockRendererFn匹配成功（返回非null），decorator中对应的配置会无效。