在学习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;