2. 父子之间数据传递 / 生命周期

组件的信息传递的方式：

　　1.props　　（父子之间的时候使用）

　　2.上下文　　（有共同祖先，多层或平行之间需要操作数据的时候使用    2019-2-16号，周老师的课（有时间补笔记）（2019-2-22）

　　3.redux　　（有没有共同祖先 都可以实现状态管理、信息共享）

 

---

 

this.state = {} 状态初始化 初始化必须放在 constructor 下

　　只要更新 state 就会更新视图。

　　this.setState({ xxx })

表单元素如果设置一个默认值（基于 state 中的状态），此时表单元素就是一个受控组件。

　　value、checked

---

从父级传进来的为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 *** 关闭定时器，清除格式事件...

 

转载于:https://www.cnblogs.com/MrZhujl/p/10283104.html