【React Hooks】memo和useCallback搭配所带来的性能优化

前言

最近在用ts+hooks这些新特性开发新的项目,前沿的东西开发的感觉是很丝滑美妙的,时时刻刻都在踩坑,无法自拔。

问题描述

目录结构大概是这样的

--RtDetail
----Home
------index.scss
------index.tsx
----Search
------index.scss
------index.tsx
----Detail
------index.scss
------index.tsx

然后我在Home组件中引入了Search和Detail组件,伪代码大概是这样的

/**
 * Home.tsx 伪代码
 * 大概就是引入了Search和Detail,给Search传入一个回调,当Search的输入框改变时候,触发更改Home中的searchId
 */
...
let Home = () => {
    const [searchId, setSearchId] = useState(0)

    const handleSearchIdChange = (e) => {
         console.log('handleSearchChange 被创建了')
         setSearchId(e.target.value)
    }

    return (
        <>
            <Search handleSearchId={handleSearchId}/>
            <Detail />
        </>
    )
}

export default Home

/** Search.tsx 伪代码 */
...
let Search = (props: ISearchProps) => {

    const { handleSearchId } = props

    return (
        <>
            <input onChange={(e) => {handleSearchId(e)}}/>
        </>
    )
}

export default Search
...

/** Detail.tsx */
...
let Detail = () => {

    console.log('Detail Component 被渲染了')
    return (
        <span>test</span>
    )
}

export default Detail
...

每次Search更改Home中seachId状态的时候,导致以下2个问题:

  • 1.Detail都伴随着被重新创建了,从而造成了不必要的性能浪费
  • 2.Home组件中,handleSearchId方法被重新创建

解决方案

memo+useCallback

对于问题1使用memo

/** 对Detail组件,包上一层memo,这是hooks提供的一个api */
...
let Detail = memo(() => {

    console.log('Detail Component 被渲染了')
    return (
        <span>test</span>
    )
})

export default Detail

React.memo类似于React.PureComponent,能对props做浅比较,防止组件无效的重复渲染!

对于问题2使用useCallback

/** 改写Home.tsx */
...
let Home = () => {
    const [searchId, setSearchId] = useState(0)

    const handleSearchIdChange = (e) => {
         console.log('handleSearchChange 被创建了')
         setSearchId(e.target.value)
    }

    return (
        <>
            <Search handleSearchId={handleSearchId}/>
            <Detail />
        </>
    )
}

export default Home

useCallback用于缓存inline函数,防止因属性更新时生成新的函数导致子组件重复渲染

原文地址:https://www.cnblogs.com/fe-linjin/p/11391967.html

时间: 2024-11-12 20:03:20

【React Hooks】memo和useCallback搭配所带来的性能优化的相关文章

[React] Preventing extra re-rendering with function component by using React.memo and useCallback

Got the idea form this lesson. Not sure whether it is the ncessary, no othere better way to handle it. Have a TodoList component, every time types in NewTodo input fields, will trigger the re-rendering for all components. import React, { useState, us

React Hooks

1) what is Hooks? 之前也有函数式组件,但是没有状态,无法保存数据,所以一直用类式组件 class MyCount extends Component { state = { count: 0, } componentDidMount() { this.interval = setInterval(() => { this.setState({ count: this.state.count + 1 }) }, 1000) } componentWillUnmount() { i

30分钟精通React今年最劲爆的新特性——React Hooks

你还在为该使用无状态组件(Function)还是有状态组件(Class)而烦恼吗? --拥有了hooks,你再也不需要写Class了,你的所有组件都将是Function. 你还在为搞不清使用哪个生命周期钩子函数而日夜难眠吗? --拥有了Hooks,生命周期钩子函数可以先丢一边了. 你在还在为组件中的this指向而晕头转向吗? --既然Class都丢掉了,哪里还有this?你的人生第一次不再需要面对this. 这样看来,说React Hooks是今年最劲爆的新特性真的毫不夸张.如果你也对react

react新特性 react hooks

本文介绍的是react新特性react hooks,本文面向的是有一定react开发经验的小伙伴,如果你对react还不是很熟悉的话我建议你先学习react并多多联系. 首先我们都知道react有3种组件:分别是Function函数式无状态组件.class有状态组件.高阶组件.这里不对这3种组件做一一介绍. 本文重点是react hooks 一个最简单的Hooks 首先让我们看一下一个简单的有状态组件: 1 class Example extends React.Component { 2 co

React Hooks用法大全

前言 在 React 的世界中,有容器组件和 UI 组件之分,在 React Hooks 出现之前,UI 组件我们可以使用函数,无状态组件来展示 UI,而对于容器组件,函数组件就显得无能为力,我们依赖于类组件来获取数据,处理数据,并向下传递参数给 UI 组件进行渲染.在我看来,使用 React Hooks 相比于从前的类组件有以下几点好处: 代码可读性更强,原本同一块功能的代码逻辑被拆分在了不同的生命周期函数中,容易使开发者不利于维护和迭代,通过 React Hooks 可以将功能代码聚合,方便

通过 React Hooks 声明式地使用 setInterval

本文由云+社区发表 作者:Dan Abramov 接触 React Hooks 一定时间的你,也许会碰到一个神奇的问题: setInterval 用起来没你想的简单. Ryan Florence 在他的推文里面说到: 不少朋友跟我提起,setInterval 和 hooks 一起用的时候,有种蛋蛋的忧伤. 老实说,这些朋友也不是胡扯.刚开始接触 Hooks 的时候,确实还挺让人疑惑的. 但我认为谈不上 Hooks 的毛病,而是 React 编程模型和 setInterval 之间的一种模式差异.

初探React Hooks &amp; SSR改造

Hooks React v16.8 发布了 Hooks,其主要是解决跨组件.组件复用的状态管理问题. 在 class 中组件的状态封装在对象中,然后通过单向数据流来组织组件间的状态交互.这种模式下,跨组件的状态管理变得非常困难,复用的组件也会因为要兼容不同的组件变得产生很多副作用,如果对组件再次拆分,也会造成冗余代码增多,和组件过多带来的问题. 后来有了 Redux 之类的状态管理库,来统一管理组件状态.但是这种分层依然会让代码变得很复杂,需要更多的嵌套.状态和方法,写代码时也常在几个文件之间不

React性能优化之PureComponent 和 memo使用分析

前言 关于react性能优化,在react 16这个版本,官方推出fiber,在框架层面优化了react性能上面的问题.由于这个太过于庞大,我们今天围绕子自组件更新策略,从两个及其微小的方面来谈react性能优化. 其主要目的就是防止不必要的子组件渲染更新. 子组件何时更新? 首先我们看个例子,父组件如下: import React,{Component} from 'react'; import ComponentSon from './components/ComponentSon'; im

React Hooks究竟是什么呢?

摘要: React Hooks原理解析. 原文:快速了解 React Hooks 原理 译者:前端小智 我们大部分 React 类组件可以保存状态,而函数组件不能? 并且类组件具有生命周期,而函数组件却不能? React 早期版本,类组件可以通过继承PureComponent来优化一些不必要的渲染,相对于函数组件,React 官网没有提供对应的方法来缓存函数组件以减少一些不必要的渲染,直接 16.6 出来的 React.memo函数. React 16.8 新出来的Hook可以让React 函数