检查 DraftJS 中的 contentState 是否更改或只是 editorState 的最佳性能方法

Question

我试图仅在 contentState 本身发生变化时才使用函数运行，而不仅仅是 editorState。

我现在的想法是将旧的 contentState 存储为字符串并将其与新的 contentState 作为字符串进行比较，但是将状态转换为字符串并进行比较似乎非常浪费。有没有更好的方法？

Answer 1

你可以简单地比较你的 old state 的价值和你的 new state 的价值你不必 convert 它到 string.

编辑：这里有一个关于 React state 的概念，您不必担心 large state object 因为最佳实践建议这样做

Common misconception: state is held in a large object. It’s just object referencing a few other objects. Nothing large about it.

Answer 2

我使用了另一种方法来检查编辑器内容是否已更改。

基本上我正在使用 npm 模块 deep-equal 来比较原始 contentState 对象（即使用 contentState 转换为简单的 JS 对象使用 convertToRaw 函数）。在您的 onChange 处理程序中，比较新旧原始 contentState 对象。

注意：通过深度相等模块进行比较比在 try/catch.

中包装节点的 assert.deepEqual() 快大约 5 倍

这是 onChange 处理程序代码：

const deepEqual = require('deep-equal');

this.onChange = (editorState) => {

    let oldContent = convertToRaw(this.state.editorState.getCurrentContent());
    let newContent = convertToRaw(editorState.getCurrentContent());

    let sameContent = deepEqual(oldContent, newContent);

    this.setState({editorState});

    if (sameContent === false)
      console.log('Content has changed.');
}

Answer 3

这与 Faisal Mushtaq 的回答没有太大区别，但包括一些改进。在你的组件中 constructor:

// keep track of the last state
let lastContentState = this.state.editorState.getCurrentContent()

this.onChange = editorState => {
  this.setState({ editorState })

  // push your handling code onto the call stack with a setTimeout
  // so that it doesn't block handling new inputs to the editor
  setTimeout(() => {

    // first-time focus or blur, no change to content
    if (!editorState.getLastChangeType()) return

    const currentContentState = editorState.getCurrentContent()

    // ES6 to compare, could use Immutable.is() instead
    const toHandle = !Object.is(lastContentState, currentContentState)

    if (toHandle) {
      // your handler function, eg passed in as a prop
      this.props.handleChange(currentContent)

      // current content becomes last content
      lastContentState = currentContentState
    }

  }, 0)
}

检查 DraftJS 中的 contentState 是否更改或只是 editorState 的最佳性能方法

Best performance method to check if contentState changed in DraftJS, or just editorState

javascript

reactjs

draftjs