React - 1秒ごとにコンポーネントを更新しないでフォーム全体を再描画する

Question

ReactとRedux - Reactに少し新しく、リソースを探して、この特定の問題をよりよく理解するためのリンク。

TLDR; 親コンポーネントを再描画せずに毎秒サブコンポーネントを更新するにはどうすればよいですか？しかし、少なくとも送信ボタンがクリックされると、親は状態を取得する必要があります。

私はフォームといくつかのフォームフィールドを持つコンポーネントを持っています。フィールドの1つは日付ピッカーです。デフォルトでは、日付選択ツールのフィールドは1秒ごとに点滅しますが、ユーザーは手動で時間を設定できます。ユーザーがフォームを提出すると、フィールドに時間がかかります。毎秒自動的に入力されているか、ユーザーが手動で日付を操作していますか。

日付ピッカーが変更されるたびに、毎秒または手動でコンポーネント全体がレンダリングされます。これは非常に大きな問題ではありません。私が応答したブートストラップテーブルを持っているのは、右にスクロールすると1秒ごとに左に戻るか、または目覚し時計が毎秒更新されるということです。

最初は、この値を更新するためにsetState（）を使用していましたが、この問題を実行した後、私はreduxでアクションとレデューサーを設定しましたが、同じ動作になります。ここで

は状態を更新するために使用されるコード（及びReduxの方法現在、コメント）

export const onInputChangeCommon = function (event) { 
    const target = event.target; 
    const value = target.type === 'checkbox' ? target.checked : target.value; 
    const name = target.name; 
    this.setState({ 
    [name]: value 
    }); 

    if (name === 'showHideCustomDatetime' && value) { 
    this.interval = setInterval(this.getTime, 1000); 
    } else if (name === 'showHideCustomDatetime' && !value) { 
    clearInterval(this.interval); 
    } 
} 

export const getTime = function() { 
    const time = moment().format(`${this.state.timeFormat.date} ${this.state.timeFormat.time}`); 
    // this.props.setEnterTimeCustomDatetime(time); 
    this.setState({ 
    enterTime: time, 
    isInvalidDate: false 
    }); 
} 

感謝任意の洞察力

EDIT チェックアウトこのCodePenです。 https://codepen.io/anon/pen/EbNqpJ?editors=1111

子コンポーネントから親に戻る時間を取得する方法を理解していません。

Answer 1

コンポーネントを複数のコンポーネントに分割する必要があります。その後、ライフサイクルメソッドshouldComponentUpdate()を使用して、コンポーネントが再レンダリングする必要があるかどうかを確認できます。ライフサイクルを使用するには、コンポーネントがstatefulである必要があります。

Answer 2

Reactはすべてのコンポーネントの仮想ドームを計算し、変更を加えたものだけを再レンダリングします（したがって、メインDOMの変更は最小限です）。したがって、主なコンポーネントを複数のコンポーネントに分割します。これらのコンポーネントは、状態の変化に応じて個別に再レンダリングします。