怎么说呢，一个坑，踩了两天，总觉得是useSate和input的传值方法问题

在useMemo和useCallback反复测试问题

最后没办法，通过最傻方式，一点点注释代码，发现了问题

const Container = styled.div`

  padding: 3rem;

`;

一个非常简单的定义容器样式的值

定义在了FC内部！！

导致每次input改变，组件每次重新渲染都会检查到Container这个组件

由于对象的引用类型，每次比对都不会===

所以打一个字就会开始重新刷组件

唉

一定要放在FC外面啊

React函数式组件使用@emotion时一定要注意的问题！的更多相关文章

  1. 如何对 React 函数式组件进行优化

    文章首发个人博客 前言 目的 本文只介绍函数式组件特有的性能优化方式,类组件和函数式组件都有的不介绍,比如 key 的使用.另外本文不详细的介绍 API 的使用,后面也许会写,其实想用好 hooks ...

  2. React函数式组件使用Ref

    目录: 简介 useRef forwardRef useImperativeHandle 回调Ref 简介 大家都知道React中的ref属性可以帮助我们获取子组件的实例或者Dom对象,进而对子组件进 ...

  3. React 函数式组件的 Ref 和子组件访问（useImperativeHandle）

    引入:如何调用函数式组件内部的方法 对于 React 中需要强制修改子组件的情况,React 提供了 Refs 这种解决办法,使得我们可以操作底层 DOM 元素或者自定的 class 组件实例.除此之 ...

  4. React函数式组件和类组件[Dan]

    一篇对Dan的 How Are Function Components Different from Classes? 一文的个人阅读总结,内容来自于此.强烈推荐阅读 Dan Abramov.的博客. ...

  5. React函数式组件的性能优化

    优化思路 主要优化的方向有2个: 减少重新 render 的次数.因为在 React 里最重(花时间最长)的一块就是 reconction(简单的可以理解为 diff),如果不 render,就不会 ...

  6. React函数式组件值之useRef()和useImperativeHandle()

    一.useRef useRef共有两种用法,获取子组件的实例(只有类组件可用),在函数组件中的一个全局变量,不会因为重复 render 重复申明, 类似于类组件的 this.xxx. 1. useRe ...

  7. 函数式组件中实现Antd打开Modal后其Input框自动聚焦(focus)到文字的最后

    目前React使用函数式组件已经成为趋势, 如何把React函数式组件用好, 提高性能, 从而实现业务需求也成为了一种能力的体现......咳咳咳, 进入正题: 现实场景需求 我想实现这一个需求, 父 ...

  8. react中类组件、函数组件、state、单层遍历、多层遍历、先遍历后渲染、if-else、三目运算符

    1.回顾 module.exports = { entry: {}, output: {}, plugins: [], module: {}, resolve: {}, devServe: {} } ...

  9. react 中的无状态函数式组件

    无状态函数式组件,顾名思义,无状态,也就是你无法使用State,也无法使用组件的生命周期方法,这就决定了函数组件都是展示性组件,接收Props,渲染DOM,而不关注其他逻辑. 其实无状态函数式组件也是 ...

  10. [RN] React Native 好用的时间线 组件

    React Native 好用的时间线 组件 效果如下: 实现方法: 一.组件封装 CustomTimeLine.js "use strict"; import React, {C ...

随机推荐

  1. python中可变参数与装饰器的例子

    python的可变参数 方法定义 #*args是可以传list类型的可变参数,**kwargs是可以传dict的可变参数 def wrapper(*args, **kwargs): 使用示例 def ...

  2. TienChin-课程管理-删除课程

    CourseController.java @PreAuthorize("hasPermission('tienchin:course:remove')") @Log(title ...

  3. 3.1 C++ STL 双向队列容器

    双向队列容器(Deque)是C++ STL中的一种数据结构,是一种双端队列,允许在容器的两端进行快速插入和删除操作,可以看作是一种动态数组的扩展,支持随机访问,同时提供了高效的在队列头尾插入和删除元素 ...

  4. 7.2 C/C++ 实现动态链表

    动态链表是一种常用的动态数据结构,可以在运行时动态地申请内存空间来存储数据,相比于静态数组和静态链表,更加灵活和高效.在动态链表中,数据元素被组织成一条链表,每个元素包含了指向下一个元素的指针,这样就 ...

  5. C/C++ Crypto密码库调用方法

    Crypto 库是C/C++的加密算法库,这个加密库很流行,基本上涵盖了市面上的各类加密解密算法,以下代码是我在学习是总结的,放到这里用于后期需要时能够快速解决问题. 项目地址:https://www ...

  6. CF1535

    A:氵 B:排序对两个偶数没影响,对两个奇数没影响.唯一的影响是可能原本偶数在后面,调到前面贡献变多.所以把所有偶数弄到前面就行. C:\(dp[i]\) 表示前 \(i\) 个字符以第 \(i\) ...

  7. 【JS】一个思路搞定三道Promise并发编程题，手摸手教你实现一个Promise限制器

    壹 ❀ 引 之前在整理手写Promise相关资料时,在文章推荐区碰巧看到了一道手写Promise并发控制调度器的笔试题(大厂可能爱考),结果今天同事又正好问了我一个关于Promise调度处理的场景问题 ...

  8. NC16664 [NOIP2004]合唱队形

    题目链接 题目 题目描述 N位同学站成一排,音乐老师要请其中的(N-K)位同学出列,使得剩下的K位同学排成合唱队形. 合唱队形是指这样的一种队形:设K位同学从左到右依次编号为1,2-,K,他们的身高分 ...

  9. vscode添加自定义html片段

    最近在学vue,用的是微软的vscode 开发工具. 很不错,赞一下微软.里面包含了众多插件大家可以各取所需. 另外有一项实用的功能,User Snippets 用户自定义代码段, 对于那些需要重复编 ...

  10. Oracle驱动错误：oracle.jdbc.driver.T4CConnection.isValid(I)Z

    1.问题说明 今天在sping boot中配置多数据源,用到了oracle和postgresql两种数据库. oracle驱动版本是ojdbc14,启动以后调试程序直接报错了,就是本文题目中的错. 查 ...