不必要的DOM更新反應的元素

Question

我已經產生內JSX一些DOM元素「動態」一個陣營項目：

<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元素，會重新對每一個變化國家/道具。如果我使用第二個片段，那麼HTML看起來沒有改變，只有字段值被更新（React可以在第二個實例中檢測到虛擬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> 
    ); 
    } 
}