Reactコンポーネントが再レンダリングされている理由を追跡する

Question

Reactでコンポーネントを再レンダリングする原因をデバッグする体系的なアプローチはありますか？私はシンプルなconsole.log（）を使用してレンダリングの時間を確認していますが、コンポーネントが何回（4回）レンダーされているのかわかりません。タイムラインやすべてのコンポーネントツリーのレンダリングとオーダーを示すツールが存在しますか？

Answer 1

@jpdelatorreさんの回答が正しいです。 Reactの強みの1つは、一般的に、コードを見てチェーンをバックアップするデータフローを簡単にトレースできるということです。 React DevTools extensionがそれを助けることができます。

また、私はuseful tools for visualizing/tracking React component re-renderingのリストを私のRedux addons catalogの一部として持っていて、React performance monitoringのいくつかの記事は私のReact/Redux links listにあります。

Answer 2

Reactコンポーネントが再レンダリングするいくつかのインスタンスがあります。コンポーネント内this.setState()を呼び出す

再レンダリング

• 親コンポーネント。これにより、以下のコンポーネントのライフサイクルメソッドが起動されますshouldComponentUpdatecomponentWillUpdate>render>componentDidUpdate
• コンポーネントの変更propsが変更されます。これはthis.setState

に類似しているあなたは、あなたのコンポーネントのを最小限に抑えることができthis.forceUpdateを呼び出すcomponentWillReceiveProps>shouldComponentUpdate>componentWillUpdate>render>componentDidUpdate（Reduxのストアに該当する変更があるreact-reduxトリガーのconnect方法この）

がトリガされますshouldComponentUpdateの中に小切手を入れて、返す必要がない場合はfalseを返してください。

別の方法は、React.PureComponentまたはステートレスコンポーネントを使用することです。純粋でステートレスなコンポーネントは、その小道具に変更があった場合にのみ再レンダリングされます。

Answer 3

@ jpdelatorreの答えは、Reactコンポーネントが再レンダリングする一般的な理由を強調するのに最適です。

ちょうど1つのインスタンスに少し深めたいと思っただけです：小道具を変更するとき。 Reactコンポーネントの再レンダリングを引き起こしている問題のトラブルシューティングはよくある問題です。私の経験では多くの時間がこの問題を追跡するには、どの小道具が変更されているかを判断する必要があります。

リアクションコンポーネントは、新しいプロップを受信するたびに再レンダリングされます。彼らは次のように新しい小道具を受け取ることができます。

<MyComponent prop1={currentPosition} prop2={myVariable} />

またはMyComponent場合Reduxのストアに接続されている：prop1の値、prop2、prop3、またはprop4が再ますMyComponentを変更

function mapStateToProps (state) { 
    return { 
    prop3: state.data.get('savedName'), 
    prop4: state.data.get('userCount') 
    } 
} 

いつでもレンダリングする。4つの小道具では、console.log(this.props)をrenderブロックの先頭に置くことで、どの小道具が変更されているかを追跡するのが難しくありません。しかし、より複雑なコンポーネントやますます多くの小道具では、この方法は容認できません。ここで

は変更が再レンダリングするコンポーネントを引き起こしている小道具を判断する（便宜上lodashを使用して）有用なアプローチである：

componentWillReceiveProps (nextProps) { 
    const changedProps = _.reduce(this.props, function (result, value, key) { 
    return _.isEqual(value, nextProps[key]) 
     ? result 
     : result.concat(key) 
    }, []) 
    console.log('changedProps: ', changedProps) 
} 

あなたのコンポーネントにこのスニペットを追加する疑わしい再引き起こして犯人を明らかにすることができます多くの場合、不要なデータがコンポーネントにパイプされるのを助けます。