输入 React JS 的 onChange 使输入渲染变慢答案

【问题标题】：onChange for input React JS makes typing render slow输入 React JS 的 onChange 使输入渲染变慢
【发布时间】：2019-10-09 22:08:11
【问题描述】：

我正在制作一个 React 页面，其中有一个帖子和帖子上的 cmets。现在 onChange 被触发会重新渲染整个类，这使得输入输入变慢。现在，如果在单独的类中声明并且在输入中输入的值可以发送到主类以进行 API 调用。但我无法做到这一点。谁能帮帮我？

下面是我的屏幕评论部分的代码。

commentChange(html) {
  this.setState({ post_comment: html})
}

<div className="post-comments">
   <div className="post-comments-head">
      <div>Comments ({this.state.comments.length})</div>
   </div>
   <div className="comments">
      {this.createCommentList(this.state.comments2)}
   </div>
</div>

<div className="post-commenting">
    {this.state.reply == -1 ? <span>Comment as {this.state.name}</span>
     : this.commentBy()}
    <div className="write-comment-post">
        <ReactQuill 
          data-gramm_editor="false"
          onChange={this.commentChange}
          value={this.state.post_comment}
          className="post_comments_x"
          placeholder="Write a comment"
          ref={(ip) => this.myInp = ip}
          autoFocus={true}
          theme=""
        />
    <div className="comments-submit">
        <button className="submit-comment" 
            onClick={() => this.submitComment(this.state.reply)}
            disabled={!enabledComment}>
            Comment
        </button>
    </div>
  </div>
</div>

createCommentList 函数接受 cmets 并返回 cmets 的嵌套列表。以下是添加新评论的部分。如何解决这个问题，因为它使输入新评论变得非常慢。

【问题讨论】：

你在commentChange中做什么？
请分享更多代码（尤其是函数/方法）。究竟什么是慢？您是否尝试注释掉您渲染的某些部分以隔离罪魁祸首？

标签： javascript reactjs optimization input state

【解决方案1】：

<div className="write-comment-post">
    <ReactQuill 
      data-gramm_editor="false"
      onChange={this.commentChange}
      value={this.state.post_comment}
      className="post_comments_x"
      placeholder="Write a comment"
      ref={(ip) => this.myInp = ip}
      autoFocus={true}
      theme=""
    />

为此创建一个单独的组件并且只有 onn 进入调用父函数，否则 onchange 会触发

【讨论】：

嘿，请务必解释问题出现的原因以及您的解决方案为何能解决问题。