组件的信息传递的方式：
1.props （父子之间的时候使用）
2.上下文 （有共同祖先，多层或平行之间需要操作数据的时候使用 ）
3.redux （有没有共同祖先 都可以实现状态管理、信息共享）
this.state = {} 状态初始化 初始化必须放在 constructor 下
只要更新 state 就会更新视图。
this.setState({ xxx })
表单元素如果设置一个默认值（基于 state 中的状态），此时表单元素就是一个受控组件。
value、checked
props
从父级传进来的为props
<input num="n"> props:['num']
<input num="aaa" /> this.props.num
父级传子级：
1.把数据挂在子组件的属性上
return ( <div> <Ppa {...{ num, // num : num -> num }}/> </div> )
2.子组件接收父组件的数据通过this.props
let { num } = this.props
console.log( num )
表单如果要设置默认值：
defaultValue / onChange
checkbox defaultChecked / onChange
Vue里面是这样接收的：
@nn="cc"
this.$emit('nn')
子传父：
方法一：
1.父级需要定义一个修改数据的方法
fn = () => { let { num } = this.state; num++; this.setState({ num }) }
2.把修改数据的方法传给子组件
render() { return ( <div> <Ppa {...{ Fn: this.fn }} /> </div> ) }
3.当子组件需要修改父级数据的时候，调用父级传过来的修改方法
add = () => { let { Fn } = this.props; Fn() }
方法二：(把父级的数据变成子级，子级的数据不跟父级的数据有瓜葛了)
1.把父级的数据变成子级的
constructor(props){ super(props); this.state = { cn: props.num } }
2.子级修改
add = () => { let { cn } = this.state; cn++; this.setState({ cn }) }
生命周期：
分三个大阶段：mounting、updating、unmounting
回调函数（钩子函数、生命周期函数）：当某个条件（事务）成立之后触发的函数
mounting
只会执行一次：
constructor -> 数据的初始化 ***
componentWillMount 组件挂载之前
render 解析jsx ***
componentDidMount 挂载成功 *** 数据请求 时
componentWillMount方法的调用在constructor之后，在render之前，在这方法里的代码调用setState方法不会触发重渲染，
所以它一般不会用来作加载数据之用，它也很少被使用到。
验证：
在 render中打印 this.state的数据
如果在componentWillMount中调用 setState,那么 render中打印 this.state，
第一次是数据初始化的状态，第二次是改变之后的状态（异步请求）
updating
当数据改变的时候触发：
componentWillReceiveProps ** 当父级的数据变化才执行
shouldComponentUpdate (nextProps,nextState)** 优化性能，接下来的组件要不要更新
如果写了shouldComponentUpdate，就一定要有返回值return true，不然为false。
不写这个钩子函数默认返回一个true，只有在true的情况下，下面三个钩子函数才会执行
componentWillUpdate
render ***
（类似于Vue中的computed：一上来执行一遍，数据变化的时候就会执行）
componentDidUpdate ** 当子级的更新完成才会执行父级的componentDidUpdate
（类似于Vue中的watch，但不再是监听指定的数据，而是所有的数据变化都会触发。一上来不触发，数据改变就触发）
unmounting
组件卸载的时候：
componentWillUnmount *** 关闭定时器，清除格式事件...
注意：关闭页面，此生命周期来不及出发，所以清除 localStorage 信息不能在此执行。一般可以在 onbeforeunload 事件中执行。
下面稍微介绍一下这个事件：
onbeforeunload 事件在即将离开当前页面（刷新或关闭）时触发。
// body 支持此事件 <body onbeforeunload="myScript"> // 可以挂在 window 上 window.onbeforeunload=function(){myScript}; // 时间监听的方法 window.addEventListener("beforeunload", myScript);
生命周期使用举例：
shouldComponentUpdate(nextProps, nextState)
// 当state中的data发生改变的时候才触发render（返回 true 时触发 render） shouldComponentUpdate(nextProps, nextState) { if (nextState.data !== this.state.data) { return true } return false }
componentWillReceiveProps(nextProps)
componentWillReceiveProps(nextProps) { if (nextProps.params !== this.props.params) { console.log("do something") } }