1.react中的变量存储&更新&生命周期

Question1：在react中，我们可以把数据保存在props、state、store、或者是this中，但是如何正确的去使用呢？

1. 在React中props被赋予的角色是不可变的属性

他是组件之间沟通的一个接口，从原则上将，它只能从父组件流向子组件；使用方式：给父组件添加属性，他将传递给子组件的this.props

注意点：
      1. key和ref不会传递给子组件的this.props;
      2. 只要属性没有值，React会自动解析为布尔值true；
      3. 属性值除了字符串外，其他值需要用花括号包裹
      4. 子组件内部不能改变this.props的值；

综上： 使用props存储父组件传递给子组件的值

2.React使用this.state来管理组件内部状态

当我们使用this.setState去改变state属性时，会触发一次渲染；
state主要时来存储用户界面（UI）的状态而不是数据；
综上：可以将UI的状态和一些临时性的数据（input的输入的值）保存在state中

    1.初始化：react构造函数中 this.state={}
    2.更新：   this.setState
    3.获取：   this.state

需要注意的是，this.setState会触发渲染，如果直接使用this.state={}来更改state值，无法触发渲染。

3. this存储在this的值应该时一些不会因改变而触发二次渲染的值

TIPS:需要注意的是，除了setState和props之外的任何东西都不会触发二次渲染。

所以如果你将值存在this上，并希望该值改变的时候能触发重新渲染那么你将需要在值改变后调用forceUpdate(),

    forceUpdate()直接调用render()，跳过本组件的shouldComponentUpdate()方法但是子组件
的生命周期正常,但是尽量不要去使用forceUpdate，如果你发现你需要使用forceUpdate时，那么你
可能将数据存储错位置了

综上：使用this来存储一些不会触发二次渲染的值

4.store如context、redux存储

组件间跨级传递数据可以存储在store中。

     最好使用store来存储组件状态，而非UI状态。例如：使用store来存储登录状态，一旦登录状态
改变，所有的组件应该重新渲染来更新信息；

综上：使用store来存储多个组件之间共享的数据

Question2：在项目中，这些数据的使用方法

在项目中我们一般经常使用的是redux来管理公共数据，使用state来管理UI状态数据，这两者的数据都是异步方法中改变的，this中存储的值虽然不会进行界面的渲染，但是它的数据是同步改变的；

• redux 单向数据流（异步修改数据）

  
  image.png
• state react的setState并不会实时修改数据，而是放到一个队列中，在合适的时机中去修改数据（异步修改数据）

            this.setState({
                title: '1'
            },() => {
               // here  获取到更新之后的数据
            })

如何获取到修改之后的数据呢？

生命周期

image.png

• props改变之后 componentWillReceiveProps (nextProps)

1. 在接受父组件改变后的props需要重新渲染组件时用到的比较多
2. 接受一个参数nextProps
3. 通过对比nextProps和this.props，将nextProps的state为当前组件的state，从而重新渲染组件

  componentWillReceiveProps (nextProps) {
    nextProps.openNotice !== this.props.openNotice&&this.setState({
        openNotice:nextProps.openNotice
    }，() => {
      console.log(this.state.openNotice:nextProps)
      //将state更新为nextProps,在setState的第二个参数（回调）可以打         印出新的state
  })

组件更新过程
当组件当 props 或者state 被修改的时候，就会引发组件的更新过程 ，依次调用的函数（但是不是所有更新过程都会执行全部函数）。

componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate