reactjs – 如何在React中动态列出组件而没有冗余渲染？

var FruitList = React.createClass({
      render : function() {
        return (
          <div className="container">
            <ul className="list-group text-center">
              {
                Object.keys(this.props.fruits).map(function(key) {
                  count = count + 1;
                  return <li className="list-group-item list-group-item-info">{this.props.fruits[key]+count}</li>
                }.bind(this))
              }
            </ul>
           </div>
         );
       }
     });

我想在列表中添加“Cherry”.

按原样,它会冗余地重绘所有项目.我希望orange1和apple2需要保持状态而不重写.

动态列表组件的设计更好？

import React, {PureComponent} from 'react';

–

class FruitItem extends PureComponent {
  render() {
    console.log('FruitItem render', this.props.name);
    return (
      <li className="list-group-item list-group-item-info">
        {this.props.name}
      </li>
    );
  }
}

–

Object.keys(this.props.fruits).map((key) => {
  return (
    <FruitItem
      key={key}
      name={this.props.fruits[key]}
    />
  );
})

请参阅working codepen,检查控制台以查看重新渲染