react复习总结(2)–react生命周期和组件通信

释放双眼,带上耳机,听听看~!
00:00
00:00

这是react项目复习总结第二讲

第一讲:https://www.cnblogs.com/wuhairui/p/10367620.html

 

首先我们来学习下react的生命周期(钩子)函数。

什么是react生命周期呢?

就是指react组件执行时在某个特定的时间点自动调用执行的函数。

 

ES5传统创建组件方式是这样的:

getDefaultProps:设置组件默认的props(属性)

getInitialState:设置组件默认的state(状态)

react复习总结(2)--react生命周期和组件通信

执行顺序是:

react复习总结(2)--react生命周期和组件通信

另外,getDefaultProps函数组件未创建实例时就会被执行。

 

除了上面的ES5,还有现在大多数被使用的是ES6模式创建组件。

以类的方式作为组件,使用的组件就是这个组件类的对象。

static defaultProps:设置默认属性

constructor:用于设置默认状态 初始化。必须使用super,之后才能使用this

react复习总结(2)--react生命周期和组件通信

执行顺序:

react复习总结(2)--react生命周期和组件通信

 

componentWillMountcomponentDidMount 这2个生命周期是首次进入页面render前执行的

react复习总结(2)--react生命周期和组件通信

顺序:

react复习总结(2)--react生命周期和组件通信

 

componentWillReceiveProps 是组件的传入属性父组件修改后执行的:

接收到父组件传入的新props

react复习总结(2)--react生命周期和组件通信

父组件修改传入属性的方式:

传入的值是个state就可以。

react复习总结(2)--react生命周期和组件通信

(这是组件通信的一种方式,属于父子组件关系的通信,这是父传子

 

要实现子传父的话,那父组件调用子组件时传个回调函数获取就可以了

如:

这是父组件render

react复习总结(2)--react生命周期和组件通信

父组件回调函数

react复习总结(2)--react生命周期和组件通信

这是子组件属性被修改函数,执行这个回调函数即可执行父组件函数

这里这么用,父组件传值给子组件后,子组件能立即回调父组件,形成有来有回。

react复习总结(2)--react生命周期和组件通信

点击按钮,这里输出111。

 

直接子传父的方法:

父:

react复习总结(2)--react生命周期和组件通信

子:

react复习总结(2)--react生命周期和组件通信

父组件传个回调给子组件,子组件通过this.props可调用到这个函数,子就可以传值给父组件了。

 

点点赞赏,手留余香

给TA打赏
共0人
还没有人赞赏,快来当第一个赞赏的人吧!
    站长资讯

    逻辑回归损失函数推导

    2020-11-9 3:44:30

    站长资讯

    lvs dr 模型配置详解

    2020-11-9 3:44:32

    0 条回复 A文章作者 M管理员
    欢迎您,新朋友,感谢参与互动!
      暂无讨论,说说你的看法吧
    个人中心
    购物车
    优惠劵
    今日签到
    私信列表
    搜索