react、mobx学习，该笔记只记录对自己有用的部分
[1] react基础
[1.1] prop 校验
在开发环境下，为了更好地定位问题，最好能够对组件的对外接口prop做一些规范，以免传入错误的数据导致产生与我们期待不一致的数据结果，而PropTypes这个包就是用来定义这些规范的。在React 16版本之后, PropTypes 从react包 换到了prop-types 包中,所以想要使用PropTypes 需要这样:
import PropTypes from ‘prop-types’;
比如，如下的一段代码，（声明，该日志所有的组件都是es6的react写法）
import React, { Component } from 'react';//只要你的文件中使用了JSX语法，则引入React是必须的，最终JSX会被转换为react相关的表达式
import PropTypes from 'prop-types';
class Person extend React.Component{
construct(props){
super(props);
}
Person.propTypes={
name:PropTypes.string.isRequired //注意Person的属性和PropTypes包的第一个字母大小写区分，
//这一句表示对外接口的props中 name属性是必须的，并且得是string类型
//如果传入的值不符合，则会在控制台输出错误日志，方便我们排查问题
}
}
但是！在生产环境中如果还使用校验的话，会占用一定的内存资源，所以我们在生产环境中需要移除这些校验代码，可以使用工具 babel-react-optimize 这个工具，确保在发布产品的时候才去使用它
[1.2] prop 初始值
在组件获取外部数据的时候，我们经常会有一些需求，在该prop没有传入的时候，需要一个初始值，因为在组件内部prop是不允许修改的，所以我们通常会在state中做这样一种处理 ``` this.state={ name:props.name||'xxx' } ```更好地方式是：
class Person extend React.Component{
construct(props){
super(props);
}
Person.defaultProps={
name:'xxx'
}
[1.3] 生命周期函数
React严格定义了组件的生命周期，大致为下面三个过程
1、装载过程(Mount)，即把组件挂载到DOM树种渲染
2、更新过程(Update)，组件重新渲染过程
3、卸载过程(Unmount)，组件从DOM树删除的过程
1、装载过程 函数执行顺序
constructor
=>
getInitialState、getDefaultProps(旧形式获取初始state和prop才会执行这个函数，现已经不建议这样使用，相当于this.state={}以及 Component.defaultProps={})
=>
componentWillMount
=>
render 仅仅返回JSX表达的虚拟DOM结构
=>
componentDidMount DOM结构被装载到浏览器的DOM树上执行
一个组件的装载过程如上，那么多个组件以及，父子组件又是什么顺序呢？
结果：根据实际的测试 ，app父组件 ， first为子组件（两个）
app render
first render（执行两次）
first 1 componentDidMount
first 2 componentDidMount
app componentDidMount
由上面可以看出 componentDidMount 并不是在 render后立马执行，而是会在适当的时机被调用，比如app的componentDidMount，会在子组件 render完毕，并执行完componentDidMount后 再执行。
其执行顺序 应该是由 父(render)-》子(render、didmount)-》父(didmount)的一个过程
2、更新过程 函数执行顺序
componentWillReceiveProps(nextProps)
=>
shouldComponentUpdate(nextProps,nextState)
=>
componentWillUpdate
=>
render
=>
componentDidUpdate
componentWillReceiveProps 这个函数在组件第一次挂载之后，每次重新渲染都会执行，不管prop是否有变化，所以shouldComponentUpdate则是来控制，是否允许该组件重新渲染，默认情况下如果不处理shouldComponentUpdate函数，则会默认重新渲染,当然，重新渲染并不意味着React会把所有的DOM重新渲染，在shouldComponentUpdate返回true的情况下，执行render，返回虚拟DOM结构，React通过与上次的虚拟DOM结构比对，重新渲染有改动的部分。 所以shouldComponentUpdate只不过提前结束了无用的计算而已。如果要考虑应用的性能，这个函数是很必要的。
shouldComponentUpdate 函数除了会被prop的变化触发，还会被组件本身的setState触发。
3、卸载过程
componentWillUnmount