DraftJSでcontentStateが変更されたかどうか、または単にeditorStateであるかどうかを確認する最高のパフォーマンスメソッド

Question

私は、contentState自体が変更されたときだけ関数を実行しようとしています。

今の私の考えは、古いcontentStateを文字列として保存し、それを新しいcontentStateと文字列として比較することですが、これは状態を文字列に変換して比較するのは非常に無駄です。より良い方法がありますか？

Answer 1

の値をold stateと比較すると、new stateの値をconvertからstringに簡単に比較できます。

EDIT：stateはlarge objectで開催されています。ここには、ベストプラクティスがそのように

一般的な誤解を行うことをお勧めしますと、あなたがlarge state object心配を持っていないstateの反応についての概念です。他のいくつかのオブジェクトを参照するオブジェクトです。それについて大きなものはありません。

Answer 2

エディタの内容が変更されているかどうかを確認する別の方法を使用しました。

基本的には、raw contentStateオブジェクト（contentStateをconvertToRaw関数を使用して単純なJSオブジェクトに変換したもの）を比較するためにnpmモジュールdeep-equalを使用しています。 onChangeハンドラで、古いcontentStateオブジェクトと新しいraw contentStateオブジェクトを比較します。

注：deep-equalモジュールによる比較は、ノードのassert.deepEqual（）をtry/catchでラップするより約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

これはファイサル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) 
}