なぜ、componentDidUpdateに新しく挿入されたdomノードが表示されないのですか？

Question

私はこの反応のケースを持っているかもしれませんが、おそらく反応することから何かが逃しているかもしれません。componentDidMountか、あるいは奇妙な挙動です（正しいことはjQueryプラグインで実際のフィドルを提供することはできませんが、プラグ自体よりも広い）。

var Hello = React.createClass({ 
    getInitialState() { 
    return {content: '<div id="target">ciao!</div>'} 
    }, 

    componentDidMount() { 
    const target = $('#target').init(); 
    this.target = target; 
    }, 

    componentWillReceiveProps(nextProps) { 
    if (condition) { 
     this.target.destroy(); // this remove even the DOM node 
    } 
    }, 

    componentDidUpdate() { 
    const target = $('#target').init(); // HERE PROBLEM! can't find the #target element 
    this.target = target; 
    } 

    render: function() { 
    return <div>Hello {this.state.content}</div>; 
    } 
}); 

'condition'がtrueで、DOMノードがcomponentDidUpdateが見つからない、プラグインによって破壊された後、私は理由を理解することはできません#target私の心にされている必要があることを「再描画」最初のレンダリングではcomponentWillReceivePropsの後です。私はそこにいることを期待しています。なぜなら、決して変化しない初期の状態からそれを読むからです。

私には何が欠けていますか？

Answer 1

componentDidMount()ライフサイクルメソッド内でthis.setState()を実行すると、レイアウトスラッシングが発生します。 は、ここではレイアウトthashingについての詳細を参照してください：https://blog.idrsolutions.com/2014/08/beware-javascript-layout-thrashing/

理由はthis.setState()が再レンダリング引き起こすことがある（2回render()を呼び出します）。そして、それはcomponentDidMount()で1回、実際のレンダリング方法で1回発生します。 componentDidMountからsetState()を削除する方法を見つける必要があり、問題が解決する可能性があります。あなたがレンダリングされたコンテンツへの変更を検出することができませんリアクト作るのjQueryを使用して反応させる要素（this.state.content）を操作しているので、最初の試みとして、私はcomponentWillMount()方法

Answer 2

内this.setState()を移動します。あなたはそれを

1. componentDidUpdateが初期状態、および$('#target').init()後#target
2. が呼び出されるなど、完全にレンダリングされたコンポーネントを、持っている最初の時間をレンダリングするときに、レンダリングされたコンポーネントが反応知らせることなく、外部から変更され
3. 後$('#target').destroy()が呼び出された場合、#targetノードは通知せずにDOMから削除されます
4. componentDidUpdateに$('#target').init()を呼び出した場合、が見つかりませんReactは#targetの変更を検出しなかったため、Reactが選択的再レンダリングを行うという事実のために、#targetは再生成されませんでした。だから、あなたが行うことができます一つのことがcomponentWillReceivePropsの状態を更新することです

（in condition check）、data-updatedフィールドに注意してください、これは確かにそれが反応になりますthis.state.contentのための状態変化を検出し、ひいては再レンダリングされますコンポーネント、およびあなたがcomponentDidUpdate

componentWillReceiveProps(nextProps) { 
    if (condition) { 
    this.target.destroy(); // this remove even the DOM node 
    this.state.content = `<div id="target" data-updated="${Date.now()}">ciao!</div>`; 
    } 
} 

で再び#targetがこれを考えるとわかりますが、私はあなたが反応にrefsを見てすることをお勧めします。