流年*https://i.cnblogs.com/files

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;

posted on   流年*  阅读(59)  评论(0编辑  收藏  举报

努力加载评论中...

导航

点击右上角即可分享
微信分享提示