官网:Hook API 索引 – React

关于useCallback:

需要明白的是:

1:使用Function组件时会定义很多内部函数,总觉得会影响组件性能,其实不然:看这里:由于在渲染中创建函数，Hooks 很慢吗？

由于在渲染中创建函数，Hooks 很慢吗？

不会。在现代浏览器中，闭包的原始性能与类相比没有显着差异，除非在极端情况下。

2:Hooks设计使得它更有效

钩子避免了类所需的大量开销，例如在构造函数中创建类实例和绑定事件处理程序的成本。

使用 Hooks 的惯用代码不需要在使用高阶组件、渲染道具和上下文的代码库中普遍存在的深层组件树嵌套。使用更小的组件树，React 要做的工作更少。

3:React.memo 和 React.useCallback 一定记得需要配对使用，缺了一个都可能导致性能不升反“降”

useCallback:

const memoizedCallback = useCallback(fn, deps)

fn ：一个函数最终会返回该回调函数，该回调函数仅仅只在 deps 参数发生改变时才会更新

deps ：数组;用于触发 fn 回调函数改变的参数列表。

例子

import React, { useState } from 'react';
import { Space, Button } from 'antd';
export default function Index() {const [count, setcount] = useState(0);const ShowTime = () => {console.log('now time :' + new Date());};return (<><h1>index：{count}</h1><Space><Button type="primary" onClick={() => setcount(count + 1)}>increase</Button><ChildComponent fn={ShowTime} /></Space></>);
}
const ChildComponent = (props) => {console.log('child render!');return (<Button type="primary" onClick={props.fn}>showTime</Button>);
};

这里其实是有问题的,count并没有传递给子组件,但是count得值变化了,子组件也更新了,这不是我们想要的

用useCallback,memo改进

import React, { useState, memo, useCallback } from 'react';
import { Space, Button } from 'antd';
export default function Index() {const [count, setcount] = useState(0);/*** 把原来的showTime函数放在useCallback中*/const countCallback = useCallback(() => {console.log('now time :' + new Date());}, []);return (<><h1>index：{count}</h1><Space><Button type="primary" onClick={() => setcount(count + 1)}>increase</Button><ChildComponent fn={countCallback} /></Space></>);
}
const ChildComponent = memo((props) => {console.log('child render!');return (<Button type="primary" onClick={props.fn}>showTime</Button>);
});

当我们更新count的时候,子组件并没有重新渲染

useCallback的第二个参数deps中阔以添加依赖,只有当这些依赖变化时视图才会重新更新

React hooks之 useCallback的使用相关推荐

react hooks之useCallback
一.概述在hooks中,useCallback函数是一个记忆函数,主要作用就是提高系统性能,在之前,每当状态改变的时候,整个函数组件比如里面的函数,变量都会重新执行,使用这个函数之后,只有当依赖项发 ...
dw按钮图片滚动js_使用 React Hooks 实现仿石墨的图片预览插件（巨详细）
点击上方"前端教程",选择"星标" 每天前端开发干货第一时间送达! 作者:DARRELL https://juejin.im/post/5e9bf299f265 ...
（十三）react hooks
react hooks react hooks 出几道react hooks面试题 class组件存在哪些问题用useState实现state和setState功能用useEffect模拟组件生命 ...
React Hooks 完全使用指南
大家好,我是若川.最近组织了源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步.同时极力推荐订阅我写的<学习源码整体架构系列> ...
精读《怎么用 React Hooks 造轮子》
1 引言上周的精读<React Hooks> 已经实现了对 React Hooks 的基本认知,也许你也看了 React Hooks 基本实现剖析(就是数组),但理解实现原理就可以用好 ...
React16：Hooks总览，拥抱函数式 (这大概是最全的React Hooks吧)
React16.8中加入了Hooks,让React函数式组件再一次升华,那么到底什么是Hooks? 动机 React官网和2018年的React conf上都提到了动机这个东西,那么出现hooks的动 ...
React Hooks 分享
目录一,什么是Hooks 二,为什么要使用Hooks 三,React hooks 四, useState 使用及实现五,useEffect 使用及实现六,如何实现多个useState, useE ...
React hooks中swr的原理和源码解析
授权转载自:JonyYu https://github.com/forthealllight/blog/issues/61 swr是一个hook组件,可以作为请求库和状态管理库,本文主要介绍一下在项目 ...
通过构建Paint App学习React Hooks
According to people in the know, React Hooks are hot, hot, hot. In this article, we follow Christian ...

React hooks之 useCallback的使用

官网:Hook API 索引 – React

关于useCallback:

由于在渲染中创建函数，Hooks 很慢吗？

useCallback:

const memoizedCallback = useCallback(fn, deps)

例子

用useCallback,memo改进

React hooks之 useCallback的使用相关推荐

最新文章

热门文章