React 学习——useCallback

传递函数,父组件重新渲染的时候,并不会让子组件跟着重新渲染;

import {  memo, useCallback, useState } from 'react';

const Son = memo(function Input({onChange}){
  console.log('子组件渲染');
  return (
  <div>
    <div onClick={()=>onChange(666)}>222</div>
  </div>
  )
})

const App = () => {
  const [count, setCount] = useState(0);//简单类型
  const changeInput = useCallback((val) => console.log(val),[]);// 只有父组件更新
  // const changeInput = (val) => {console.log(val)} //父组件更新,会导致子组件跟着更新
  console.log('父');
  return (
    <div className="home">
     <Son  onChange={changeInput} />
     <button onClick={() => setCount(count + 1)}>+{count}</button>
    </div>
  )
}

export default App

ReactuseCallback 是一个用于优化性能的 Hook,它的作用是返回一个记忆化的函数。当我们在创建一个函数时,如果不使用 useCallback,每次组件重新渲染时都会创建一个新的函数实例,这可能导致子组件的不必要渲染。 而使用 useCallback 可以确保只有在依赖项发生变化时才会创建新的函数实例。这样可以减少子组件的渲染,提高性能。 防抖函数的作用是在一定时间内,只执行最后一次触发的操作。在 React 中,我们可以结合 useCallbackuseRef 来实现防抖函数。下面是一个示例代码: ```jsx import React, { useCallback, useRef } from "react"; function DebounceExample() { const debouncedFunction = useCallback( debounce(() => { console.log("Debounced function called"); // 执行需要防抖的操作 }, 300), [] ); return ( <div> <input type="text" onChange={debouncedFunction} /> </div> ); } // 防抖函数 function debounce(func, delay) { let timer; return function (...args) { clearTimeout(timer); timer = setTimeout(() => { func.apply(this, args); }, delay); }; } ``` 在上面的代码中,我们通过 useCallback 创建了一个记忆化的 debouncedFunction。这个函数通过 debounce 函数进行了防抖处理,延迟执行需要防抖的操作。然后将这个函数传递给了 input 的 onChange 事件。 这样,当用户在输入框中输入时,只有在停止输入 300ms 后才会执行防抖的操作。 希望这个例子对你有帮助!如果有任何疑问,请随时提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值