首页 > 其他分享 >React函数式组件使用@emotion时一定要注意的问题!

React函数式组件使用@emotion时一定要注意的问题!

时间:2023-02-08 19:22:24浏览次数:54  
标签:emotion Container React FC 组件 input

怎么说呢,一个坑,踩了两天,总觉得是useSate和input的传值方法问题
在useMemo和useCallback反复测试问题
最后没办法,通过最傻方式,一点点注释代码,发现了问题

const Container = styled.div`
  padding: 3rem;
`;

一个非常简单的定义容器样式的值
定义在了FC内部!!
导致每次input改变,组件每次重新渲染都会检查到Container这个组件
由于对象的引用类型,每次比对都不会===
所以打一个字就会开始重新刷组件

一定要放在FC外面啊

标签:emotion,Container,React,FC,组件,input
From: https://www.cnblogs.com/rion1234567/p/17103034.html

相关文章

  • vue3语法糖+ts组件传值
    在开发中有些功能是通用的,而且逻辑大致相同,像这种东西可以封成一个组件,比较常用的就是函数封装,组件封装,组件封装是需要引入到页面使用的,所以通常它会有一些自己的方法,父子......
  • 【vue3】父子组件通信之 vue3 defineProps,defineEmits ,defineExpose
    1、简介父组件通过v-bind绑定一个数据,然后子组件通过defineProps接受传过来的值,2、代码示例1)给Menu组件传递了一个title字符串类型是不需要v-bind<template><d......
  • drf 认证组件、权限组件、频率组件
    认证组件访问某个接口需要登陆后才能访问#第一步写一个登录功能用户表 User表UserToken表:存储用户登录状态【这个表可以没有如果没有把字段直接卸载User......
  • C#,Winform软件防破译-源代码加密简单方法之.NET REACTOR(一)
     一、.NETReactor介绍 .NETReactor是一个功能强大的代码保护和软件许可系统,适用于为.NETFramework编写的软件,并支持生成.NET程序集的所有语言。支持Blazor保护,支......
  • 改变props 组件传参
    修改props//将prop数据转换为本地数据computed:{initData:function(){returnthis.fName=this.firstName}}//这......
  • 2023-02-08 记录一下react-native app项目搭建过程
    项目开发环境:windows10项目运行系统:Android项目搭建前你得确保你有一个用于开发的IDE和已经安装好了的rn(react-native简称)脚手架,我是要用rn的脚手架来搭建项目的。请分......
  • Reactjs学习之fetch请求
    ReactJS通过fecth异步加载数据,并且不需要加载任何模块。是一种XMLHttpRequest的替代方案,除了用ajax获取后台数据外我们还可以使用fetch、axios等方式。1.GET使用方法:/**......
  • Blazor组件生命周期
        SetParameterAsync这个方法在组件运行后执行。参数们,也就是被标记了 Parameter 特性的参数在被设置以后,通过该方法的 ParameterView 参数传入进来。但是......
  • React:消息订阅(subscribe)-发布(publish)机制
    发布类似触发事件, 订阅类似监听事件使用这种方式的好处是,兄弟组件间通信不必再像使用props那种通过父组件来通信,多层组件之间通信也不必在一层一层的传递,直接在触发事件......
  • Blazor子组件传递数据到父组件
    @page"/counter"<PageTitle>Counter</PageTitle><SubComponnenttest="returnDatas"></SubComponnent><h1>Counter</h1><prole="status">Currentcount:@curren......