每天几个前端小知识

简介: 每天几个前端小知识

React



8.调用setState之后发生了什么?


React在调用setstate后,react会将传入的参数对象和组件当前的状态合并,触发调和过程,在调和过程中,react会根据新的状态构建react元素树重新渲染整个UI界面,在得到元素树之后,react会自动计算新老节点的差异,根据差异对界面进行最小化重新渲染


9.react生命周期函数


componentWillMount组件渲染之前调用

componentDidMount在第一次渲染之后调用

componentWillReceiveProps在组件接收到一个新的props时调用

shouldComponentUpdate判断组件是否更新html

componentWillupdate组件即将更新html时调用

componentDidupdate在组件完成更新后立即调用

componentWillUnmount在组件移除之前调用


10.为什么虚拟dom会提高性能?(必考)


虚拟dom相当于在js和真实dom中间加了一个缓存,利用dom

diff算法避免了没有必要的dom操作,从而提高性能


11.(组件的)状态(state)和属性(props)之间有何不同


State与props区别

Props是一个从外部传进组件的参数,主要作用就是父组件向子组件传递数据,但是props对于使用它的组件来说是只读的,一旦赋值不能修改,只能通过外部组件主动传入新的props来重新渲染子组件

State一个组件的显示形态可以由数据状态和外部参数决定,外部参数是

props,数据状态就是state,首先,在组件初始化的时候,用this.state

给组件设定一个初始的state,在第一次渲染的时候就会用这个数据来渲

染组件,state不同于props一点时,state可以修改,通过this.setState()方法来修改state


12.shouldComponentUpdate是做什么的


这个react生命周期钩子函数是来解决这个问题:

在更新数据的时候用setState修改整个数据,数据变了之后,遍历的时候所有内容都要被重新渲染,数据量少还好,数据量大就会严重影响性


解决办法:

1.shouldcomponentupdate在渲染前进行判断组件是否更新,更新了再渲染

2.purecomponent(纯组件)省去了虚拟dom生成和对比的过程在类组件中使用

3.react.memo()类似于纯组件在无状态组件中使用


13.reactdiff原理


它是基于三个策略:

treediffwebUI中dom节点跨层级的移动操作特别少,可以忽略不计
componentdiff拥有相同类的两个组件将会生成相似的树形结构,拥有

不同类的两个组件会生成不同的树形结构elementdiff对于同一层级的一组子节点,他们可以通过唯一的id进行


区分


14.何为受控组件


React负责渲染表单的组件,值是来自于state控制的,输入表单元素称为受控组件


15.调用super(props)的目的是什么


Super()调用父类的构造方法,有super,组件才有自己的this,在组件全局中都可以使用this,如果只是constructor而不执行super,之后的this都是错的,super继承父组件的this


16.React中构建组件的方式


自定义组件:函数组件或者无状态组件组件首字母大写

类组件:一个类组件必须实现一个render方法,这个方法必须返回一个jsx元素,要用一个外层的元素把所有内容包裹起来


17.简述flux思想


Flux的最大特点,就是数据的"单向流动"。

1.用户访问View

2.View发出用户的Action

3.Dispatcher收到Action,要求Store进行相应的更新

4.Store更新后,发出一个"change"事件


18.React项目用过什么脚手架?Mern?Yeoman?


Mern:MERN是脚手架的工具,它可以很容易地使用Mongo,Express,ReactandNodeJS生成同构JS应用。它最大限度地减少安装时间,并得到您使用的成熟技术来加速开发。


19.应该在React组件的何处发起Ajax请求?


在React组件中,应该在componentDidMount中发起网络请求。这个方法会在组件第一次“挂载”(被添加到DOM)时执行,在组件的生命周期中仅会执行一次。更重要的是,你不能保证在组件挂载之前Ajax请求已经完成,如果是这样,也就意味着你将尝试在一个未挂载的组件上调用setState,这将不起作用。在componentDidMount中发起网络请求将保证这有一个组件可以更新了。


20.何为高阶组件(higherordercomponent)?


高阶组件是一个以组件为参数并返回一个新组件的函数。HOC运行你重用代码、逻辑和引导抽象。最常见的可能是Redux的connect函数。除了简单分享工具库和简单的组合,HOC最好的方式是共享React组件之间的行为。如果你发现你在不同的地方写了大量代码来做同一件事时,就应该考虑将代码重构为可重用的HOC。

目录
相关文章
|
存储 分布式计算 网络协议
阿里云服务器内存型r7、r8a、r8y实例区别参考
在阿里云目前的活动中,属于内存型实例规格的云服务器有内存型r7、内存型r8a、内存型r8y这几个实例规格,相比于活动内的经济型e、通用算力型u1实例来说,这些实例规格等性能更强,与计算型和通用型相比,它的内存更大,因此这些内存型实例规格主要适用于数据库、中间件和数据分析与挖掘,Hadoop、Spark集群等场景,本文为大家介绍内存型r7、r8a、r8y实例区别及最新活动价格,以供参考。
阿里云服务器内存型r7、r8a、r8y实例区别参考
|
数据处理 C语言 智能硬件
STM32微控制器在智能家居中的应用
STM32微控制器在智能家居中的应用
618 0
|
人工智能 安全 大数据
新一代信息通信技术
新一代信息通信技术
1423 5
|
存储 弹性计算 云计算
深入理解云计算:探索IaaS、PaaS和SaaS服务模型
云计算作为当代信息技术领域的关键驱动力,通过提供弹性计算资源和灵活的服务模型,极大地改变了企业和个人的计算方式。本文深入探讨了云计算的基础概念,着重介绍了三种主要的云计算服务模型:IaaS、PaaS和SaaS。
1693 0
|
存储 SQL NoSQL
NoSQL数据库
NoSQL数据库
477 4
|
机器学习/深度学习 人工智能 自然语言处理
大语言模型的预训练[2]:GPT、GPT2、GPT3、GPT3.5、GPT4相关理论知识和模型实现、模型应用以及各个版本之间的区别详解
大语言模型的预训练[2]:GPT、GPT2、GPT3、GPT3.5、GPT4相关理论知识和模型实现、模型应用以及各个版本之间的区别详解
大语言模型的预训练[2]:GPT、GPT2、GPT3、GPT3.5、GPT4相关理论知识和模型实现、模型应用以及各个版本之间的区别详解
|
机器学习/深度学习 计算机视觉
字节豆包全新图像Tokenizer:生成图像最低只需32个token,最高提速410倍
【7月更文挑战第1天】新方法将图像转为1D token序列,减少计算复杂度,提高生成效率。在保持高画质(如gFID: 1.97 on ImageNet 256x256)的同时,TiTok比现有模型快410倍。虽有资源需求及token限制问题,但展示了图像处理的新方向。[论文链接](https://arxiv.org/abs/2406.07550)
718 7
|
人工智能 前端开发 UED
AI代码生成器——MutableAI
【2月更文挑战第17天】AI代码生成器——MutableAI
608 7
AI代码生成器——MutableAI
|
缓存 Kubernetes 搜索推荐
k8s自定义controller三部曲之三:编写controller代码
本文是《k8s自定义controller三部曲》的终篇,编写controller的代码,通过监听API对象的增删改变化做出业务方面的响应
1466 0
k8s自定义controller三部曲之三:编写controller代码
|
网络协议 安全 网络安全
【专栏】IPv6是为解决IPv4地址不足、安全性和配置复杂性问题而提出的下一代互联网协议
【4月更文挑战第28天】IPv6是为解决IPv4地址不足、安全性和配置复杂性问题而提出的下一代互联网协议。它提供128位地址空间(几乎无限)、简化报文格式、内置IPsec安全机制、自动配置能力及增强的QoS。IPv6的优势包括更高的传输效率、更强的安全性、移动性和组播功能,以及即插即用的设备。然而,部署面临IPv4兼容性、技术更新、经济驱动和安全挑战。随着技术发展,IPv6的普及将成为必然趋势。
1486 1