反应重新渲染阵列，而项重点没有改变列表

非常基本的代码示例：反应重新渲染阵列，而项重点没有改变列表

class List extends React.Component { 
    render() { 
     const listComponent = this.props.numbers.map((number) => 
      <Item key={ number.toString() } value={ number } />, 
     ); 

     return (
      <div> 
       <button onClick={() => this.setState({ test: 1 })}>Re-render list</button> 
       { listComponent } 
      </div> 
     ); 
    } 
}

的这里是项目：

class Item extends React.Component { 
    render() { 
     return (
      <div>{ this.props.value + ', rendered time:' + new Date().getTime() }</div> 
     ); 
    } 
}

当我点击按钮，状态已更新，因此List组件重新呈现。

但是，如果我的理解是正确的，这些项目不应该重新呈现，因为关键项目没有改变。但是它会在时间戳更新后重新渲染。

有人可以解释我为什么吗？

来源

2017-07-28 lost17

你的理解是完全错误的

的key的全部目的，是为ordering而非rendering。图像你有项目a，b，c，d和重新排序然后通过开关a和c，即c，b，a，d。如果没有这个键，就很难反应如何将旧的虚拟DOM转换为新的虚拟DOM。

请仔细阅读本 https://facebook.github.io/react/docs/lists-and-keys.html

来源

2017-07-28 06:03:47 Guigui

通过重新渲染组件，您还可以在所有子组件上重新渲染链式反应。

如果您希望阻止子组件重新渲染（如果某些传递的道具没有发生变化），则可以使用生命周期方法shouldComponentUpdate()。

class Item extends React.Component { 
    shouldComponentUpdate(nextProps) { 
     // only re-render if props.value has changed 
     return this.props.value !== nextProps.value; 
    } 

    render() { 
     return (
      <div>{ this.props.value + ', rendered time:' + new Date().getTime() }</div> 
     ); 
    } 
}

来源

2017-07-28 03:48:30

我明白，但后来什么是一种针对阵列的项目的一个关键性质的观点？ – lost17

我如何理解它，这些键只是性能优化，用于比较列表项目中是否有任何更改。与重新渲染或不重新渲染无关。以下是关于为什么键有必要的深入解释：https：//facebook.github.io/react/docs/reconciliation.html#recursing-on-children –

每当您的状态发生变化时，整个组件将被React重新渲染。如果您尚未将shouldComponentUpdate()函数设置为返回false，则默认为true。看看React's component lifecycle。

来源

2017-07-28 03:48:50 Legolas

反应重新渲染阵列，而项重点没有改变列表

回答

相关问题