Javascript 使用reactjs，在不更新整个列表的情况下更新列表中的项目？

我正在使用React和REFLOW。我很难弄清楚如何更新评论列表中的一条评论

我对国家应该去哪里感到困惑。我把州放在评论列表的顶端。以反应的方式思考。然后CommentsItem只是道具。然后每个评论网站都有一个类似按钮，我也制作了道具

问题是，当我在LikeButton中调用like操作时，它会重新加载CommentsStore中的所有注释。我想我需要一个新的商店来加载一条评论而不是所有评论？但这是否意味着我在CommentsItem中加入了状态？我对这里的最佳实践有些困惑

这就是我正在处理的问题：

<div>
    <ProfileBox profile={this.state.profile} />
    <CommentsList query={{profile: this.state.profile._id}} />
</div>

var CommentsList = React.createClass({

  mixins: [
    Reflux.connect(CommentsStore, 'comments')
  ],

  componentWillMount: function() {
    CommentsActions.load(this.props.query);
  },

  render: function() {
    var commentNodes = this.state.comments.map(function (comment, i) {
      return (
        <CommentsItem key={i} comment={comment} />
      );
    });
    return (
      <div>
        {commentNodes}
      </div>
    );
  }

});

var CommentsItem = React.createClass({
  render: function() {
    return (
      <div>
        <div>
          {this.props.comment.user.username}:
          {this.props.comment.comment}
        </div>
        <div>
          {this.props.comment.numPoints} people like this
        </div>
        <div>
          OTHER LINKS
          <LikeButton commentId={this.props.comment._id} liked={this.props.comment.liked} />
        </div>
      </div>
    );
  }
});

var LikeButton = React.createClass({

  handleLike: function(e) {
    e.preventDefault();
    CommentsActions.like(this.props.commentId);
  },

  render: function() {
    var likeText = this.props.liked ? 'Unlike' : 'Like';
    return(
      <a href="#" onClick={this.handleLike}>{likeText}</a>
    );
  }

});

<div>
    <ProfileBox profile={this.state.profile} />
    <CommentsList query={{profile: this.state.profile._id}} />
</div>

var CommentsList = React.createClass({

  mixins: [
    Reflux.connect(CommentsStore, 'comments')
  ],

  componentWillMount: function() {
    CommentsActions.load(this.props.query);
  },

  render: function() {
    var commentNodes = this.state.comments.map(function (comment, i) {
      return (
        <CommentsItem key={i} comment={comment} />
      );
    });
    return (
      <div>
        {commentNodes}
      </div>
    );
  }

});

var CommentsItem = React.createClass({
  render: function() {
    return (
      <div>
        <div>
          {this.props.comment.user.username}:
          {this.props.comment.comment}
        </div>
        <div>
          {this.props.comment.numPoints} people like this
        </div>
        <div>
          OTHER LINKS
          <LikeButton commentId={this.props.comment._id} liked={this.props.comment.liked} />
        </div>
      </div>
    );
  }
});

var LikeButton = React.createClass({

  handleLike: function(e) {
    e.preventDefault();
    CommentsActions.like(this.props.commentId);
  },

  render: function() {
    var likeText = this.props.liked ? 'Unlike' : 'Like';
    return(
      <a href="#" onClick={this.handleLike}>{likeText}</a>
    );
  }

});

var CommentsList=React.createClass({
混合：[
连接（CommentsStore，“comments”）
],
componentWillMount:function（）{
CommentsActions.load（this.props.query）；
},
render:function（）{
var commentNodes=this.state.comments.map（函数（comment，i）{
返回(
);
});
返回(
{commentNodes}
);
}
});

<div>
    <ProfileBox profile={this.state.profile} />
    <CommentsList query={{profile: this.state.profile._id}} />
</div>

var CommentsList = React.createClass({

  mixins: [
    Reflux.connect(CommentsStore, 'comments')
  ],

  componentWillMount: function() {
    CommentsActions.load(this.props.query);
  },

  render: function() {
    var commentNodes = this.state.comments.map(function (comment, i) {
      return (
        <CommentsItem key={i} comment={comment} />
      );
    });
    return (
      <div>
        {commentNodes}
      </div>
    );
  }

});

var CommentsItem = React.createClass({
  render: function() {
    return (
      <div>
        <div>
          {this.props.comment.user.username}:
          {this.props.comment.comment}
        </div>
        <div>
          {this.props.comment.numPoints} people like this
        </div>
        <div>
          OTHER LINKS
          <LikeButton commentId={this.props.comment._id} liked={this.props.comment.liked} />
        </div>
      </div>
    );
  }
});

var LikeButton = React.createClass({

  handleLike: function(e) {
    e.preventDefault();
    CommentsActions.like(this.props.commentId);
  },

  render: function() {
    var likeText = this.props.liked ? 'Unlike' : 'Like';
    return(
      <a href="#" onClick={this.handleLike}>{likeText}</a>
    );
  }

});

var CommentsItem=React.createClass({
render:function（）{
返回(
{this.props.comment.user.username}：
{this.props.comment.comment}
{this.props.comment.numPoints}人们喜欢这样
其他链接
);
}
});

<div>
    <ProfileBox profile={this.state.profile} />
    <CommentsList query={{profile: this.state.profile._id}} />
</div>

var CommentsList = React.createClass({

  mixins: [
    Reflux.connect(CommentsStore, 'comments')
  ],

  componentWillMount: function() {
    CommentsActions.load(this.props.query);
  },

  render: function() {
    var commentNodes = this.state.comments.map(function (comment, i) {
      return (
        <CommentsItem key={i} comment={comment} />
      );
    });
    return (
      <div>
        {commentNodes}
      </div>
    );
  }

});

var CommentsItem = React.createClass({
  render: function() {
    return (
      <div>
        <div>
          {this.props.comment.user.username}:
          {this.props.comment.comment}
        </div>
        <div>
          {this.props.comment.numPoints} people like this
        </div>
        <div>
          OTHER LINKS
          <LikeButton commentId={this.props.comment._id} liked={this.props.comment.liked} />
        </div>
      </div>
    );
  }
});

var LikeButton = React.createClass({

  handleLike: function(e) {
    e.preventDefault();
    CommentsActions.like(this.props.commentId);
  },

  render: function() {
    var likeText = this.props.liked ? 'Unlike' : 'Like';
    return(
      <a href="#" onClick={this.handleLike}>{likeText}</a>
    );
  }

});

var LikeButton=React.createClass({
手感：功能（e）{
e、 预防默认值（）；
CommentsActions.like（this.props.commentId）；
},
render:function（）{
var likeText=this.props.liked？'inspect'：'Like'；
返回(
);
}
});

最好的办法是更改此行：

<CommentsItem key={i} comment={comment} />

到

由于react使用键来确定某些内容是否已更改，因此，通过使用迭代器，将新元素添加到注释列表末尾以外的任何位置都需要react重新呈现每个注释

---

请参阅此处：了解更多详细信息。

我认为这是最佳实践。因为您使用map在commentlist中循环，但react只执行必要的DOM操作。一些JS循环比更多的DOM操作更快。”–Dustin Hoffner

我认为这是最佳实践。因为您使用

map

在commentlist中循环，但是react只执行必要的DOM操作。一些JS循环比更多的DOM操作快。哦，我是个白痴。我看到它正在更新其他一些帖子的时间域，所以我认为它正在更新所有帖子。这是可怕的，它只更新了必要的！非常感谢，如果注释列表已经是一个带有

{'id1'：{…}，'id2'：{…}

的对象，那么这是没有用的