Javascript 响应，Use Callback更新状态变量，该变量也存在于其依赖数组中，它如何防止无限重新呈现

发布于01月07日

Consider the following code个

import { useMemo, useState, useCallback } from 'react'


function App() {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    setCount(count + 1);

  }, [count]);

  return <div>
    <Child onClick={handleClick} />
  </div>
}


function Child({onClick}) {
  return (
    <button onClick={onClick}>Click here</button>
  )
}

export default App

在上面的代码中，当单击文本为‘Click Here’的按钮时，count状态变量得到更新，这也是useCallback中的一个依赖项，该依赖项作为处理程序传递给按钮的onClick属性.

推荐答案

当count被你的handleClick改变时，实际上现在因为count是这useCallback的依赖项，Reaction将丢弃旧的handleClick并在发生的新渲染中创建一个新的.就是这样，更改useCallback的依赖关系只会丢弃旧的回调，并为您提供一个新的回调.

另一方面，无限渲染通常发生在更新useEffect中的状态a时，该状态也作为dep.示例:

const [count, setCount] = useState(0);
useEffect(() => {
    setCount(count + 1);
}, [count]);  // this is bad, don't do it

这就是区别，useEffect在DEP改变时运行它的身体，但useCallback不在DEP改变时运行它的身体，它只是给你一个新的函数，这个新函数现在可以看到新的Dep，在您的情况下，新的handleClick将可以访问最新的count状态.

Javascript 响应，Use Callback更新状态变量，该变量也存在于其依赖数组中，它如何防止无限重新呈现

推荐答案

Javascript相关问答推荐

如何通过onClick为一组按钮分配功能;

使用JavaScript单击上一个或下一个特定按钮创建卡滑动器以滑动单个卡

如何判断属于多个元素的属性是否具有多个值之一

模块与独立组件

如何将Map字符串，布尔值转换为{key：string；value：bo布尔值；}[]？<>

JS—删除对象数组中对象的子对象

使用js构造一个html<；ath&>元素并不能使其正确呈现

为什么客户端没有收到来自服务器的响应消息？

当我try 将值更改为True时，按钮不会锁定

面对代码中的错误作为前端与后端的集成

按下单键和多值

AJAX POST在控制器中返回空(ASP.NET MVC)

用于部分字符串的JavaScript数组搜索

使用CEPRESS截取时，cy.Wait()在等待5000ms的第一个路由请求时超时

如何在Jest中模拟函数

按特定顺序将4个数组组合在一起，按ID分组

如何在每隔2分钟刷新OKTA令牌后停止页面刷新

$GTE的mongoose 问题

是否有静态版本的`instanceof`？

如何使用fltter_js将对象作为参数传递给javascrip？