react props给子组件的state赋初值时遇到的问题

react props给子组件的state赋初值

constructor(props) {
  super(props);
  this.state = {
    dataSource: props.dataSource || [],
  }
}

• 缺点

1. 父组件该值改变不会触发子组件state的改变
2. 父组件在渲染完成时如果还没有拿到数据（如请求延时），子组件是无法赋初值的

• 解决方法

// 使用componentWillReceiveProps重新赋值
componentWillReceiveProps(nextProps) {
  this.setState({
    dataSource: nextProps.dataSouce
  })
  // 也可以写一些赋值条件
  if (nextProps.dataSouce !== this.props.dataSource && !nextProps.loading){
    // dosomething
  }
}

这时会发现不仅改变了子组件的state，而且父组件传过来 的props.dataSource也改变了
原因：props.dataSource是引用类型，可被修改
解决方法：使用浅拷贝或深拷贝来更改引用类型的数据，即让它不可变。

---

顺便介绍一下一些方便的拷贝方法

1. es6的Object.assign

const obj1 = {a:1,b:2}

const obj2= Object.assign({},obj1);//深拷贝

const obj3= Object.assign(obj1,{});//浅拷贝

2. JSON.stringify()和JSON.parse()的转化

JSON.parse(JSON.stringify(obj))

3. 扩展运算符的方法深拷贝
   注意：上述两种方法简单对象时是深拷贝，复杂对象时是浅拷贝
4. 使用npm包

• lodash.js
  浅拷贝_.clone(value)
  深拷贝_.cloneDeep(value)
• immutable.js

import { Map, List } from 'immutable'
// Map用于对象，List用于数组
const newObj = Map(obj)
const newArr = List(arr)

——我是一只皮卡球，每天进步一点点