不要なDOMの更新は、私がJSX以内に「動的」いくつかのDOM要素を生成し、プロジェクトに反応している要素

Question

リアクト：

<div className='ui form'> 
    <h2 className="header">{subtype}</h2> 
    { 
    subtypes[subtype].fields.map((field) => 
     <div className='field' key={field.name}> 
     <label>{field.label}</label> 
     <input name={field.name} 
       value={entity[field.name]} 
       onChange={onInputChange}/> 
     </div> 
    ) 
    } 
</div> 

特定のコンポーネントについては、生成された入力フィールドは、これまでの人生中に変化しません（その小道具だけが変更されます）、実際には静的なフォームを生成する単なる方法です。

だから、この「静的」JSXとまったく同じです：

<div className='ui form'> 
    <h2 className="header">{subtype}</h2> 

    <div className='field' key='field1'> 
     <label>Field 1</label> 
     <input name='field1' 
       value={entity['field1']} 
       onChange={onInputChange}/> 
    </div> 
    <div className='field' key='field2'> 
     <label>Field 2</label> 
     <input name='field2' 
       value={entity['field2']} 
       onChange={onInputChange}/> 
    </div> 
</div> 

私は最初のコードスニペットを使用した場合は、HTMLのDOM要素が状態/小道具を変更するたびに再作成されます。 2番目のスニペットを使用すると、HTMLは変更されず、フィールド値のみが更新されます（2番目のインスタンスでは、仮想DOM要素は同じであるが、最初のインスタンスでは検出されません）。

最初のコード例で「動的」仮想DOMを作成し、キャッシュして再利用できるようにする方法はありますか？Reactはそれを各レンダリングで同じと見なしますか？

感謝

Answer 1

どこsubtypesから来ていますか？私が理解していることから、コンポーネントの小道具でこれを受け取ります。その場合、この変数をこのコンポーネントの状態に格納する必要があります。次に、その状態を更新する必要があります。componentWillReceivePropsライフサイクル機能。

事は、setState機能が呼び出されたときにコンポーネントが再レンダリングされるだけです。したがって、コンポーネントが（既にマウントされた後に）小道具の変更を行うと、コンポーネントは再レンダリングされません。

class SimpleCom extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     subtypes: props.subtypes 
    } 
    } 
    componentWillReceiveProps(props) { 
    this.setState({ 
     subtypes: props.subtypes 
    }); 
    } 
    render() { 
    const subtypes = this.state.subtypes; 
    return (
     <div className='ui form'> 
      <h2 className="header">{subtype}</h2> 
      { 
      subtypes[subtype].fields.map((field) => 
       <div className='field' key={field.name}> 
       <label>{field.label}</label> 
       <input name={field.name} 
         value={entity[field.name]} 
         onChange={onInputChange}/> 
       </div> 
      ) 
      } 
     </div> 
    ); 
    } 
}