天气这么好,欢迎光临阁下小站

0%

1.由于项目很大,今天打包出现了
FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed- process out of memory
这种错误,上网查了下说是内存溢出问题,
也就是说你的硬件内存有点小,反正不够你打包用,怎么办?
接下来修改下面几个地方就可以了
node_modules下的bin文件,找到cross-env.cmd还有webpack.cmd文件,在

Quick Start

1.react路由传参

xxx this.props.history.push({pathname:"/path/" + name}); 读取参数用:this.props.match.params.name

优势 : 刷新地址栏,参数依然存在
缺点:只能传字符串,并且,如果传的值太多的话,url会变得长而丑陋。

2.query

this.props.history.push({pathname:"/query",query: { name : 'sunny' }}); 读取参数用: this.props.location.query.name

优势:传参优雅,传递参数可传对象;
缺点:刷新地址栏,参数丢失

3.state

this.props.history.push({pathname:"/sort ",state : { name : 'sunny' }}); 读取参数用: this.props.location.query.state

优缺点同query

xxx this.props.history.push({pathname:"/web/departManange?tenantId" + row.tenantId}); 读取参数用: this.props.location.search

转自:https://www.jianshu.com/p/ad8cc02b9e6c

第二

状 态
1、工作原理
大部分情况下,实际开发过程中,我们会考虑使用一些管理状态的外部库,如Redux 和 Mobx。导致许多新手上来就去学习使用管理状态的外部库,以致于很多情况下,我们从未真正了解过如何正确使用 React 状态。
在 React 组件的生命周期中,可以使用生命周期中的方法或者时间处理器中的setState多次修改状态。当状态发生变化时,React 就会重新渲染组件视图。
举例来说:
this.state = { name:”Tom” };
//然后用setState
this.setState = { age:18 };
//最终的state
{ name:”Tome”, age: 18 }
所以当state状态改变时,React会自动执行再次渲染的方法,从而影响UI视图的改变。
在一些情况下,需要在更改状态完成之后执行相关操作,这个时候setState的第二个参数,就派上用场了。React为此提供一个回调函数:
this.setState({
age:20,
},()=>{
console.log(“My age is:”,this.state.age);
});
2、异 步
在 React 官方文档中,应该总是总是将setState方法当成异步操作的。举个例子来说:
//点击事件函数
handleClickBtn = () =>{
this.setState({
age:18,
});
console.log(“state is now:”,this.state); //state is now:null
}
render(){
return
}
此时,控制台上将输出:state is now:null
出现这种情况是,React 知道如何优化事件处理器内部的状态更新,同时进行批处理,以获得更好的性能。
如果对代码稍加修改:
//点击事件函数
handleClickBtn = () =>{
//增加延迟
setTimeout(()=>{
this.setState({
age:18,
});
});

console.log("state is now:",this.state); //state is now:object {age:18}

}
render(){
return
}
此时控制台上将输出: state is now:object { age:18}
出现这种情况是:React 不知道如何优化执行过程,只能尝试尽快改变状态。
这里使用 setTimeout 只为演示 React 执行行为,尽量避免这样编写事件处理器。