子コンポーネントの更新親コンポーネント

Question

子コンポーネントが親コンポーネントを更新することが良いかどうかは不思議です。

class Parent extends React.Component{ 
    state = { 
    name : '' 
    } 
    changeState = ((state) => { 
    this.setState(state) 
    }) 
    submit = (() => { 
    // send state to api.. 
    }) 
    render(){ 
    return(
     <div> 
     <Child changeState={this.changeState} {...this.state}/> 
     <button onClick={this.submit} /> 
     </div> 
    ) 
    } 
} 



class Child extends React.Component{ 
    change = ((e) => { 
    this.props.changeState({ 
     name : e.target.value 
    }) 
    }) 
    render(){ 
    return(
     <input onChange={this.change} value={this.props.name} /> 
    ) 
    } 
} 

私はこの方法は、方法書を提出された使用理由を次のようなソースコードで
、。
多くの入力タグがあり、それらをまとめてバインドしたいと思います。

しかし、私はこの方法が良いかどうかはわかりません。
何か入力すると、親コンポーネントは常に再レンダリングします。
（実際には私の考えは...）
それはいいですか？

Answer 1

私は、この方法で子供の親の状態を更新しています。それは適切に動作します。しかしそれはコンポーネントを少し複雑にします。

あなたの場合（テキスト入力要素に対してこれを行うと仮定します）、小さな入力コンポーネントに対してこれを行う場合、これは良い方法ではないと思います。キーボードのキーを押すたびに、親コンポーネントは更新を試みます。

しかし、入力要素のセットをラップして、より大きなオブジェクトを親コンポーネントに渡す場合、それはうまくいくと思います。

あなたは親コンポーネント

のレンダリングを制御するために、反応のライフ・サイクル・メソッドshouldComponentUpdate（）メソッドを使用することができshouldComponentUpdate https://reactjs.org/docs/react-component.html#shouldcomponentupdate

shouldComponentUpdate(nextProps, nextState) { 
    if (this.props.name != nextProps.name) { 
    return true; 
    } else { 
    return false; 
    } 
} 

ここnextPropsあなたは（更新）を受信小道具を意味します「これによって現在の支柱値を参照することができます。小道具」

とレンダリングをスキップするレンダリングする場合はtrueとfalseを返す。

Answer 2

親の再レンダリングは、無駄でない限り問題はありません。 Reduxを使用していない限り、これは、状態を管理する、つまり親コンポーネント内で子を使用して状態を管理する適切な方法だと思います。このようにして、あなたのフォームはcontrolled componentになりました。
次のページが便利だと思います。https://scotch.io/courses/getting-started-with-react/parent-child-component-communication

Answer 3

ユーザーが入力したときに検証を実行してもOKです。 それ以外の場合は、 'onChange'イベントを 'onBlur'に変更してください。

Answer 4

他の複数の兄弟が同じ値を参照したい場合は、状態を持ち上げて更新することをお勧めします。複雑で深くネストされた小道具や州を持たない限り、あなたの親子コンポーネントを純粋なものにすることができます。 React docsによると

：

React.PureComponentはまさにReact.Component似ていますが、 は浅い小道具や状態 比較してshouldComponentUpdate()を実装します。あなたのReactコンポーネントのrender（）関数が同じ小道具と同じ状態で の結果をレンダリングする場合は、場合によっては React.PureComponentを使用してパフォーマンスを向上させることができます。