2.React数据传递 之☞ 父子之间数据传递 / 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")

}

}

以上是 2.React数据传递 之☞ 父子之间数据传递 / React生命周期 的全部内容, 来源链接: utcz.com/z/382232.html

回到顶部