怎么说呢，一个坑，踩了两天，总觉得是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. 乌班图安装docker

    目录 一.前言 二.安装 2.1 设置仓库 2.3 安装 Docker Engine 2.4 安装特定版本的 Docker Engine: 2.5 测试 三.配置非 root 用户运行 Docker ...

  2. 做知识图谱遇到的环境问题合集【spacy、gensim、keras_contrib等】

    1.python:spacy.gensim库的安装遇到问题及bug处理 见: python:spacy.gensim库的安装遇到问题及bug处理_汀.的博客-CSDN博客1.spacySpaCy最新版 ...

  3. Linux服务器Crontab定时任务配置

    1.检查linux系统是否有crontab rpm -qa | grep crontab 2.如果未安装进行安装 yum -y install vixie-cron yum -y install cr ...

  4. 解决Maven项目创建过慢问题

    在创建时弹出Proerties位置添加键值对: archetypeCatalog internal idea 常用快捷键 Alt+回车 导入包,自动修正 Ctrl+N 查找类 Ctrl+Shift+N ...

  5. Redis主从配置、数据持久化、集群

    发布订阅 ## subscribe 订阅一个或者多个频道 ## publish 给指定的频道发送消息 ## psubscribe 订阅指定模式的频道,*代表所有 ## pubsub channels ...

  6. .NET Core开发实战（第3课：.NET Core的现状、未来以及环境搭建）--学习笔记

    03 | .NET Core的现状.未来以及环境搭建 .NET Core的现状 .NET Core 的应用场景:桌面端.Web端.云端.移动端.游戏.IOT 和 AI 云端指的是 .NET Core ...

  7. JS LeetCode 303. 区域和检索 - 数组不可变，一维数组的前缀和

    壹 ❀ 引 本题来自LeetCode303. 区域和检索 - 数组不可变,属于一道简单题,不过题目期望的做法我也是看了题解才懂得,这里大致做个记录,题目描述如下: 给定一个整数数组 nums,求出数组 ...

  8. NC15291 幸运数字Ⅱ

    题目链接 题目 题目描述 定义一个数字为幸运数字当且仅当它的所有数位都是4或者7. 比如说,47.744.4都是幸运数字而5.17.467都不是. 定义next(x)为大于等于x的第一个幸运数字.给定 ...

  9. Java并发编程实例--12.使用线程工厂创建线程

    工厂模式是面向对象编程世界中最有用的设计模式. 它是一个创新型的模式,目标是开发一个对象,这个对象的任务是去创建其他类对象. 这样一来,如果我们想创建某些类的对象就不需要使用new关键字.好处有以下几 ...

  10. 高并发时为什么推荐ReentrantLock而不是synchronized

    目录 1.最初的 synchronized 2.synchronized 的优化 3.但是,JAVA的最终答案 JDK 21 LTS 来了 1.最初的 synchronized 它默认对临界资源添加重 ...