React父组件更新props触发子组件的state

前言

1、两个多月没写笔记了，原因是...之前在毕业设计，毕业旅行以及各种浪（逃
2、因为几乎休息了一个半月没写过代码，以及没有高强度的工作和学习，导致刚上班的头几天一直打瞌睡，不过到第四天终于缓了一些了，还没熟悉我司的框架，先写了个react的小demo
3、写惯了vue，没有v-model这种东西还真不习惯

组件和props

官网介绍的很详细（官方文档），子组件通过接收props来进行渲染，每次props改变都会重新render。

state和生命周期

1、这是react的一个重点，state类似于vue中的data，某种程度上来说它只存在于当前的组件（当然有通过指针改变对象的方式，这里不做讨论），所以也称之为本地状态
2、react中的双向绑定需要通过onChange和value去实现（其实和vue是一样的，只不过vue封装成了v-model）
3、react中的改变状态需要通过setState方式触发，不能直接赋值变量
4、生命周期（以后更新）

问题和解决方案

在vue中实现编辑的功能时，可以通过v-model很方便的在子组件中实现
这一功能在react中需要获取默认值（props赋值给input），又需要允许用户输入，所以只能初始化时把props里的值赋给state，通过state来实现编辑，关键props还是可变的（因为一个编辑框对应多条可编辑的数据），所以在改变props时，就要保证子组件的state也能更新。
父组件：

render() {
  return (
    <div>
      <Modal
        {...this.props}
        modal={this.state.modal}
        formData={this.state.formData}
       />
    <div>
  )
}

openModal(data, index) {
  this.setState({
    formData: Object.assign({index: index}, data),
    modal: true
  })
}

子组件，通过componentWillReceiveProps方法获取nextProps

componentWillReceiveProps(nextProps) {
  this.setState({
    index: nextProps.formData.index,
    id: nextProps.formData.id,
    name: nextProps.formData.name,
    grade: nextProps.formData.grade
  })
}