函数组件在使用Hook时的性能优化

开篇

列出渲染次数多的原因

  1. 回调中有异步操作(减少回调中的异步操作)。

  2. 传递给子组件的props在父组件渲染时被重新定义(使用useCallback、useMemo配合React.memo来减少子组件的渲染)。

使用useCallback时

  1. 当作为props传递给子组件时,配合React.memo用于减少子组件的渲染次数。

  2. 在当前组件中只是减少了重新定义的次数,重新定义的性能损耗其实可以忽略。

  3. 可通过setState回调函数,来减少依赖项,从而减少props被重新定义的次数。

使用useMemo时

  1. 其实只是提供了someRef.current的快捷使用方式,缓存了变量的索引。
  2. 在当前组件使用时,用于缓存通过较大计算量得到的值。
  3. 当作为props传递给子组件时,配合React.memo用于减少子组件的渲染次数。

实例

回调中有异步操作

javascript 复制代码
const Child = ({handleClick})=>{
    console.log('child: 我渲染了')

    return (
        <button onClick={handleClick}>点击我</button>
    )
}
const App = ()=>{
    const [num,setNum] = useState(0)

    const handleClick = ()=>{
        
        setNum(num + 1)
        setNum(num + 1)
        setNum(num + 1)
        console.log('num',num)

        setTimeout(()=>{
            console.log(num)
            setNum((a)=>{
                console.log(a)
                return a + 1
            })
        })
    }
    console.log('父:渲染了')
    return (
        <>
            {num}
            <br/>
            <Child handleClick={handleClick}/>
        </>
    )

}

export default App;

对于setTimeout中console.log(num)输出0的理解:

setTimeout的回调产生了闭包,冻结了num的初始值。

javascript 复制代码
const Child = ({handleClick})=>{
    console.log('child: 我渲染了')

    return (
        <button onClick={handleClick}>点击我</button>
    )
}
const App = ()=>{
    const [num,setNum] = useState(0)

    const handleClick = ()=>{
        
        setNum(num + 1)
        setNum(num + 1)
        setNum(num + 1)
        console.log('num',num)
        // 排除setTimeout影响,研究闭包的形成
        ;(()=>{
            console.log(num)
            setNum((a)=>{
                console.log(a)
                return a + 1
            })
        })()
    }
    console.log('父:渲染了')
    return (
        <>
            {num}
            <br/>
            <Child handleClick={handleClick}/>
        </>
    )

}

export default App;

消除影响,减少次数

如果回调中有异步操作,并且异步操作中也需要改变组件状态,就应该把异步操作外改变状态的语句移到异步操作内执行。

注:实践中发现,此种方式增加的渲染次数无法减少,因为异步中的set是同步执行的。从逻辑讲,确实两个setState的时机是不同的,异步中的setState需要等待,所以优先渲染已准备好的state,不让用户等待,是合理的。

思:一般遇到此种情况,为减少渲染次数,分拆成更小的组件去渲染可以解决问题,提升性能;或在不同时机去执行set操作。

传递给子组件的props在父组件渲染时被重新定义

javascript 复制代码
const Child = ({handleClick})=>{
    console.log('child: 我渲染了')

    return (
        <button onClick={handleClick}>点击我</button>
    )
}

const ChildTwo = React.memo(({ handleClick2 }) => {
    console.log('childtwo: 我渲染了')
    return (
        <button onClick={handleClick2}>点击我2</button>
    )
})

const App = ()=>{
    const [num,setNum] = useState(0)

    const handleClick = ()=>{
        setNum(num+1)
    }
    // const handleClick2 = useCallback(()=>{
    //     setNum(1)
    // },[])
    // const handleClick2 = useCallback(()=>{
    //     setNum(num+1)
    // },[num])
    const handleClick2 = useCallback(()=>{
        setNum(num=>num+1)
    },[])
    const obj = useMemo(()=>{
        return {}
    },[])
    console.log('父:渲染了')

    return (
        <>
            {num}
            <br/>
            <Child handleClick={handleClick}/>
            <ChildTwo handleClick2={handleClick2}/>
            {/* <ChildTwo a={obj}/> */}
        </>
    )

}

export default App;

注:

useCallback和useMemo在使用时的依赖记得要加上,因为他们两个是根据依赖的变化来重新定义的,不然我们在其内部使用num时,是不能拿到num的最新值的,除非你使用setNum(num=>num+1),这也是减少依赖的好方法,不过不适用所有场景。

引申内容

  • 自执行函数前方必须加上分号,否则js解释器会因为无法识别而报错。

  • react没有暴露主动控制组件重新渲染的接口,不过可以自己为组件传入一个props,通过改变这个props来实现组件的重新渲染。

  • 纯展示列表不会出现数组变更的,可以用index作为key;数组可变更的列表就需要使用id等唯一且不变的标识作为key。

后端如何没有传递id,初始的时候自己可对数组格式化��入id。

可设置全局变量,做自增操作设置id,以保证id的唯一性。

相关推荐
有梦想的刺儿7 分钟前
webWorker基本用法
前端·javascript·vue.js
cy玩具28 分钟前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
qq_390161771 小时前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test2 小时前
js下载excel示例demo
前端·javascript·excel
Yaml42 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事2 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶2 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo2 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v2 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
知孤云出岫2 小时前
web 渗透学习指南——初学者防入狱篇
前端·网络安全·渗透·web