React note9（脚手架：性能优化&react脚手架端口&项目如何启动&避开eslint语法检查）

╰+攻爆jí腚メ 2022-11-29 12:26 136阅读 0赞

# 性能优化 #

--------------------

勾选变色

我们先用传统写法来完成勾选变色的功能，会使用到父子组件间的正传、逆传。

在判 " 勾选的是谁 " 时，思路是这样的：先是父组件正传一个函数给子组件，子组件将同时传过来的数组里某个对象的index绑定给父组件传过来的函数，然后在父组件的函数体里面通过子组件反传的变量index判断当前需要改变的元素是数组里面的哪个元素，然后改变该元素的style值。

当然，真正的dom元素样式改变是在子组件里面，通过判断父组件正传过来的style的值为true就变色，为false就不变色。

>>Check1.jsx --- 父
    
    import React, {  Component } from 'react'
    import Check2 from "./check2.jsx"
    
    export default class check2 extends Component { 
        constructor(props){ 
            super(props)
            this.state={ 
                arr:[
                    { name:"路飞",style:false},
                    { name:"呢子扣",style:false},
                    { name:"炭治郎",style:false},
                ]
            }
        }
        fun=(num)=>{ 
            //console.log(num);//找到勾选的是谁
            let newarr=this.state.arr;
            newarr[num].style=!newarr[num].style;
            this.setState({ 
                arr:newarr
            })
        }
        list=()=>{ 
            // 不在render里写，避免污染
            return this.state.arr.map((item,index)=>{ 
                return(
                    <Check2 key={ index} name={ item.name} style={ item.style} num={ index} listfun={ this.fun} />
                )
            })
        }
        render() { 
            return (
                <div>
                    <h4>I' check1 as a father.</h4>
                    { this.list()}
                </div>
            )
        }
    }

>>Check2.jsx---子
    
    import React, {  Component } from 'react'
    
    export default class check2 extends Component { 
        render() { 
            let { name,style,num,listfun}=this.props;
            //console.log("我是子组件");
            return (
                <div style={ { color:style?"red":""}}>
                    <input type="checkbox" onChange={ listfun.bind(this,num)}/> { /*逆向传值*/}
                    <span>{ name}</span>
                </div>
            )
        }
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center]

有没有发现一个问题：  
咱们在子组件的render中添加一个输出，发现每次运行的时候子组件都被调用了多次。为什么会这样？

原因是我们在更新数据的时候，使用setState修改整个数据，而当数据变了，在遍历的时候所有内容都要被重新渲染。

如果数据数量少还好，如果遍历出来的数据很多，就会严重影响性能。

做项目时尽量避免这种逆传。

那有没有什么解决方案呢？整理了三种。

### 提高性能–方案1 ###

使用生命周期的钩子：

shouldComponentUpdate(nextProps,nextState)  // 判定组件是否要更新
    
    //nextProps---最新的props ; nextState---最新的state

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_ceter]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_ceter 1]  
运行之后发现可以减少不必要的渲染，提高性能。

### 提高性能–方案2 ###

纯组件（PureComponent）— **类组件**中使用。

`PureComponent`是优化react应用程序最重要的方法。组件发生更新时，组件的props和state没有改变，render方法就不会触发 。可以减少不必要的render次数，提高性能。

省去虚拟dom生成和对比的过程，其实就是react自动帮忙做了一个浅比较（它只比较props和state的内存地址，如果内存地址相同，则shouldComponentUpdate生命周期就返回false。）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_cnter]  
![在这里插入图片描述][20200822093632514.png_pic_cener]

### 提高性能–方案3 ###

`React.memo()` — **无状态组件**中使用。

类似于PureComponent，不过React.memo是函数/无状态组件，React.PureComponent是类组件。

memo依然是一种对象的浅比较。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_cente]

![在这里插入图片描述][20200822094353698.png_pic_cener]

# 修改react脚手架端口 #

--------------------

react脚手架端口号：默认是3000
    
    修改路径：
    当前项目路径/node_modules/react-scripts/scripts/start.js
    
    改端口： 
    onst DEFAULT_PORT = parseInt(process.env.PORT, 10) || 5000（你要修改的端口）;

![在这里插入图片描述][20200820195720632.png_pic_ceter]

# 怎么知道项目是如何启动的 #

--------------------

为什么create-react-app的启动命令是 npm start？和vue不一样？

怎么知道启动项目的方法？

找到项目中的 package.json文件找到 scripts属性：  
![在这里插入图片描述][20200820195739266.png_pic_cener]

大家发现是start，那么启动命令就是 npm run start / npm start（只有是start的时候可以省略run 别的不行）  
![在这里插入图片描述][20200820195746499.png_pic_centr]

修改之后 那么启动项目就必须是 npm run dev 。

# 项目中遇到的问题 #

--------------------

在react脚手架中使用 confirm 有时会报错，原因是 eslint 屏蔽了这个方法。  
![在这里插入图片描述][20200820195806838.png_pic_cener]  
![在这里插入图片描述][20200820195812656.png_pic_cnter]

解决方式：使用 `// eslint-disable-next-line`这句注解js语句，就不用进行eslint语法检查了。  
![在这里插入图片描述][20200820195816392.png_pic_cener]

Eslint：脚手架中默认安装了，但是建议在没有特殊需求的情况下不要去配置，以免不小心修改其他配置内容。

# 总结 #

--------------------

一、为了解决上面这种消耗性能的情况，然后为了提高性能， 3种解决方式：

1、钩子 `shouldComponentUpdate(nextProps,nextState)`  
2、纯组件 `PureComponent`  
3、无状态组件中使用的性能优化 `React.memo()`

二、在react项目中，如果想改变端口号，可以在/node\_modules/react-scripts/scripts/start.js中进行修改。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center 1]

三、// eslint-disable-next-line 可以让下面一句取消eslint验证。

四、react脚手架中，通过 npm start 或者 npm run start 启动项目，不是所有命令都可以通过 npm 命令名 来实现。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/7677c61e600244baa4f95cb7b5993e05.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_ceter]: /images/20221124/00f2a14bb5a34be0a5a2c94831156c2d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_ceter 1]: /images/20221124/cdef6f6ead444ce8959b7afe2655e64d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_cnter]: /images/20221124/e97f36fa26e64c4a88b2d2d724dad76c.png
[20200822093632514.png_pic_cener]: /images/20221124/4555ca3d6c23472c8314a80850403e3c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_cente]: /images/20221124/2a0ed2dac6d34c98bef670004d814240.png
[20200822094353698.png_pic_cener]: /images/20221124/a2b86c29effe44759e351590ba560c20.png
[20200820195720632.png_pic_ceter]: /images/20221124/9df88c5ecbaa4fdbbdd2f1a8bee8a5c2.png
[20200820195739266.png_pic_cener]: /images/20221124/ce57db8eb9dc40e7be0ea42052659e43.png
[20200820195746499.png_pic_centr]: /images/20221124/70532c3d061946f6a26c1204b3bc38c7.png
[20200820195806838.png_pic_cener]: /images/20221124/bbd4473effa54f47a5999d700e2d36d4.png
[20200820195812656.png_pic_cnter]: /images/20221124/4f1b5f1f98624bdabae61ff5e8caf45b.png
[20200820195816392.png_pic_cener]: /images/20221124/70e61364ea364ccb92af07475c98cabb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221124/7e7e8a44f6c6418c81ef3166cb0a63cf.png