浅析:React生命周期

react函数:

内置对象state是值状态,页面重新渲染需要使用
this.setState({
改变的参数;

})

react生命周期详解:
1、组件初始化:
constructor(props) {
super(props);
this.state = { seconds: 0 };
}
super(props)用来调用基类的构造方法( constructor() ), 也将父组件的props注入给子组件,功子组件读取(组件中props只读不可变,state可变)。
而constructor()用来做一些组件的初始化工作,如定义this.state的初始内容。

getDefaultProps()
设置默认的props,也可以用dufaultProps设置组件的默认属性。

getInitialState()
初始化state,可以直接在constructor中定义this.state

2、组件的挂载阶段:
此阶段分为componentWillMount,render,componentDidMount三个时期
(1)componentWillMount在组件挂载前调用,且只调用一次,在此处修改this.state不会引起页面的重新渲染,也可以把此处的内容放到初始化块中使用。
(2)render函数根据组件的props和state,return一个React元素,相当于根据模板和参数生成一个dom块返回。
(3)componentDidMount是用于组件挂载在dom后执行的,类似于for循环中的i++用法。

3、组件更新阶段
shouldComponentUpdate(2)函数是在挂载阶段reder函数前调用,默认情况下只要组件发生变化都会引起页面渲染,(重新渲染才会调用,初始化不会调用)
如果某些情况不需要该组件进行页面重新渲染,则让其返回值为false(禁止页面重新渲染),不调用render函数
参数为nextProps和nextState,分别表示下一个props和下一个state的值
shouldComponentUpdate(nextProps,nextState){
console.log(“1=”);
return true;
}

componentWillReceiveProps(1)函数render函数前调用,在父组件重传props时就会调用这个方法,可以调用修改状态

componentWillUpdate(3)函数render函数前调用,参数:nextProps, nextState

componentDidUpdate(prevProps, prevState)函数在render后调用

4、组件卸载阶段
componentWillUnmount此方法在组件被卸载前调用,可以在这里执行一些清理工作,比如清除组件中使用的定时器,清除componentDidMount中手动创建的DOM元素等,以避免引起内存泄漏。

内置变量:
this.interval
this.interval = setInterval(() => this.tick(), 1000);
定时任务,每秒调用tick函数
销毁定时器的函数:
componentWillUnmount() {
clearInterval(this.interval);
}

this.handleChange
是绑定组件的点击事件
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);

}
handleChange(e) {
}

this.handleSubmit
form表单的提交事件

函数:
1、.concat()
var a = [1,2,3];
a = a.concat(4,5);
a
(5) [1, 2, 3, 4, 5]

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值