文字看的react教程,视频选择的技术胖的教学,毕竟是(常)免(开)费(车)。
跟着视频走可能会遇到如下问题,持续更新如下:
1.安装官方推荐react项目时,报异常:
解决方案:删除如下文档里面的文件
C:\Users\当前计算机用户名字\AppData\Roaming\npm-cache\
具体目录不知道的话可以对比报错提示的.log地址。
再重新执行安装即可。
文章参考:https://www.jianshu.com/p/442f88ced250
2.同上安装时,如果没有科学上网,会比较慢,因为这个create-react-app默认调用npm,我们可以把npm的register永久设置成cnpm
npm config set registry https://registry.npm.taobao.org
-- 配置后可通过下面方式来验证是否成功
npm config get registry
-- 或npm info express
3.众所周知,react通过虚拟dom开发页面即JSX,根目录有且只有一个,当某些情况下需要两个“根目录”时,则可以用React.Fragment,作用是帮你虚拟聚合一个子元素列表,而不在dom中。
import React, {Component, Fragment} from 'react
class test extend Component{
render(){
return(
<Fragment>
<div>111</div>
<div>222</div>
</Fragment>
)
}
}
在控制台中可以看到Fragment并不是真正的dom
4.setState都知道是改变状态的方法,但它却是异步的,如果该方法后紧跟着获取改变后的内容,则会发现state值没有改变。如:
addList(){
this.setState({
list:[...this.state.list,this.state.inputValue],
inputValue:''
})
//关键代码--------------start
console.log(this.state.list)
//关键代码--------------end
}
将新的inputValue放入list中,再打印,“眉头一皱,发现事情并没有那么简单”
setState还提供第二个参数,即它的回调函数,可以如下:
this.setState({
list: [...this.state.list, this.state.inputValue],
inputValue: ''
}, () => {console.log(this.state.list)})