前端--React--一点微小的记录

在学习React中的一点微小的工作总结

以umi搭建的，融入qiankun，antd等的微前端。 使用我（菜逼）自己容易理解，通俗易懂的方式表达；文章会不断更新变得像我一样长，要是文中有纰漏请告诉我

1.生命周期

网上可以查到很多生命周期，我只记录实际项目中用得最多的

• componentDidMount
  组件完全挂载到页面上才会被调用执行(render中的内容就是页面，把其他地方写的js文件引入到其中，就是挂载)，所以可以保证数据的加载。此外在这个方法中调用setState可以触发重新渲染。放在这个生命周期里面的就是要在最开始展示页面时要有的数据，就会放在这里处理。

	  componentDidMount() {
   
	        const {
    unreadReminds } = this.props;
	        this.getListDatas(unreadReminds);//页面在初始化时需要需要getListDatas方法获取的数据
	    }

---

---

• componentWillReceiveProps(nextProps)
  父组件的属性发生改变会影响到子组件（通过props传递父组件给子组件），nextProps就是最新的传递过来的状态，下面代码可以看到typeKey和unreadReminds就是从nextProps中取出来的，然后通过本组件方法 getListDatas()处理

    componentWillReceiveProps(`nextProps`) {
       
      const {
        typeKey, unreadReminds = {
       } } = nextProps;
      if (typeKey === 'Remind') this.getListDatas(unreadReminds);
  }
  

2.一些属性

state，props，constructor,setState，connect,ref

• state
  它就是本组件的一个存放状态的仓库，在本组件中很多地方要用到的，甚至需要传递给本组件的子组件时。下图中在this.state中就是本组件自己创建的属性，注意到上面const { unreadReminds = {}, typeKey = '' } = props;就是从父组件中拿出这几个属性。

    constructor(props) {
   
        super();
        const {
    unreadReminds = {
   }, typeKey = '' } = props;
        this.state = {
   
            records: typeKey === 'Remind' ? unreadReminds.data : [],
            pagination: {
   
                paging: 1,
                current: 1,
                pageSize: 5,
                sort: '',
                total: -1,
            },
        };
    }

要是想要在底下方法中要使用this.state中的属性,使用const {属性}=this.state的方式拿出来

  disabledStartDate = startValue => {
   
    const {
    endValue } = this.state;
    if (!startValue || !endValue) {
   
      return false;