快乐十分选号技巧: react复习总结(2)--react生命周期和组件通信

山西快乐十分走势 www.yfhdr.cn 这是react项目复习总结第二讲,

第一讲://www.yfhdr.cn/wuhairui/p/10367620.html

 

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

什么是react生命周期呢?

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

 

首先一图献上:

流程图显示:

1.getDefaultProps时是定义默认值。

2.页面首次渲染:getInitialState时是定义默认状态-->然后componentWillMount(渲染前执行)-->render(渲染)-->componentDidMount(渲染后执行)

3.页面更新:当执行this.setState后,先执行shouldComponentUpdate(是否需要更新,一般为true)-->componentWillUpdate(更新前执行)-->render(渲染)-->componentDidUpdate(更新后执行)

 

根据平时开发经历:不变的数据一般建议直接使用this.props渲染到render中,如果需要后期变化的数据可以先存着state中,使用this.state渲染到render中,后期使用this.setState进行修改。

如果有的数据要在渲染前就改变数据??梢允褂胻his.props或this.state直接修改,然后渲染render。

 

 

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

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

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

执行顺序是:

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

 

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

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

static defaultProps:设置默认属性

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

执行顺序:

 

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

顺序:

 

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

接收到父组件传入的新props。

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

传入的值是个state就可以。

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

 

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

如:

这是父组件render

父组件回调函数

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

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

点击按钮,这里输出111。

 

直接子传父的方法:

父:

子:

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

 

posted @ 2019-03-12 23:53 海瑞菌·博客 阅读(...) 评论(...) 编辑 收藏
  • 高温“烤验”,品读这些自带凉意的避暑诗词 2019-05-19
  • 2015科教频道中秋晚会《天涯共此时》 2019-05-19
  • 特朗普政府用政治“边缘政策”处理贸易问题是玩火 2019-05-17
  • 高清:探访苟坝见证历史 红军在此留下珍贵遗物 2019-05-15
  • 交通小事故,几分钟就能处理完 2019-05-15
  • 在现时代,无论中国还是西方发达国家都是社会财富公有制和私有制并存的社会,由于仍旧存在社会财富私有制,所以必然存在贫富差别,离开私有制来谈“贫”和“富”... 2019-05-15
  • 【学习时刻·经济实说②】管清友:中央经济工作会议的十大亮点 2019-05-15
  • 绿染江源,千湖归来——三江源生态保护建设取得阶段性成效 2019-05-13
  • 把握和传承好“变则通”思想(大家手笔) 2019-05-13
  • 5月份70个大中城市商品住宅销售情况:一线城市商品房价格同比持续下降 2019-05-08
  • 官方:装备管理失职 恒大俱乐部总经理等人遭处罚 2019-05-01
  • 中共一大代表中最早辞世的王尽美:3首小诗与27年人生 2019-04-29
  • 不管怎么修饰辞藻,只要放弃革命,就是苏联的结果,还用证明吗? 2019-04-27
  • 新和县:12333为参保群众提供咨询便利 2019-04-22
  • 秋冬进补“小人参” 称霸国人餐桌3000年 2019-04-22
  • 246| 814| 191| 639| 583| 387| 16| 451| 318| 990|