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

最新推荐文章于 2023-09-06 06:00:00 发布

weixin_43297321

最新推荐文章于 2023-09-06 06:00:00 发布

阅读量404

点赞数

分类专栏： React 笔记非原创文章标签： react

本文链接：https://blog.csdn.net/weixin_43297321/article/details/108131486

版权

React 笔记非原创专栏收录该内容

14 篇文章 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>
        )
    }
}

在这里插入图片描述

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

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

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

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

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

提高性能–方案1

使用生命周期的钩子：

shouldComponentUpdate(nextProps,nextState)  // 判定组件是否要更新

//nextProps---最新的props ; nextState---最新的state

在这里插入图片描述

运行之后发现可以减少不必要的渲染，提高性能。

提高性能–方案2

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

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

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

提高性能–方案3

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

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

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

在这里插入图片描述

修改react脚手架端口

react脚手架端口号：默认是3000

修改路径：
当前项目路径/node_modules/react-scripts/scripts/start.js

改端口： 
onst DEFAULT_PORT = parseInt(process.env.PORT, 10) || 5000（你要修改的端口）;

在这里插入图片描述