目录
十一.在react类组件当中setSate第二个参数是什么作用?
十二.在react那个生命周期,在class组件以及hooks哪一步进行发送ajax请求?
一.什么是受控组件?
受控组件,从字面意思上说就是受到我们控制的组件,组件的状态全程响应外部数据。
引用场景:一般用于表单场景较多,如下代码
class From extends Component {
state = {
inputName:'输入'
}
onChange = event => {
this.setState({
inputName:event.target.value
})
}
render(){
const {inputName} = this.state
return <input value={inputName} onChange={this.onChange}></input>
}
}假如没有onChange这个事件,用户输入该input的时候,input的Value不会发生变化,也就是说input收到了控制所以该组件是受控组件
二.非受控组件
如字面意思所理解的,不收状态所控制的组件,称之为非受控组件,一般情况在初始化数据的时候接受外部数据,然后自身存储该组件的状态,称之为非受控组件。
三.什么时候使用受控组件什么时候使用非受控组件?
1.当表单需要进行联动的时候,例如我们需要将用户的一级下拉的状态进行管理起来, 根据一级下拉从而遍历二级下拉的信息。
2.有条件的进行提交, 例如总金额 >= 使用金额 + 剩余金额 才能够进行提交
3.将输入的内容进行转化,例如将大写字母全部转化为小写字母
四.函数组件与class组件之间的区别 ?
相同点:
它们都可以接受属性,并且返回React元素
不同点:
1.编程的思想不一样,类组件是基于面向对象的方式编程,而函数组件不需要创建实例,接受参数返回输出,是基于函数式编程的思想。
2.内存的占用:因为类组件需要创建并且保存实例,会占用一定的内存,函数组件不需要进行实例的创建,所以可以节约内存的占用。
3.可测试性:函数组件更加方便编写单元测试。
4.状态:类组件中有自己的实例,可以自定义状态,而且可以修改状态进而更新组件,函数组件中没有自身的状态,现在可以使用hooks useState。
5.生命周期:类组件中含有自己的生命周期钩子函数,但是函数组件中没有自己的生命钩子,现在可以使用hooks UseEffect。
6.未来函数组件是发展的趋势。
五.React的事件机制
用React绑定的事件并不是绑定在DOM元素的本身,而是绑定在Document上,然后通过事件的代理形式进行处理事件,并且React进行事件的合并,为例解决不同浏览器事件差异将其进行统一
优点:不需要注册太多的事件减少内存的使用,因为在Document上每一种事件只会被注册一次,将Dom与事件进行Map绑定,性能上得到很大的提升。
六.React中的事件和普通的html事件有什么区别
1.首先是命名方式的不同,原声的都是小写,而React是小驼峰命名。
2.对于事件的处理语法不同,原声的事件为字符串,react为函数。
3.React不能过通过renturn false来阻止默认事件,而是要采用preventdefault阻止默认事件。
七.React组件怎么做到事件的代理,原理是什么?
React中的Dom事件并不是监听Dom的本身,而是通过Document进行监听代理,通过dispacthEvent函数进性处理监听。在React内部会维护一个映射记录表,记录事件与事件的处理逻辑,当映射表中没有记录相关的处理逻辑函数,react将不会做出反应。
八.react 和 vue 的区别是什么？
1.首先vue和react都是单向数据流,vue是响应式数据能够进行双向数据绑定。
2.Vue语法较为简单,适用于中小型项目的搭建,React更加适合web端部署一些大型醒目。
3.React与Vue都是采用的是虚拟Dom。
九.state 和 props 区别是什么？
state与props都是普通的js对象,这两个对象发生变化都会影响组件的更新,但是他们的功能是不同的;
1.state是可控的,可以通过setState进行修改的,但是props是不允许被修改的,props是通过父组件传递给子组件的。
2.为了提高新能,我们应该多用props少用一些state,也就是说我们尽量多些一些无状态组件;
3.含有state的组件叫做有状态组件,不含有state的组件叫做无状态组件,无状态组件主要适用于组件端的渲染。
十.React中for循环key的作用是什么?
简单来说key就是虚拟对象的一个唯一标识,key要保持唯一性,更新渲染的时候key起到至关重要的作用,React会根据新的数据生成新的Vdom,新的vdom与旧的vdom进行diff比较。
1.首先在旧的VDom找出跟新的VDom相同的key,如果找到相同的key则会比较里面的内容,如果内容相同,则采用旧的Dom,如果不同则将新的Vdom渲染成Dom。
2.如果采用index作为key的话,如果数据进行逆向添加或者修改的则所有的dom进行更新操作降低效率。
十一.在react类组件当中setSate第二个参数是什么作用?
在类组件当中setState第二个参数是一个callback函数,该函数在setState执行完成后并且组件渲染后进行执行可以用该函数来监听渲染是否完成。
十二.在react那个生命周期,在class组件以及hooks哪一步进行发送ajax请求?
在class组件中我们一般在ComponentDidMount中发送ajax请求,在hooks组件当中我们在useEffect中发送请求,并且数组为空[];
十三.概述下React的事件处理逻辑?
为了解决浏览器的事件兼容,React将浏览器原生事件进行合成,并且react监听事件并不是在Dom上进行监听,而是在Document上进行处理的采用的是事件委托原理,避免在每一个dom上进行监听从而提高了效率。
十四.什么时候使用函数式组件什么时候使用类组件?
1.操作简单,只渲染UI的时候我们使用函数组件,也就是无状态的时候我们采用的是函数组件。
2.逻辑复杂,操作复杂,使用一些生命周期的复杂场景我们采用的是类组件。
4689
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
