【持续】初学React的一些问题

文字看的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)})