官网: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 (<>
index：{count}
 setcount(count + 1)}>increase);
}
const ChildComponent = (props) => {console.log('child render!');return (showTime);
};

 这里其实是有问题的,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 (<>
index：{count}
 setcount(count + 1)}>increase);
}
const ChildComponent = memo((props) => {console.log('child render!');return (showTime);
});

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

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！