怎么说呢，一个坑，踩了两天，总觉得是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. 安装Visual Studio的详细流程

      本文介绍Visual Studio 2022软件Community(社区版)的下载.安装.运行与使用方法.   首先需要提一句,本文介绍的是Visual Studio 2022软件的下载:而其它版 ...

  2. 从零开始的知识图谱生活，构建一个百科知识图谱，完成基于Deepdive的知识抽取、基于ES的简单语义搜索、基于 REfO 的简单KBQA

    从零开始的知识图谱生活,构建一个百科知识图谱,完成基于Deepdive的知识抽取.基于ES的简单语义搜索.基于 REfO 的简单KBQA 个人入门知识图谱过程中的学习笔记,算是半教程类的,指引初学者对 ...

  3. axios请求失败，获取接口返回错误信息

    一般vue项目都会对axios进行封装,后台统一规范默认让服务器对所有请求都返回成功,然后在成功的对象里面包装一层对象result,里面也包含code,msg,result信息,前端拿这个result ...

  4. 安装kali linux操作系统（转） - 初学者系列 - 学习者系列文章

    前段时间想到操作系统安全问题,所以对操作系统的防火墙和安全软件都进行了安装.然后,涉及到Linux系统的安全测试问题,所以找到了Linux系统里的安全测试的版本Kali Linux系统.本文仅对该系统 ...

  5. Arduino-电位器调节led

    Arduino-电位器调节led 电位器相关: 电位器是具有三个引出端.阻值可按某种变化规律调节的电阻元件.电位器通常由电阻体和可移动的电刷组成.当电刷沿电阻体移动时,在输出端即获得与位移量成一定关系 ...

  6. 测试DHCP服务器

    一:前期准备 1.准备三台虚拟机,不要配ip. 都改成仅主机模式,这样它们和DHCP才会相连 2.进入有DHCP服务器的虚拟机,更改虚拟网络编辑器 (编辑→虚拟网络编辑器(N)) 不勾选使用本地DHC ...

  7. JS leetcode x 的平方根 题解分析

    壹 ❀ 引 这几天心情复杂,也不知道形容.做道题吧,其实是上周的题,一直没整理,比较巧的是,这也是我同学17年去PPTV面试时遇到的一题,题目来自leetcode69. x 的平方根,题目描述如下: ...

  8. NC20313 [SDOI2008]仪仗队

    题目链接 题目 题目描述 作为体育委员,C君负责这次运动会仪仗队的训练. 仪仗队是由学生组成的N * N的方阵,为了保证队伍在行进中整齐划一,C君会跟在仪仗队的左后方,根据其视线所及的学生人数来判断队 ...

  9. SavedStateHandle的介绍----ViewModel不具备保存状态数据的功能

    LiveData本身不能在进程销毁中存活,当内存不足时,Activity被系统杀死,ViewModel本身也会被销毁. 为了保存LiveData的数据,使用SavedStateHandle. 事故场景 ...

  10. Swoole从入门到入土(1)——入坑

    入坑一个话题,总得有入坑的理由.有好多话题可供选择,但是思来想去,对于PHPer进阶与其急着去掌握一门新的语言,匆忙地踏足一个新的知识体系,还不如先把php圈子的技能点攒齐了. 话说Swoole诞生之 ...