关于react 父级组件更新数据触发子组件更新渲染问题

这个问题,困扰了我,特此记录。

子组件显示父组件传来的props 做更新有 以下2种常用方式:

1.直接使用

class Child extends Component {
    render() {
        return <div>{this.props.someThings}</div>
    }
}

这种方式可以直接在子组件中使用,方便快捷,父组件的更新的数据直接影响子组件的值。

2.转换成自己的state

    class Child extends Component {
      constructor(props) {
        super(props);
        this.state = {
          someThings: props.someThings
        };
      }
      componentWillReceiveProps(nextProps) {
        this.setState({someThings: nextProps.someThings});
      }
      render() {
        return <div>{this.state.someThings}</div>
      }
    }

自己在构造函数中初始化一个值,在将 status 通过 componentWillReceiveProps 生命周期方法 更新

自己喜欢用的是第二种,看起来易维护,代码结构清晰

但是,我遇到一个问题,是在渲染第一次是正常的,之后怎么也不做渲染了

后面发现了,是无意间使用了 提升react加载性能的 shouldComponentUpdate方法,该方法会阻止 states 的重新渲染

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 深入JSX date:20170412笔记原文其实JSX是React.createElement(componen...
    gaoer1938阅读 8,100评论 2 35
  • 目前,react组件有三种写法,分别是es5的createClass写法,es6的class写法,以及statel...
    ZoomFunc阅读 1,761评论 0 1
  • 原教程内容详见精益 React 学习指南,这只是我在学习过程中的一些阅读笔记,个人觉得该教程讲解深入浅出,比目前大...
    leonaxiong阅读 2,854评论 1 18
  • 选择深圳,因为这是: 一座缔造奇迹、创造传奇的城市; 一座有着新观念、新思想、新生活的城市; 一座包容开放、海纳百...
    好书郎阅读 1,082评论 0 2
  • 雷在轰鸣 风在耳边呼啸 我黑色的发丝 飞舞成翅膀的形状 腿在发抖 我真的跑得好快 夜色覆盖了我 沉默地拥抱着我 不...
    在一阅读 198评论 0 1