2.React数据传递 之☞ 父子之间数据传递 / React生命周期
组件的信息传递的方式：
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")
}
}