不必要的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> 
    ); 
    } 
}