React 的生命周期
import React from "react";
//生命周期第一步:挂载一个组件首先,执行constructor来创建组件。调用render函数 获取Dom结构,渲染dom,当组件挂载成功(DOM渲染完成),会执行componentDidMount生命周期函数
//生命周期第二步 修改 props或者调用this.setState方法修改状态就会进行更新操作,或者直接调用forceUpdate时会重新调用render函数,进行更新操作; 会执行componetDidUpdata函数
//生命周期第三步 :当我们的组件不再使用,会被从DOM中移除掉(卸载);这个时候会回调componentWillUnmount生命周期函数;
//几个不常用的钩子函数
// getDerivedStateFromProps:state 的值在任何时候都依赖于 props时使用;该方法返回一个对象来更新state;
// getSnapshotBeforeUpdate:在React更新DOM之前回调的一个函数,可以获取DOM更新前的一些信息(比如说滚动位置);
// shouldComponentUpdate:该生命周期函数很常用,但是我们等待讲性能优化时再来详细讲解;
class Componens extends React.Component {
render() {
return (
<div className="tab-control">
{
this.props.title.map((item, index) => {
return (
<div key={index} className="tab-item" onClick={e => this.props.itemClick(index)}>
<span>{item}</span>
</div>
)
})
}
</div>
)
}
}
export default Componens;
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步