React Hook 四种组件优化总结

2024-04-02 19:04:59 686人浏览安东尼

摘要

目录前言组件抽取memo 优化组件React.memo 语法useCallback 优化组件useCallback 作用useMemo 优化useMemo 语法useCallback

前言

React Hook 已成为当前最流行的开发范式，React 16.8 以后基于 Hook 开发极大简化开发者效率，同时不正确的使用 React Hook也带来了很多的性能问题，本文梳理基于 React Hook 开发组件的过程中如何提高性能。

组件抽取

优化前

每次点击 Increase 都会引起子组件 Child 的渲染，哪怕子组件并没有状态变化

function Before(){
    console.log('Demo1 Parent')
    let [count,setCount] = useState(0)
    let [name,setName] = useState('-')
    const handleClick = ()=>{
        setCount(count+1)
    }
    const handleInput = (e)=>{
        setName(e.target.value)
    }
    return (
        <div>
            <div className='l50'>
                <label>计数器：</label>
                <span className='mr10'>{count}</span>
                <button className='ml10' onClick={handleClick}>Increase</button>
            </div>
            <div className='l50'>
                <label htmlFor="">改变子组件：</label>
                <input type="text" onChange={handleInput}/>
            </div>
            <hr />
            <Child name={name}/>
        </div>
    )
}
// 子组件
function Child(props){
    console.log('Demo1 Child')
    return (
        <div className='l50'>
            子组件渲染：{props.name}
        </div>
    )
}

优化后

只需要把 Increase 抽取成独立的组件即可。此时点击按钮，子组件并不会渲染。


function Increase(){
    console.log('Child Increase')
    let [count,setCount] = useState(0)
    const handleClick = ()=>{
        setCount(count+1)
    }
    return (
        <div>
            <div className='l50'>
                <label>计数器：</label>
                <span className='mr10'>{count}</span>
                <button className='ml10' onClick={handleClick}>Increase</button>
            </div>
        </div>
    )
}
function After(){
    console.log('Demo1 Parent')
    let [name,setName] = useState('-')
    const handleInput = (e)=>{
        setName(e.target.value)
    }
    return (
        <div>
            <Increase/>
            <div className='l50'>
                <label htmlFor="">改变子组件：</label>
                <input type="text" onChange={handleInput}/>
            </div>
            <Child name={name}/>
        </div>
    )
}
// 子组件
function Child(props){
    console.log('Demo1 Child')
    return (
        <div className='l50'>
            子组件渲染：{props.name}
        </div>
    )
}

memo 优化组件

同样基于上述优化前代码，如果不抽取组件，使用 memo 优化后，当点击按钮后，也不会触发二次渲染。

// 优化前
function AfterMemo(){
    console.log('Demo1 Parent')
    let [count,setCount] = useState(0)
    let [name,setName] = useState('-')
    const handleClick = ()=>{
        setCount(count+1)
    }
    const handleInput = (e)=>{
        setName(e.target.value)
    }
    return (
        <div>
            <div className='l50'>
                <label>计数器：</label>
                <span className='mr10'>{count}</span>
                <button className='ml10' onClick={handleClick}>Increase</button>
            </div>
            <div className='l50'>
                <label htmlFor="">改变子组件：</label>
                <input type="text" onChange={handleInput}/>
            </div>
            <Child name={name}/>
        </div>
    )
}

// 子组件
const Child = memo((props)=>{
    console.log('Demo1 Child')
    return (
        <div className='l50'>
            子组件渲染：{props.name}
        </div>
    )
})

React.memo 语法

React.memo 为高阶组件，与 React.PureComponent相似。

function TestComponent(props){
  // 使用 props 渲染
}
function areEqual(prevProps,nextProps){
  
}
export default React.memo(TestComponent,areEqual)

与 class 组件中 shouldComponentUpdate() 方法不同的是，如果 props 相等，areEqual 会返回 true；如果 props 不相等，则返回 false。这与 shouldComponentUpdate 方法的返回值相反。

useCallback 优化组件

如果已经用了 memo ，当遇到下面这种场景时，同样会触发子组件渲染。比如，给 Child 绑定一个 handleClick ，子组件内部增加一个按钮，当点击子组件的按钮时，更改 count 值，即使没有发生 name 变化，也同样会触发子组件渲染，为什么？memo 不是会判断 name 变化了，才会更新吗？

function Before(){
    console.log('Demo1 Parent')
    let [count,setCount] = useState(0)
    let [name,setName] = useState('-')
    const handleClick = ()=>{
        setCount(count+1)
    }
    const handleInput = (e)=>{
        setName(e.target.value)
    }
    const handleChange = ()=>{
        setCount(count+1)
    }
    return (
        <div>
            <div className='l50'>
                <label>计数器：</label>
                <span className='mr10'>{count}</span>
                <button className='ml10' onClick={handleClick}>Increase</button>
            </div>
            <div className='l50'>
                <label htmlFor="">改变子组件：</label>
                <input type="text" onChange={handleInput}/>
            </div>
            <Child name={name} handleClick={handleChange}/>
        </div>
    )
}

// 子组件
const Child = memo((props)=>{
    console.log('Demo1 Child')
    return (
        <div className='l50'>
            子组件渲染：{props.name}
            <button onClick={props.handleClick}>更改count</button>
        </div>
    )
})

并不是 memo 没有生效，是因为当状态发生变化时，父组件会从新执行，导致从新创建了新的handleChange 函数，而 handleChange 的变化导致了子组件的再次渲染。

优化后

点击父组件的Increase按钮，更改了 count 值，经过 useCallback 包裹 handleChange 函数以后，我们会发现子组件不再渲染，说明每当父组件执行的时候，并没有创建新的 handleChange 函数，这就是通过 useCallback 优化后的效果。即使我们点击子组件的按钮，也同样不会触发子组件的渲染，同样 count 会进行累加。

function After(){
    console.log('Demo1 Parent')
    let [count,setCount] = useState(0)
    let text = useRef();
    let [name,setName] = useState('-')
    const handleClick = ()=>{
        setCount(count+1)
    }
    const handleInput = (e)=>{
        setName(e.target.value)
    }
    const handleChange = useCallback(()=>{
        // 为了让 count 能够累加，我们使用ref 获取值
        let val = parseInt(text.current.textContent);
        setCount(val+1)
    },[])
    return (
        <div>
            <div className='l50'>
                <label>计数器：</label>
                <span className='mr10' ref={text}>{count}</span>
                <button className='ml10' onClick={handleClick}>Increase</button>
            </div>
            <div className='l50'>
                <label htmlFor="">改变子组件：</label>
                <input type="text" value={name} onChange={handleInput}/>
            </div>
            <Child name={name} handleClick={handleChange}/>
        </div>
    )
}

useCallback 作用

// 用法
useCallback(()=>{
  // to-do
},[])

// 示例
function App(){
  // 点击按钮调用此函数，但返回被缓存
  const onClick = useCallback(() => {
    console.log('我被缓存了，怎么点击都返回一样');
  }, []);

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

useCallback 接收 2 个参数，第一个为缓存的函数，第二个为依赖值
主要用于缓存函数，第二次会返回同样的结果。

useMemo 优化

我们定义了一个total函数，内部使用 1 填充了100次，通过 reduce 计算总和，经过测试发现点击 Increase按钮后，只会执行 total1 ，不会执行 total2，假设total计算量巨大，就会造成内存的浪费，通过 useMemo 可以帮我们缓存计算值。

function Before(){
    console.log('Demo1 Parent')
    let [count,setCount] = useState(0)
    const handleClick = ()=>{
        setCount(count+1)
    }
    const total1 = ()=>{
        console.log('计算求和1')
        let arr = Array.from({ length:100 }).fill(1)
        return arr.reduce((prev,next)=>prev+next,0)
    }
    // 缓存对象值
    const total2 = useMemo(()=>{
        console.log('计算求和2')
        let arr = Array.from({ length:100 }).fill(1)
        return arr.reduce((prev,next)=>prev+next,0)
    },[count])
    return (
        <div>
            <div className='l50'>
                <label>计数器：</label>
                <span className='mr10'>{count}</span>
                <button className='ml10' onClick={handleClick}>Increase</button>
            </div>
            <div>
                <label>总和：</label>
                <span>{total1()}</span>
                <span>{total2}</span>
            </div>
        </div>
    )
}

useMemo 语法

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

传入一个函数进去，会返回一个 memoized 值，需要注意的是，函数内必须有返回值
第二个参数会依赖值，当依赖值更新时，会从新计算。

useCallback 和 useMemo 区别

他们都用于缓存，useCallback 主要用于缓存函数，返回一个缓存后函数，而 useMemo 主要用于缓存值，返回一个缓存后的值。

到此这篇关于React Hook 四种组件优化总结的文章就介绍到这了,更多相关React Hook 组件优化内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: React Hook 四种组件优化总结

本文链接: https://www.lsjlt.com/news/165352.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

React Hook 四种组件优化总结

目录前言组件抽取memo 优化组件React.memo 语法useCallback 优化组件useCallback 作用useMemo 优化useMemo 语法useCallback...

99+

2024-04-02
React 性能优化方法总结

目录前言为什么页面会出现卡顿的现象？React 到底是在哪里出现了卡顿？React 有哪些场景会需要性能优化？一：父组件刷新，而不波及子组件。第一种：使用 PureComponent...

99+

2024-04-02
react组件传值的四种方法

目录1、父向子传值2、子向父传值3、非父子传值4、Context 方法传值【类似vue的 provide / inject】1、父向子传值父组件 classAppextends...

99+

2023-05-18

react组件传值 react 传值
C++读取文件的四种方式总结

C++可以根据不同的目的来选取文件的读取方式，目前为止学习了C++中的四种文件读取方式。 C++文件读取的一般步骤： 1、包含头文件 #include<fstream> ...

99+

2023-05-15

C++实现文件读取方式 C++文件读取 C++文件
总结Git增加文件的四种方法

Git 是目前最流行的版本控制工具之一，它能帮助程序员们更好地管理代码。在日常开发中，我们经常需要添加新的文件到 Git 当中，下面我将介绍几种方法来实现这一过程。一、使用 Git add 命令这是最常用的一种方法，它会将文件添加到 Git...

99+

2023-10-22
React高阶组件优化文件结构流程详解

其实高阶组件是一个将组件写的更灵活的方式，他的应用场景在业务开发中会非常多样这里我们演示一种主要还是解决问题的思想最重要或者是这个不叫解决问题而是设计组件结构的思路我们...

99+

2023-01-29

React高阶组件优化文件结构 React高阶组件 React优化文件结构
Vue首屏性能优化组件知识点总结

Vue首屏性能优化组件简单实现一个Vue首屏性能优化组件，现代化浏览器提供了很多新接口，在不考虑IE兼容性的情况下，这些接口可以很大程度上减少编写代码的工作量以及做一些性能优化方...

99+

2024-04-02
React优化子组件render怎么用

这篇文章主要为大家展示了“React优化子组件render怎么用”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“React优化子组件render怎么用”这篇文章吧...

99+

2024-04-02
react四种组件中DOM样式设置方式详解

1、行内样式想给虚拟dom添加行内样式，需要使用表达式传入样式对象的方式来实现行内样式需要写入一个样式对象，而这个样式对象的位置可以放在很多地方例如：render函数里、组件原...

99+

2024-04-02
java性能优化四种常见垃圾收集器汇总

目录前言常见的垃圾回收器和算法serial 串行垃圾收集器Parallel 多线程垃圾收集器CMS 收集器G1 收集器显式垃圾收集前言本篇文章我们来具体看看如何选择合适的垃圾收集器...

99+

2024-04-02
JS删除数组中某个元素的四种方式总结

目录第二种：删除第一个元素第三种：删除数组中某个指定元素第四种：删除数组中指定下标的元素总结第一种：删除最后一个元素 slice 删除 var arr = [1,2,3,4,5] v...

99+

2023-02-04

js删除数组的某个元素 js删除数组中的一个元素 Js数组删除元素
MySQL数据库优化的六种方式总结

目录方法一方法二方法五方法六附：mysql优化的常用方法总结方法一使用连接来代替子查询（Sub-Queries）。可以使用SELECT语句来创建一个单列的查询结果，然后把这...

99+

2024-04-02
Vue3的10种组件通信方式总结

目录引言Propsemitsexpose / refNon-Props单个根元素的情况多个元素的情况v-model单值的情况多个 v-model 绑定v-model 修饰符插槽 sl...

99+

2024-04-02
vue组件传值的11种方式总结

目录1、父组件传给子组件2、子组件传给父组件3、兄弟组件间传值4、路由间传值 i.使用问号传值5、使用$ref传值6、使用依赖注入传给后代子孙曾孙7、祖传孙 $attrs8、孙传祖9...

99+

2023-01-13

vue组件传值 vue组件组件传值
java读取XML文件的四种方法总结(必看篇)

JAVA操作XML文档主要有四种方式，分别是DOM、SAX、JDOM和DOM4J，DOM和SAX是官方提供的，而JDOM和DOM4J则是引用第三方库的，其中用的最多的是DOM4J方式。运行效率和内存使用方面最优的是SAX，但是由于SAX是基...

99+

2023-05-31

java 读取 xml文件
【整理总结】优化jQuery性能的多种方法

如何优化jQuery性能？下面本篇文章给大家介绍一些针对 jQuery性能的优化方法，希望对大家有所帮助！我一直在寻找有关jQuery性能优化方面的小窍门，能让我那臃肿的动态网页应用变得轻便些。找了很多文章后，我决定将最好最常用的一些优化...

99+

2023-05-14

jquery javascript
vue3中组件传值的多种方法总结

目录第一种: props和 emitsetup语法实现父向子传值第三种: provide和inject 实现后代组件传值第四种: v-model 以及动态属性绑定总结第一种: pro...

99+

2023-01-06

vue3.0 组件传值 vue三种传值方式 vue3组件传值
vue2.0中组件传值的几种方式总结

目录搭建好测试环境1.方法一父传子子传父2.方法二父传子子传父奇怪的传值3.方法三4.兄弟组件之间传值总结搭建好测试环境 app.vue <template> &l...

99+

2022-12-08

vue2.0组件传值 vue组件传值 vue2.0组件传值方式
SpringBoot从配置文件中获取属性的四种方法总结

目录方式一:@Value方式二:@ConfigurationProperties@Value和@ConfigurationProperties比较方式三:@PropertySourc...

99+

2024-04-02
React 组件性能最佳优化实践分享

目录React 组件性能优化最佳实践组件卸载前进行清理操作类组件使用纯组件PureComponent什么是纯组件什么是浅层比较shouldComponentUpdate纯函...

99+

2024-04-02