ReactコンポーネントのコンストラクタとcomponentWillReceivePropsの共通コード

Question

ステートフルなReactコンポーネントを使用すると、この種の状況によく遭遇します。

私は小道具で何らかの操作を行う必要があります。私が現在行っている処理は、render()にするか、小道具の値に従って状態を設定します。

私は小道具が更新されるときに、コンポーネントが最初に取り付けられただけでなく、されたときに、これを行うにしたいと、私はこのような定型的なコードで終わる：

constructor(){ 
    super(props) 
    const modifiedProps = doSomethingWithProps(props) 
     ... 
    this.state = {initialState} 
} 

componentWillReceiveProps(nextProps) { 
    const modifiedProps = doSomethingWithProps(nextProps) 
     ... 
    this.setState({newState}) 
} 

doSomethingWithProps(props){ 
     ... 
} 

これを行うにはどのように良い方法はあります？

Answer 1

なぜコンポーネントを変形した後にコンポーネントに渡さないのですか？

これは、いくつかの方法で達成することができます。

1. は小道具を変換し、このコンポーネントに渡す簡単なステートレスコンテナを使用します。

   export const Container = (props) => 
       <YourComponent modifiedProp={doSomethingWithProps(props)} /> 
   

2. connected componentを使用してmapStateToPropsメソッド内で変換を行います。最初のオプションは本当に第二の機能縮小版である

   const mapStateToProps = (state, ownProps) => ({ 
       modifiedProp: doSomethingWithProps(ownProps) 
   }); 
   
   export const ConnectedComponent = connect(mapStateToProps)(YourComponent); 
   

。

selectorsを使用して、コンポーネントに渡す派生した小道具を計算することもできます。私はかなり役に立った質問のコメントに基づいて答える

Answer 2

-

propsに基づいて行われる必要がある作業の束がある場合、componentWillMountはあなたのヘルパー関数でthis.setState()を使用して最小限に抑えることができますconstructorで行われた作業。これにより、他の方法で複製されたコードが一掃されます。あなたが状態を設定されていない場合

constructor(){ 
    super(props) 
    this.state = {initialState} 
} 

componentWillMount() { 
    this.doSomethingWithProps(this.props); 
} 

componentWillReceiveProps(nextProps) { 
    this.doSomethingWithProps(nextProps) 
} 

doSomethingWithProps(props){ 
    ... 
    this.setState({newState}) 
}