react 传递非state给子元素的注意事项

Posted 2020-10-21

export default class Test extends PureComponent {
  constructor(props) {
    super(props);
　　//通常我们会把分页的相关信息page为此类的属性，而不是state,因为分页相关的信息，基本不影响渲染，更多的是程序内部的请求使用
    this.page = {
      pageNum: 1,
      pageSize: 10,
    };
  }

handlePageChange = (pagination) => {//分页变化时触发
　　/***重点***/
  Object.assign(this.page, {
    pageNum: pagination.current,
    pageSize: pagination.pageSize,
  });
};

render() {
　　return (
　　　　<A 
　　　　　　page={this.page}
　　　　　　handlePageChange={this.handlePageChange}

　　　　>
　　);
}

 

上面代码中的【重点】红色的部分，初学者（像我之前）往往会使用es6的结构赋值语法代替，代码如下：

this.page = {
  ...this.page,
  pageNum: 1,
};

这样的会就等于重新创建了一个新的对象，给this.page重新赋值了，

也就是说：我们之前的render中就把this.page对象传递给了子组件，而原来的对象已经与现在的不是同一个了，（现在的是刚刚出炉的新对象），

而且：this.page的改变，与state不同，并不会引起组件的re_render,所以对<A>组件的props的传递并不会再次执行，所以这时候<A>的this.props.page !== <Test>的this.page。他们是两个完全不相干的对象；这时候就会引起BUG

总结：如果要传递引用类型给子元素，并且想要保持与父子元素永远指向同一个对象，就不能使用解构赋值，而应该使用： Object.assign( this.page，{ } )； 或者直接 this,page.key = xx；这样就能保证传递给子组件的值，永远是内存中的同一个地址，实现与父组件的同步；

如果传递的是state,则可以无需注意这个，因为当你重新赋值为新对象的时候，程序会执行re_render方法，子组件就会重新获取props，实现与父的实时同步