多个不同输入框共用一个方法时使用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. Feign客户端的重构,新建springcloud架构

    1,在上篇博文中,已经实现了feign 客户端来远程调用接口的功能,因为feign 客户端在springcloud 开发过程中是比较常用的方式 https://www.cnblogs.com/pick ...

  2. sql 数据库操作语句 不带select

    MySQL数据操作语句 1.总纲 DDL -数据定义语句** create/drop/alter ** create: 创建 drop:删除 alter:修改 DML -数据操作语句 ** inser ...

  3. Python——交互式图形编程

    一. 1.图形显示 图素法 像素法 图素法---矢量图:以图形对象为基本元素组成的图形,如矩形. 圆形 像素法---标量图:以像素点为基本单位形成图形 2.图形用户界面:Graphical User ...

  4. python学习第四节 迭代器 生成器

    1:什么是迭代 可以直接作用于for循环的对象统称为可迭代对象(Iterable). 可以被next()函数调用并不断返回下一个值的对象称为迭代器(Iterator). 所有的Iterable均可以通 ...

  5. 牛客寒假基础集训营 | Day1 G-eli和字符串

    G-eli和字符串 题目描述 eli拿到了一个仅由小写字母组成的字符串. 她想截取一段连续子串,这个子串包含至少 kkkkkkkkk 个相同的某个字母. 她想知道,子串的长度最小值是多少? 注:所谓连 ...

  6. Boxes Packing

    Boxes Packing Mishka has got n empty boxes. For every i (1 ≤ i ≤ n), i-th box is a cube with side le ...

  7. 实际开发中 dao、entity的代码怎样自动生成?一款工具送给你

    01 关注"一猿小讲"朋友,都知道以往的文章一直倡导拒绝 CRUD,那到底什么是 CRUD?今天咱们就聊聊 Java 妹子小猿与数据库老头交互的事儿. 产品小汪铿锵有力的说:小猿同 ...

  8. 【Redis】集群NetCore实战

    环境准备 1. Redis集群(Windows集群搭建) 启动Redis集群,给每个节点加上Title start .conf start .conf start .conf start .conf ...

  9. Linux命令后面加 & 的作用

    在命令的后面加一个 & 的作用是,将这个任务放到后台执行.看下面的例子. 输入gedit回车,可以看到,打开了Linux的文本编辑器,但是命令窗口执行不了其他命令了,只有退出文本编辑器才能继续 ...

  10. Python GUI——tkinter菜鸟编程(中)

    8. Radiobutton 选项按钮:可以用鼠标单击方式选取,一次只能有一个选项被选取. Radiobutton(父对象,options,-) 常用options参数: anchor,bg,bitm ...