多个不同输入框共用一个方法时使用useCallback:

params = initParams = {code: "code_test", name: "name_test"}

const onInputChange = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
setParams({
...params,
[e.target.name]: e.target.value
});
}, [params]);

useCallback 如果没有写以来state变化参数(如上:params),调用时改变target.value, 设置其他params参数为初始化参数,

改变code为 “1”, 改变name时,设置name为新值,同时code会变为初始值"code_test",而不是为1.

react useCallback notice的更多相关文章

  1. React Hooks: useCallback理解

    useCallback把匿名回调“存”起来 避免在component render时候声明匿名方法,因为这些匿名方法会被反复重新声明而无法被多次利用,然后容易造成component反复不必要的渲染. ...

  2. React useEffect in depth

    React useEffect in depth useEffect class DogInfo extends React.Component { controller = null state = ...

  3. React useMemo

    React useMemo react hooks https://reactjs.org/docs/hooks-reference.html#usememo useCallback & us ...

  4. props、state、forms

    {}用来内嵌任何JS表达式JSX属性JS核心分为三大块:Es6.DOM.WindowBABEL编译器:可以在线编译html语法生成对应的react语法 **自定义组件第一个字母大写:用于区别普通的对象 ...

  5. 干货满满-原来这才是hooks-React Hooks使用心得

    序言 ---最后有招聘信息哦-React是一个库,它不是一个框架.用于构建用户界面的Javascript库.这里大家需要认识这一点.react的核心在于它仅仅是考虑了如何将dom节点更快更好更合适的渲 ...

  6. 记一次react-hooks项目获取图表图片集合并生成pdf的需求

    需求: 获取子组件中所有图片的dom元素并生成图片,再把生成的图片转化为pdf下载 难点 众所周知,react是单向数据流,倡导f(data)⇒ UI的哲学, 并不建议过多直接操作dom,但是生成图片 ...

  7. [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 i ...

  8. React Hooks: useCallback All In One

    React Hooks: useCallback All In One useCallback https://reactjs.org/docs/hooks-reference.html#usecal ...

  9. React Hooks & useCallback & useMemo

    React Hooks & useCallback & useMemo https://reactjs.org/docs/hooks-reference.html#usecallbac ...

随机推荐

  1. 十分钟一起学会ResNet残差网络

    作者 | 荔枝boy 目录 深层次网络训练瓶颈:梯度消失,网络退化 ResNet简介 ResNet解决深度网络瓶颈的魔力 ResNet使用的小技巧 总结 深层次网络训练瓶颈:梯度消失,网络退化 深度卷 ...

  2. ArcGIS Engine的安装

    1.双击安装文件“setup.exe”. 2.点击“Next”. 3.选择“ I accept the license agreement”,点击“Next”. 4.选择“Complete”,点击“N ...

  3. Django-利用Form组件和ajax实现的注册

    利用Form组件和ajax实现的注册 一.注册相关的知识点 1.Form组件 我们一般写Form的时候都是把它写在views视图里面,那么他和我们的视图函数也不影响,我们可以吧它单另拿出来,在应用下面 ...

  4. CentOS下的Docker-Compose离线安装

    公司服务器已经安装了 Docker 环境,但没有安装 Docker Compose,使用起来十分不便.由于服务无法连接外网,下面演示如何离线安装 Docker Compose. (1)首先访问 doc ...

  5. CSS躬行记(3)——CSS属性拾遗

    一.粘滞定位 粘滞定位(sticky)与相对定位类似,既不会脱离正常流,也不会改变元素盒类型,并且会保留原先所占的空间.它会相对于包含块偏移,它的包含块分为两种,第一种和绝对定位一样:第二种是最近的滚 ...

  6. Kubernetes Pod钩子

    目录 1.Pod容器钩子最终目的 2.何为Pod容器钩子 3.基于PostStart演示 4.基于PreStop演示 5.优雅停止Java应用 1.Pod容器钩子最终目的 之前在生产环境中使用dubb ...

  7. LinkedHashMap 与 HashMap 实现的区别

    阅读前最好对 HashMap 的内部实现方式有一定了解 LinkedHashMap 继承自 HashMap 主要重写了一个节点类 LinkedHashMap.Entry,并维护一个头结点和尾节点 以及 ...

  8. webpack中引用jquery

    1.首先需要添加项目中jquery的依赖 npm install jquery --save-dev 2.参考配置代码: var webpack = require("webpack&quo ...

  9. javascript入门 之 ztree(五 自定义字体)

    <!--<!DOCTYPE html>--> <!--<HTML>--> <!--<HEAD>--> <!--<TI ...

  10. 痞子衡嵌入式:走进二维码(QR Code)的世界(2)- 初体验(PyQt5.11+MyQR2.3+ZXing+OpenCV4.2.0)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家分享的是走进二维码(QR Code)的世界专题之初体验. 接上篇 <走进二维码(QR Code)的世界(1)- 引言> 继续更文,在 ...