ReactJs子组件更新问题

今天尝试用react写一个todolist小demo练练手，父组件通过props传递了一个数组和一个字符串给子组件。 在子组件中的constructor中拿到对应props中的值后赋值给子组件的state，如下

this.state = {
    str: props.str,
    arr: props.arr
} 

然后直接在子组件的jsx中使用，后来发现父组件props的值通过setState改变之后，子组件中的数组值发生了改变，字符串值却没有发生改变。 通过微信群朋友的提点及自己的测试，发现原来是父组件中的props值的改变不能让子组件中对应值自动刷新，若要使用子组件state来更新，则需要在子组件中的componentWillReceiveProps中去手动更新state。 现有写法中数组能够更新是因为arr为引用类型，子组件中的arr数据只是一个指针指向父组件中的arr，父组件中的arr改变，子组件中的arr也就改变了。 若要实现react中的子组件根据父组件数据刷新，目前有两种方法：

1.子组件中直接使用父组件props值，不要通过另设state

render() {
    return (
        <span>{this.props.str}{this.props.arr.map(function(item){......}</span>
    )
}

2.若要在子组件中设置state，则可以在componentWillReceiveProps中去手动更新state

componentWillReceiveProps (nextProps){
    this.setState({
        str: nextProps.str,
        arr: nextProps.arr,
    })
}