怎么说呢，一个坑，踩了两天，总觉得是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. 基于Basic auth 的一个C# 示例

    最近在做公司的一个项目时,客户需要我们定时获取他们矩阵系统的数据.在与客户进行对接时,提到他们的接口使用的目前不常用的BASIC 认证.天呢,它好不安全,容易被不法人监听,咋还在使用呀.但是没办法呀, ...

  2. 报错ValueError: Can't find 'adapter_config.json'

    前言 在做组内2030项目时,我具体做的一个工作是对大模型进行LoRA微调,在整个过程中有许多坑,其中有些值得记录的问题,于是便产生了这篇博客. 问题 我在得到微调好的模型后,需要对模型进行性能测评. ...

  3. SqlSugar多库/多租户

    1. 多库和多租户 如果是接口ISugarClient先看一下标题6,看完在看这儿 1.1 固定多数据库模式 数据库数量是固定的一般在声明的全部加上 //通过ConfigId进行数据库区分 var d ...

  4. NLP涉及技术原理和应用简单讲解【二】：paddle（分布式训练、AMP自动混合精度训练、模型量化、模型性能分析）

    参考链接: https://www.paddlepaddle.org.cn/documentation/docs/zh/guides/06_distributed_training/cluster_q ...

  5. 【二】Latex入门使用、常见指令

    参考链接:https://blog.csdn.net/cocoonyang/article/details/78036326 \documentclass[12pt, a4paper]{article ...

  6. C/C++ 通过Socket 传输结构体

    本质上socket无法传输结构体,我们只有将结构体装换为字节数组,或者是字符串格式来传输,到了服务端在强制类型转换一下即可,下面的代码分别提供原生写法与通过boost的实现两种,直接改改,可用于收集目 ...

  7. MD5算法：高效安全的数据完整性保障

    摘要:在数字世界中,确保数据完整性和安全性至关重要.消息摘要算法就是一种用于实现这一目标的常用技术.其中,Message Digest Algorithm 5(MD5)算法因其高效性和安全性而受到广泛 ...

  8. elasticsearch源码debug

    一.下载源代码 直接用idea下载代码https://github.com/elastic/elasticsearch.git 切换到特定版本的分支:比如7.17,之后idea会自己加上Run/Deb ...

  9. 深入浅出Java多线程(七)：重排序与Happens-Before

    引言 大家好,我是你们的老伙计秀才!今天带来的是[深入浅出Java多线程]系列的第七篇内容:重排序与Happens-Before.大家觉得有用请点赞,喜欢请关注!秀才在此谢过大家了!!! 在上一篇文章 ...

  10. Delphi - Case 可以多条件 指定在一起，今天才知道；逗号分隔