NoteDeep

实体Entities究竟是什么?它的可变性Mutability 是什么?三种属性怎么应用呢?



entity.pdf 95.4 kB


Entities在源码里面是怎么实现的?


Decorator是否可以重复使用呢?Decorator在源码里到底是如何实现的,为什么可以起到装饰的作用?

发现Decorator不能重复地使用。
有一个现象:当我用同一个decorator去生成两个不同的editorstate时,如果这两个editorstate的第一行都是链接,那么从第一个页面切换到第二个页面时,装饰链接的Link组件不会触发construct,虽然entity里面的src已经是第二个的了,但是却没有同步到state里面,因为没有触发construct以及componentWillMount。
虽然是不同的editorstate,但是用了同一个decorator的引用,说明draft认为第一行的链接之前已经构造好并且挂载过了,所以不会重新挂载。

如何把redux树传到decorator里面呢?这样可以做更多的操作。decorator组件内部自己更改,也可以走统一的update流程即, this.props.editorAction.updateEditorState()




目前链接只有一种修改方式,就是在decorator内部contentState.mergeEntityData,这样我并没有显示地更改editorstate,但是发布时也是可以保存成功的,为什么呢?


以下为draftJs的源码,instances实际上是entityMap本质上时immutable-js里面的map。
它不仅仅返回了newInstance,而且更新了entityMap。
__mergeData: function __mergeData(key, toMerge) { var instance = DraftEntity.__get(key); var newData = _extends({}, instance.getData(), toMerge); var newInstance = instance.set('data', newData); instances = instances.set(key, newInstance); return newInstance; },

那entityMap和contentState的关系是什么呢?
根据源码,ContentState有一个entityMap属性,contentState.getEntityMap()实际上就是返回了上面的 instances。

而editorState和contentState的关系是什么呢?
首先ContentState和editorState都是Immutable里面的Record
而editorState的currentContent属性就是ContentState。

所以是可以保存成功的。虽然看上去不应该这样去修改。


* In a ContentBlock, every position in the text may correspond to zero * or one entities. This correspondence is tracked using a key string, * generated via DraftEntity.create() and used to obtain entity metadata * via DraftEntity.get().


什么src/Draft.js文件中可以require其他模块呢?

因为先把src下的js文件,gulp到了lib下面,所以可以直接require到了。
var paths = { dist: 'dist', lib: 'lib', src: [ 'src/**/*.js', '!src/**/__tests__/**/*.js', '!src/**/__mocks__/**/*.js', ], css: [ 'src/**/*.css', ], };

gulp.task('modules', function() { return gulp .src(paths.src) .pipe(babel(babelOptsJS)) .pipe(flatten()) .pipe(gulp.dest(paths.lib)); });











评论列表

    实体Entities究竟是什么?它的可变性Mutability 是什么?三种属性怎么应用呢?
    Entities在源码里面是怎么实现的?
    Decorator是否可以重复使用呢?Decorator在源码里到底是如何实现的,为什么可以起到装饰的作用?
    如何把redux树传到decorator里面呢?这样可以做更多的操作。decorator组件内部自己更改,也可以走统一的update流程即, this.props.editorAction.updateEditorState()
    目前链接只有一种修改方式,就是在decorator内部contentState.mergeEntityData,这样我并没有显示地更改editorstate,但是发布时也是可以保存成功的,为什么呢?
    为什么src/Draft.js文件中可以require其他模块呢?