React 事件机制
React并不是将事件绑定到元素的真实Dom上,而是在document中监听所有事件,当事件发生时,冒泡到document处,React将事件内容封装到真正的处理函数中运行 减少了内存消耗,组件挂载销毁时也能统一订阅和移除事件
React的事件和普通html事件有什么区别
1.命名规范不同
2.处理语法不同
3.必须调用preventDefault()阻止默认行为
React组件怎么做事件代理的,原理是什么
原理:React基于Virtual Dom实现了一个合成事件层,定义的事件处理器会接受到一个合成事件对象的实例,符合W3c标准,且与原生的浏览器事件拥有同样的接口,支持冒泡机制,所有事件都自动绑定在最外层上
事件委托:React会把所有的事件都绑定在结构的最外层,使用统一的事件监听器,这个事件监听器上维持一个映射来保存所有组件内部事件监听和处理函数
自动绑定:React组件中,每个方法上下文都会指向该组件的实例,即自动绑定this为当前组件
React高阶组件、Render props、hooks有什么区别,为什么要不断迭代
高阶组件:Hoc是React中一种增强组件的一种高级技巧,参数为组件名,是一种基于React组合特性形参的设计模式,返回为新组件函数
Render Props 是一种在React组件中使用值为函数的Porp共享代码的简单技术,render Prop是一个用于告知需要渲染什么内容的函数
hooks:React16.8的新增特性。他可以在不写class的情况下使用state通过自定义hook来实现代码共享
总结:以上都是为了解决代码复用的问题
对React-Fiber的理解,解决了什么问题
React-Fiber 是React 16引入的一种架构,解决了React 15 用户页面响应过慢的缺陷。
在React 15中 采用的是递归对比虚拟DOM树,找出需要变动的节点,然后同步更新,过程叫协调, 这时候react会一直占用浏览器资源,导致用户触发事件得不到响应
在React 16中 采用的是Fiber框架,Fiber可以理解为一个执行单元,每执行一个单元,react就会检查还剩多少事件,如果没有事件则会将控制权让出去。
Component Element Instance 之间有什么区别和联系
Component:组件
Element : 元素
Instance : 实例
组件可以通过多种方式声明,带有一个render方法的类组件,也可以是一个函数组件,都把props作为输入,把返回的一颗元素树作为输出
元素是一个图片短袖,描述了对于一个DOM节点或者其他组件component在屏幕上呈现的样子
实例 this指向的就是实例,他用来储存本地状态和响应声明周期事件
高阶组件和普通组件的区别
高阶组件 HOC 就是一个函数,函数接受组件作为参数,返回一个新组件,称为纯组件,因为他们可以接受热内核动态提供的自组件,但是他们不会修改或复制组件中任何行为
场景:代码、逻辑复用
业务场景:权限控制
利用高阶组件的条件渲染特性可以对页面进行权限控制,权限控制一般分为两个维度:页面级别和页面元素级别
即:页面权限,元素显示权限
哪些方法会触发React重新渲染?重新渲染render会做些什么
forceUpdate() setState() useEffcet()
React如何判断什么时候重新渲染组件
利用shouldComponentUpdate方法来查看他是否返回
React声明组件有几种方法,有什么不同
React声明有三种方式
- 函数式声明
- ES5原生方式React.createClass定义
- ES6类组件的extends React.Component
函数式组件: 根据传入的props来展示,不涉及到state状态的操作组件不会被实例化,整体渲染性能得到提升,没有this,没有生命周期
ES5原生方式 React.createClass: React.createClass会绑定函数方法,导致不必要的性能消耗,增加代码过时可能
ES6继承形式React.Component: 与React.createClass类似,相比之下更好实现复用小狗
不同:
1.函数this绑定
2.组件类型 (propTypes props defaultProps)
3.组件初始化状态state的配置不同
对有状态组件和无状态组件的理解及用法场景
有状态组件(类组件)
特点:
- 可继承
- 可以使用this
- 可以使用react的生命周期
- 使用较多,容易频繁触发生命钩子函数,影响性能
- 内部有state,维护自身状态变化,根据传入的props和自身的state进行渲染
无状态组件
特点:
- 使用hooks代替生命周期
- 没有this
- 性能高
- 组件不维护state,根据传入的props进行渲染组件
对React中Fragment的理解,他的使用场景
在React中,组件返回额元素只能有一个根元素,为了不添加多余的DOM节点,可以使用Fragment标签来包裹所有元素,Fragment标签不会渲染出任何元素
React如何获取组件对应的DOM元素
使用ref来获取某个元素的节点实例,通过当前class组件实例的一些特定属性来直接获取子节点实例 有三种使用方式
字符串格式
函数式格式
creatRef()
React中可以在render中访问refs吗
不可以,render阶段DOM还未生成,无法获取DOM,DOM获取需要在pre-commit阶段和commit阶段,即在render之后能获取
React的插槽的理解,如何使用,有哪些使用场景
Portal提供了一种将子节点渲染到父组建以外的DOM节点的优秀方案
使用 ReactDOM.createPortal(child,container)
场景:对话框,拟态窗
在react中如何避免不必要的render
利用:
shouldComponentUpdate和PureComponent
在函数式组件中,没有shouldComponentUpdate这个生命周期,可以利用高阶组件,封装一个类似PureComponent
React.memo 是React 16.6 的一个新的API ,用来缓存组件渲染,避免不必要的更新,只能用于函数式组件
React-Intl的理解,他的工作原理
他的作用是配置不同语言的工具包
他工作原理是根据需要在语言包之间进行切换
提供了一系列的React组件,包括数字格式化,字符串格式化,日期格式化
React Context的理解
在React,数据传递一般使用Props传递数据,有时候这样传递太繁琐
Context提供一种组件之间共享值的方式,不必通过props逐层传递
把Context当作是特定一个组件树内共享的store,用来传递数据
React有什么特点
React的主要功能如下
1.使用的是虚拟DOM而不是真实DOM 2.可以用服务器渲染 3.他遵循单向数据流活数据绑定
React的优点有哪些
1.提高了应用性能 2.可以方便的在客户端和服务器端使用 3.运用JSX,代码可读性好 4.React很容易与Meteor,Angular等框架集成 5.使用React,编写UI测试用例变得更容易
React的缺点有哪些
1.React是一个库,而不是一个框架 2.他的库非常庞大 3.新手难以理解 4.编码复杂,内部使用内联模版和JSX
什么是JSX
JSX是JavaSrciptXML的简写。是React使用的一种文件,文件能使用应用非常可靠,提高其性能
了解Virtual DOM吗?
当数据发生改变后,整个UI都将在Virtual DOM中重新渲染
计算之前DOM与改变后的DOM做比较,完成计算后更新real DOM
为什么浏览器无法读取JSX
浏览器只能处理JavaScript对象,而不能读取JavaScript中的JSX,用的是babel转换器将JSX转换为JavaScript对象,然后再将器传给浏览器
与ES5相比React ES6语法有什么不同
1.导入 require 与 import
2.导出 exports 与 export
3.组件 类组件 与 函数式组件
4.传值 propTypes 与 props
5.状态 getInitialState 与 state
你理解 React中,一切都是组件
组件是React应用UI的构建块,这些组件将整个UI分成小的独立并可重用的部分,每个组件都相对独立的,不会影响UI的其余部分
解释React中的render是用来干嘛的
每个组件都必须有一个render。他返回的是React元素,是原生DOM组件的表示,如果需要渲染多个HTML元素,就需要用 From div 等标签来进行包裹
如何将两个组件或多个组件嵌套到一个组件中,
1.可以通过封装多个组件然后导入到 嵌套组件中 2.可以通过ReactDOM.render将组件嵌入组件中
什么是Props
Props是React中的属性,是用来将父组件中的数据传入到子组件中,数据时只读的,不能修改
React的状态是什么?他是如何使用的
状态是React中的核心,是数据的来源,相当于vue里的data,数据时可变的,通过的是this.state获取数据
state和props区别
1.props 是组件对外的接口,state 是组件对内的接口
2.props的赋值是在外部,state的赋值在于组件内部
3.组件不应该改变props的值,而state存在的目的就是让组件来修改
4.state只能在constructor中设置默认值
5.setState修改state的值是异步
React中的合成事件是什么
合成事件是围绕浏览器原生事件充当跨浏览器包装的对象 例如onClick onChange等
React组件生命周期的阶段是什么
1.初始渲染阶段:这是组件即将开始其生命之旅并进入DOM阶段 2.更新阶段: 一旦组件被添加到DOM,它只有在prop或状态发生变化时更新和重新渲染 3.卸载阶段: 这是组件生命周期的最后阶段,组件被销毁并从DOM中删除
详细解释React组件的生命周期方法
1.componentWillMount:在渲染之前执行,在客户端和服务器端都会执行
2.componentDidMount:仅在第一次渲染后在客户端执行
3.componentWillReceiveProps 当从父类接受到props并调用另一个渲染器之前调用
4.shouldCompoentUpdate 根据特定条件返回true或false , true表示渲染组件 false表示不渲染 默认则是为true
5.componentWillUpdata 在DOM进行渲染之前调用
6.componentDidUpdata 在DOM渲染之后调用
7.componentWillUnMount 组件销毁时调用,用于清空内存
如何在React中创建表单
React 表单类似于 HTML 表单,在React中,状态包含在组件的state属性中,只能通过setState()更新 ,因此元素不能直接更新他们的状态,他提交是由JavaScript函数处理,函数可以直接访问用户输入的表单数据
受控组件和非受控组件了解多少
受控组件
1.没有维持自己的状态
2.数据由父组件控制
3.通过props获取当前值,然后通过回调通知更改
非受控组件
1.保持着自己的状态
2.数据由DOM控制
3.Refs获取当前值