多个不同输入框共用一个方法时使用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. swagger2 接口文档

    1,maven: <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www. ...

  2. sql MYSQL主从配置

    MYSQL主从配置 1.1 部署环境 主(master_mysql): 192.168.1.200 OS:CentOS 6.5 从(slave_mysql): 192.168.1.201 OS:Cen ...

  3. debian10切换国内源

    Debian 10.3 下载地址: http://mirrors.163.com/debian-cd/10.3.0-live/amd64/iso-hybrid/debian-live-10.3.0-a ...

  4. Gang Of Four的23中设计模式

    Gang Of Four的23中设计模式 标签(空格分隔): 设计模式 1. 根据目的来进行划分 根据目的进行划分可以分为创建型模式, 结构型模式和行为模式三种. 1.1 创建型模式 怎样创建对象, ...

  5. 三角函数在Three.js中的点的移动轨迹应用

    在学习2D文字的时候,看到官网有这样一个示例: https://threejs.org/examples/#css2d_label ![](https://img2018.cnblogs.com/bl ...

  6. 《快速认识 Three.js 》

    此文仅作备份之用,为了更好的阅读体验,建议访问原文链接:<Three.js - 走进3D的奇妙世界.> ,感谢原作者的好文.

  7. 手动搭建I/O网络通信框架2:Socket和ServerSocket入门实战,实现单聊

    第一章:手动搭建I/O网络通信框架1:Socket和ServerSocket入门实战,实现单聊 在第一章中运用Socket和ServerSocket简单的实现了网络通信.这一章,利用BIO编程模型进行 ...

  8. 荐书在精不在多,推荐一份夯实Java基础的必备书单!

    文/黄小斜 转载请注明出处 head first Java 推荐指数:⭐️⭐️⭐️⭐️⭐️ 推荐理由: 说实话,这本书和其他的我Java类型书籍真的大不相同,它不会一本正经地去说技术概念和原理,而是通 ...

  9. man手册、zip备份

                                                                                                        ...

  10. ORM框架对分表分库的实现

    *:first-child { margin-top: 0 !important; } .markdown-body>*:last-child { margin-bottom: 0 !impor ...