创建Component的方式

2023-11-04

(createClass&)

createClass&

组件的props、state等都是以对象属性的方式组合在一起,其中默认属props和初始state都是返回对象的函数

(component&)

component&

state是通过在构造函数中对this.state进行赋值实现,而组件的props是在类Greeting上创建的属性

组件的props是父组件通过调用子组件向子组件传递的,子组件内部不应该对props进行修改,它更像是所有子组件实例共享的状态,不会因为子组件内部操作而改变,因此将props定义为类Greeting的属性更为合理

而在面向对象的语法中类的属性通常被称作静态(static)属性,这也是为什么props还可以像上面注释掉的方式来定义

对于Greeting类的一个实例对象的state,它是组件对象内部维持的状态,通过用户操作会修改这些状态,每个实例的state也可能不同,彼此间不互相影响,因此通过this.state来设置。

用这种方式创建组件时,React并没有对内部的函数,进行this绑定

(pureComponent&)

pureComponent&

当组件的props或者state发生变化的时候:React会对组件当前的Props和State分别与nextProps和nextState进行比较,当发现变化时,就会对当前组件以及子组件进行重新渲染,否则就不渲染

有时候为了避免组件进行不必要的重新渲染,我们通过定义shouldComponentUpdate来优化性能。

不需要手动来写shouldComponentUpdate

 

当props或者state本身是嵌套对象或数组等时,浅比较并不能得到预期的结果,这会导致实际的props和state发生了变化,但组件却没有更新的问题

ListOfWords组件来将单词数组拼接成逗号分隔的句子,它有一个父组件WordAdder让你点击按钮为单词数组添加单词

避免使用可变对象作为props和state,取而代之的是每次返回一个全新的对象

(Stateless Functional Component&)

Stateless Functional Component&

都是用来创建包含状态和用户交互的复杂组件,当组件本身只是用来展示,所有数据都是通过props传入的时候,我们便可以使用Stateless Functional Component来快速创建组件。

Stateless Functional component没有shouldComponentUpdate,所以也无法控制组件的渲染,也即是说只要是收到新的props,Stateless Functional Component就会重新渲染。

我更推荐使用PureComponent,因为它提供了更好的性能,同时强制你使用不可变的对象,保持良好的编程习惯。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

创建Component的方式 的相关文章

  • React重点知识拓展,含Hooks、路由懒加载等

    第7章 React扩展 一 setState 1 setState更新状态的2种写法 setState stateChange callback 对象式的setState stateChange为状态改变的对象 该对象可以体现出状态的更改
  • 【前端】react-markdown配置解析

    文章目录 react markdown基本配置 同步预览配置 MdEditorComponent js reducer js initBlogState js action types js sync actions js store js
  • React的State Hook用法详解

    一 State Hook是啥 State Hook 就是指 useState 这个特殊函数 让你不用编写class 就可以使用state特性 换言之就是让 函数组件 拥有 state 特性 对数据进行动态更新 二 class中的state
  • React页面设计初体验

    1 定制路由 export default login path login name login component layouts BlankLayout routes path login component Login Index
  • 组件间样式覆盖问题--CSS Modules

    1 组件间样式覆盖问题 问题 CityList 组件的样式 会影响 Map 组件的样式 原因 在配置路由时 CityList 和 Map 组件都被导入到项目中 那么组件的样式也就被导入到项目中了 如果组件之间样式名称相同 那么一个组件中的样
  • js扩展jquery对象基元的开发与代码编写

    js扩展jquery对象基元的开发与代码编写 function window undefined var Core function var eventarr var OnPageLoad undefined 获取USER信息 var ge
  • 一文揭秘饿了么跨端技术的演进、实践与落地

    本文会先带领大家一起简单回顾下跨端技术背景与演进历程与在这一波儿接着一波儿的跨端浪潮中的饿了么跨端现状 以及在这个背景下 相较于业界基于 React Vue 研发习惯出发的各种跨端方案 饿了么为什么会选择走另外一条路 这个过程中我们的一些思
  • 三、react中类组件和函数组件

    简介 本篇我们只要介绍react中类组件与函数组件两种组件的写法 两者的优缺点 同时对在我们的项目开发中该使用类组件还是函数组件进行思考分析 废话不多说进入正题 类组件 设计思路 类组件时面向对象编程的思想 在其中我们去设计类组件时使用st
  • 三分钟实现一个react-router-dom5.0的路由拦截(导航守卫)

    不同于vue 通过在路由里设置meta元字符实现路由拦截 在使用 Vue 框架提供了路由守卫功能 用来在进入某个路有前进行一些校验工作 如果校验失败 就跳转到 404 或者登陆页面 比如 Vue 中的 beforeEnter 函数 rout
  • react组件状态同步-状态提升

    假设定义组件TemperatureInputSon import React from react class TemperatureInputSon extends React Component constructor props su
  • React(一):React的设计哲学 - 简单之美

    React 一 React的设计哲学 简单之美 React 二 React开发神器Webpack React 三 理解JSX和组件 React 四 虚拟DOM Diff算法解析 React 五 使用Flux搭建React应用程序架构 Rea
  • React解密:React Hooks函数之useCallback和useMemo

    之所以将useCallback和useMemo放到一起 从某种意义上说 他们都是性能优化的始作俑者 他们也有很多的共性 我们先来回顾一下class组件性能优化的点 调用 setState 就会触发组件的重新渲染 无论前后 state 是否相
  • React之state、hooks性能分析

    目录 一 state 1 为什么使用setState 2 setState异步更新 3 如何获取异步的结果 4 setState一定是异步吗 5 源码分析 6 数据的合并 7 多个state的合并 二 为什么需要Hook 三 Class组件
  • 前端学科面试题大全

    作用域和值类型引用类型的传递 变量作用域 作用域变量访问区域 变量值存在栈中 变量赋值相当于值赋值 值传递与引用传递有哪些区别 函数内部 变量会先声明 形式参数变量声明提升 整个函数体有var声明的变量 如果没有访问全局定义的num2 函数
  • 【react】回调函数形式的ref

    回调函数有3个特点 是我定义的函数 我没有调用这个函数 在我没有调用的情况下这个函数自己执行了 ref绑定一个箭头函数作为回调函数 可以输出以下这段看下 ref绑定的箭头函数是会自己执行的 class Demo extends React
  • ant design pro 代码学习(七) ----- 组件封装(登录模块)

    以登录模块为例 对ant design pro的组件封装进行相关分析 登录模块包含基础组件的封装 组件按模块划分 同类组件通过配置文件生成 跨层级组件直接数据通信等 相对来说还是具有一定的代表性 1 登录模块流程图 首先 全局了解一下登录模
  • hooks实践总结

    何为hooks 在React中hook是指不编写 class 的情况下使用 state 以及其他的 React 特性 而Vue3也推出了具有相同功能的组合式API 如果你用过Vue3就会知道在 setup 中你应该避免使用 this 因为h
  • quill编辑器使用

    官方git https github com quilljs quill 官方文档 https quilljs com 中文文档 https kang bing kui gitbook io quill 编辑器是个正经编辑器 就是文档太不正
  • React Jsx转换成真实DOM过程?

    面试官 说说React Jsx转换成真实DOM过程 一 是什么 react 通过将组件编写的 JSX 映射到屏幕 以及组件中的状态发生了变化之后 React 会将这些 变化 更新到屏幕上 在前面文章了解中 JSX 通过 babel 最终转化
  • 如何提高React组件的渲染效率的?在React中如何避免不必要的render?

    面试官 说说你是如何提高组件的渲染效率的 在React中如何避免不必要的render 一 是什么 react 基于虚拟 DOM 和高效 Diff 算法的完美配合 实现了对 DOM 最小粒度的更新 大多数情况下 React 对 DOM 的渲染

随机推荐

  • PHY调试经验

    1 PHY调试过程 1 设备树中配置正确的PHY ADDR PHY ID clause 45或者22协议 PHY ADDR配置不正确会导致MDC MDIO通信不正常或失败 PHY ID用于匹配PHY驱动程序 2 通过MDC MDIO读写PH
  • Google亲儿子 Nexus/Pixel 手机刷机Root之旅

    简介 本文介绍的方法是针对Google亲儿子的教程 其他国内厂商请绕道 1 解锁 1 1 OEM解锁 想要做下面这些事 需要先在开发者选项里打开oem解锁 如果你的手机是V版 运营商定制版 请看这里 oem解锁选项灰色 1 2 进入boot
  • 【JDBC】关于JDBC入门和一些见解

    关于JDBC的一些理解和总结 JDBC连接数据库 刚开始学的时候经常忘记步骤 其实多了几次之后发现完全就是自己没有理解到原理 现在回头看还是挺有意思的 分为以下几个步骤 1 注册加载JDBC驱动 把Driver装进JVM Class for
  • Centos 7 重启网卡报错解决方案

    一 Network 当重启网卡时报错 解决方案 步骤1 修改对应文件 增加命令 步骤2 关闭NetworkManager服务 并重启网卡 systemctl stop NetworkManager systemctl restart net
  • 解谜元宇宙元年的十个疑问

    解谜元宇宙元年的十个疑问 2021年 元宇宙突然出现在大家的视野之中 相关概念受到资本的热捧 成为金融市场的热点 这难免会让我们对元宇宙产生很多好奇和疑问 本文总结了十个对元宇宙的疑问 并一一作出解答 2021年为什么是元宇宙元年 元宇宙
  • 关于运算放大器电流流向的问题

    前言 一 问题的引入 二 提出问题 三 问题解答 写在结尾的话 前言 问题缘起于一次硬件同事之间的讨论 虽然目前我不是做硬件的 但签于我的专业以及之前从事的工作 觉得有必要把记录下来 后期也打算写一些站在学习者的角度 关于硬件知识的学习心得
  • 数字电路和模拟电路-8触发器

    前言 掌握锁存器原理及应用 基本SR锁存器 钟控SR锁存器 钟控D锁存器 钟控D锁存器的动态参数 掌握触发器原理及应用 主从触发器 维持阻塞触发器 其它功能的触发器 目录 一 基本SR锁存器 1 双稳态电路 Bistate Elements
  • Android系统Unity使用HttpWebRequest访问Https请求出现连接超时

    多渠道版本配置网络地址时 http地址替换为了https 由于粗心大意 之前同事遗留的请求框架代码没有对https协议进行 处理 导致在android手机下unity访问https地址进行配置文件下载更新时出现连接超时问题 解决方案 if
  • word vba设置表格样式

    Sub 表格处理 功能 光标在表格中处理当前表格 否则处理所有表格 Application ScreenUpdating False 关闭屏幕刷新 Application DisplayAlerts False 关闭提示 On Error
  • java连接db2数据库示例代码_java实现连接db2数据库的代码实例

    java实现连接db2数据库的代码实例 第一种 目前ibm一直都没有提供type 1的jdbc驱动程序 第二种 类型2驱动 com ibm db2 jdbc app db2driver 该驱动也位于包db2java zip中 jdk必须能访
  • uniapp 微信小程序长按识别二维码,跳转小程序、个人微信

    前言 业务要求是小程序放一个二维码图片 长按可以识别二维码 进而识别出个人微信 添加个人微信 我们可以通过uni previewImage OBJECT 或者 wx previewImage Object object 预览当前图片去实现
  • 24-系统自带的 Win+R 功能

    Win 运行窗口 Win R 开始菜单 gt 运行 是 Windows 的一个原生的功能 从 XP 到 Windows 10 都自带了 当用户按下快捷键 Win R Win 为键盘上Windows图标键 后 系统会弹出一个小窗口让你输入命令
  • 用户态虚拟化IO通道实现概览及实践(上)

    自虚拟化技术诞生起 提升虚拟化场景中IO设备性能和驱动的兼容性 可扩展性一直是备受关注和追求的目标 随着半虚拟化技术的出现 virtio设备及驱动也很快流行并逐步变成了虚拟化应用中的主要IO通道形态 例如 virtio现已支持实现的设备涵盖
  • Dell IDRAC服务器重装系统详解(远程连接)

    主要的操作步骤文末附上的那篇博客写的比较详细了 不足的地方是有一些小问题没有说明白 导致新手可能不太清楚操作 而无法 复现 安装过程 TIPS 1 远程连接登录的时候 用户名root 密码calvin不一定可行 如果不行的话 看一下服务器机
  • 研一Python基础课程第四周课后习题分享(含源代码)

    代码写的较多 有问题可以私聊我 第四周作业分享 一 题目前言 二 题目分享 1 问题1 2 问题2 3 问题3 4 问题4 5 问题5 6 问题6 7 问题7 8 问题8 9 问题9 10 问题10 11 问题11 12 问题12 13 问
  • 深度学习之经典案例 CIFAR10 图形识别(jupyter)

    图像识别 CIFAR10图形识别 1 CIFAR10数据集共有60000张彩色图像 这些图像式32 32 3 分为10个类 每个类6000张 2 这里面有50000张用于训练 构成5个训练批 每一批10000张图 另外10000张用于测试
  • Centos7网卡配置——动态与静态

    Centos7网卡配置 一 自动获取动态IP地址 二 配置静态IP地址 三 修改网卡注意事项 四 基础知识 以下实例全部基于VM虚拟机操作 一 自动获取动态IP地址 1 输入命令 ip addr 查看IP地址 右下图可以发现只有一张名为en
  • git版本回退到某一次提交

    背景 今天一个前端女同事问我她如何才能回退到上一次她提交的版本 她网上找了方法 却没有起作用 问题虽然简单 但是还是记录下来 解决问题 使用命令 git log查看提交记录 并复制下想要回退到那个版本的commitId 就是commit后面
  • 医学图像肝脏分割(一)---预处理

    预处理是肝脏分割重要的一步 良好的预处理过程可以有效的提高分割的准确度 此博文主要记录肝脏分割过程中常见的预处理方法及相关代码 一 标准的预处理过程 1 Kaggle LUNA16 competition preprocessing tut
  • 创建Component的方式

    createClass createClass 组件的props state等都是以对象属性的方式组合在一起 其中默认属props和初始state都是返回对象的函数 component component state是通过在构造函数中对th