怎么说呢，一个坑，踩了两天，总觉得是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. FaceFusion：探索无限创意，创造独一无二的面孔融合艺术！

    FaceFusion:探索无限创意,创造独一无二的面孔融合艺术! 它使用先进的图像处理技术,允许用户将不同的面部特征融合在一起,创造有趣和令人印象深刻的效果.这个项目的潜在应用包括娱乐.虚拟化妆和艺术 ...

  2. 从零开始搭建医药领域知识图谱实现智能问答与分析服务（含码源）：含Neo4j基于垂直网站数据的医药知识图谱构建、医药知识图谱的自动问答等

    从零开始搭建医药领域知识图谱实现智能问答与分析服务(含码源):含Neo4j基于垂直网站数据的医药知识图谱构建.医药知识图谱的自动问答等 项目介绍 关于知识图谱概念性的介绍就不在此赘述.目前知识图谱在各 ...

  3. C# 中类与继承等概念

    C#是一种现代的.面向对象的编程语言,其中类和继承是面向对象编程语言中非常重要的概念,类和继承是C#中面向对象编程的基本概念,可以用于创建复杂的应用程序和模块,而多态和接口可以使程序更加灵活和可扩展. ...

  4. Spring一套全通3—AOP编程

    百知教育 - Spring系列课程 - AOP编程 第一章.静态代理设计模式 1. 为什么需要代理设计模式 1.1 问题 在JavaEE分层开发开发中,那个层次对于我们来讲最重要 DAO ---> ...

  5. 零基础入门学习Java之注解与反射

    Java反射 Java的程序为什么能在JVM虚拟机中跑起来?接下来将深入探讨下Java虚拟机类加载的机制 1.类的加载 整个Java内存可以分为三大板块 堆 存放new的数组.对象等 栈 存基本变量类 ...

  6. 洛谷P2670 扫雷游戏 关于区域搜索标记的坐标增量法

    最简单的思路就是扫描一边所有节点,对每个非地雷节点,去检查一下他八个方向的元素是否有'*',有的话就加一 但是逐个写出有点麻烦,我们不妨定义两个增量数组来存储每一次的相对位移,对每次检查只需要遍历这个 ...

  7. 在QEMU-KVM环境下部署Oracle 19.16 RAC

    KVM环境和其他虚拟化或真实生产最大差异主要就是在实施前期准备工作上: 具体在 DB节点 和存储环境 的准备工作上有差异,本文会详细说明. 而剩余基本软件安装和补丁应用部分无差异,若不清楚可以直接参考 ...

  8. Shell中调用可执行文件，手动执行可以执行，crontab执行就报错：exec: java: not found

    今天发现一个很奇怪的问题,就是我编写的shell脚本, 手动执行可以正常执行,但是放到crontab中就报错.line 60: exec: java: not  found 百度搜索发现原来是java ...

  9. ABC 313

    前三题过水. D题 与 5+*的题解 注意:交互题每输出一次,就要 fflush(stdout); 一次 E 其实不是太难,但是赛时一直在搓 D 还没搓出来 首先如果有两个大于 \(1\) 的数相邻, ...

  10. AT_arc125_c [ARC125C] LIS to Original Sequence 题解

    题目传送门 前置知识 贪心 | 构造 解法 对于任意一个未加入序列 \(P\) 的数 \(x<A_{i}(1 \le i \le k-1)\),如果其放在了 \(A_{i}\) 的前面,会导致最 ...