react爬坑之PureComponent下setstate不触发render中状态变化的问题与相关知识。

最新推荐文章于 2023-01-06 16:24:20 发布

harryzhang123

最新推荐文章于 2023-01-06 16:24:20 发布

阅读量3.3k

点赞数

分类专栏：技术

本文链接：https://blog.csdn.net/zhangheli123456/article/details/85053210

版权

本文讨论了在React中PureComponent下setState不触发render的情况，分析了浅比较与深复制的原理，以及如何通过解构赋值、JSON深拷贝等方式解决这个问题。同时，解释了PureComponent与Component在shouldComponentUpdate上的区别，并建议在性能优化时谨慎使用PureComponent。

摘要由CSDN通过智能技术生成

react爬坑之PureComponent下setstate不触发render中状态变化的问题。

在学习react时出现情况: 明明改变了值, 但是就是不触发render。

下面贴代码

import React, { PureComponent } from 'react';
import CommentInput from '@/components/CommentInput';
import CommentList  from '@/components/CommentList';
import styles from './CommentApp.less';

class CommentApp extends PureComponent {
  
  constructor () {
    super();
    this.state = {
      comments:[]
    }
  }

  componentWillMount () {
    this._loadComments()
  }

  _loadComments () {
    let comments = localStorage.getItem('comments');
    if(comments){
      comments = JSON.parse(comments)
      this.setState({comments:comments})
    }
  }

  _saveComments (comments) {
    localStorage.setItem('comments',JSON.stringify(comments));
  }


  handleSubmitComment = (comment) =>{
   
    const {comments} = this.state;

    if(!