1、State的更新会被合并?
浅合并
2、render函数为什么return要加()
1、圆括号的作用是分割作用域和执行,在render中是给babel-jsx解析用的,这样写更符号原生编码习惯的的思维,也方便解析
2、return的圆括号是为了代码换行,不用括号的话只能写一行
用[]会渲染页面,有可能会出现key值报错
3、render为什么会执行多次?
6、React 合成事件和原生 DOM 事件的主要区别:
(1)React 组件上声明的事件没有绑定在 React 组件对应的原生 DOM 节点上。
(2)React 利用事件委托机制,将几乎所有事件的触发代理(delegate)在 document 节点上,事件对象(event)是合成对象(SyntheticEvent),不是原生事件对象,但通过 nativeEvent 属性访问原生事件对象。
(3)由于 React 的事件委托机制,React 组件对应的原生 DOM 节点上的事件触发时机总是在 React 组件上的事件之前。
7、React 事件概述
React 根据W3C 规范来定义自己的事件系统,其事件被称之为合成事件 (SyntheticEvent)。而其自定义事件系统的动机主要包含以下几个方面:
(1)抹平不同浏览器之间的兼容性差异。最主要的动机。
(2)事件"合成",即事件自定义。事件合成既可以处理兼容性问题,也可以用来自定义事件(例如 React 的 onChange 事件)。
(3)提供一个抽象跨平台事件机制。类似 VirtualDOM 抽象了跨平台的渲染方式,合成事件(SyntheticEvent)提供一个抽象的跨平台事件机制。
(4)可以做更多优化。例如利用事件委托机制,几乎所有事件的触发都代理到了 document,而不是 DOM 节点本身,简化了 DOM 事件处理逻辑,减少了内存开销。(React 自身模拟了一套事件冒泡的机制)
(5)可以干预事件的分发。V16引入 Fiber 架构,React 可以通过干预事件的分发以优化用户的交互体验。
注:「几乎」所有事件都代理到了 document,说明有例外,比如audio、video标签的一些媒体事件(如 onplay、onpause 等),是 document 所不具有,这些事件只能够在这些标签上进行事件进行代理,但依旧用统一的入口分发函数(dispatchEvent)进行绑定。
8、当文本中带有标签该如何渲染
固定语法<div dangerouslySetInnerHTML={{ __html: iHtml }}></div>
9、react是什么
用于动态构建用户界面的javaScript库 (只关注视图)——不用操作dom的意思
10、react是谁开发的
由Facebook开发,且开源。
11、react的优点
1、高效,使用虚拟DOM+优秀的Diff算法,尽量减少与真实DOM的交互
2、组件化开发
3、声明式编码
3、在React Native中可以使用React语法进行移动端开发
12、react如何将虚拟DOM渲染到页面
ReactDOM.render(被渲染的虚拟DOM,document获取的根节点)
13、创建虚拟DOM的两种方式
- 纯js: const VDOM = React.createElement(标签名,标签属性,标签内容)
- jsx语法(纯js的语法糖,运行时会自动编译为纯js的方式)
15、关于虚拟DOM:
1、本质是Object类型的对象(一般对象)
2、虚拟DOM比"较",真实DOM比较“重”,因为虚拟DOM是React内部在用,无需真实DOM上那么多的属性。
3、虚拟DOM最终会被React转化为真实的DOM,呈现在页面上
16、jsx
1、全称:javaScript XML
2、react定义的一种类似于XML的JS扩展语法:js + XML
更高效创建虚拟DOM
3 语法规则:
定义虚拟DOM时,不要写引号。
标签中混入JS表达式时要用{}
样式的类名指定不要用class,要用className。
style写法 style={{color:'white',fontSize:'29px'}}(外边的阔号时表示里面放的js表达式,这里放的是一个对象)
只有一个根标签
标签必须闭合
标签首字符
若小写字母开头,则将该标签转为html中同名元素,若html中无该标签对应的同名元素,则报错
若大写字母开头,react就去渲染相应的的组件,若组件没有定义,则报错。## XML
17、XML早期用于存储和传输数据,后来被JSON取代
原因是:XML存储的信息会附带标签,JSON就不用,比较轻便,具有parse和stringify两个属性,转化数据类型很方便
18、为什么react中的方法会丢失this
当我们onClick={this.fn}
时
1,只是把onClick指向堆中的fn,调用时也就没有实例————所以this会指向window
2,因为bable编译会自动添加strick(严格模式),所以this就会变为undefined
19、执行了ReactDOM.render(…) 之后,都发生了什么?
1、React解析组件标签,找到了Directive组件。
2、发现组件是使用类定义的,随后new出来该类的实例,并通过该实例调用到原型上的render方法。
3、将render将返回的虚拟DOM转为真实DOM,随后呈现在页面上
render中的this是组件实例对象
20、constructor作用
初始化state
函数
构造器能省略就省略
构造器是否接收props,是否传递super,取决是否希望在构造器中通过this访问props
21、解读this.fn=this.fn.bind(this)
首先我们都知道,方法挂在构造函数的prototype(原型)上,这里我们将实例的fn属性=修改了this的fn函数
此时的实例是这个样子{fn:fn(),……}
原型上的fn函数并不会改变
但是当我们调用this.fn
,会首先在对象自身找fn,从而解决了this指向的问题
22、初始化state必须在constructor中吗
初始化state也可以可以constructor外部,实例上也会增加state这个属性
23、porps和state的相同点,和不同点
不同点:
- props:来自父组件,不可修改,但是可以运算
{ num+1 }
- state: 组件实例的属性,可修改
相同点:
- 值改变都可以触发组件的更新
24、函数组件和class组件的区别?
函数组件使用可以接收props参数,无法使用state,refs
25、获取dom须知和事件执行机制
- React中使用的是自定义(合成)事件,而不是使用的原生DOM事件 ————为了更好的兼容性
- React中的事件是通过事件委托方式处理的(委托组件最外层的元素) ————为了高效性
- 通过event.target得到发生事件的DOM元素对象 ————不要过度的使用ref
26、受控组件,非受控组件
受控组件——每次输入都会更新状态
非受控组件————只有用到的时候才获取(会用大量的ref,不推荐)
27、react生命周期
必须熟悉的:
- constructor()
- render()
- componentDidMount()
- componentDidUpdate(preProp,preState,snaoshotValue) 更新阶段
- componentWillUnmount() 卸载阶段
以下知道即可————————
- getDerivedStateFromProps()
需要加static,接收两个参数(props,state)
作用是让返回一个状态对象或null,且此值不可修改
场景 state的值任何时候都取决于state - getSnapshotBeforeUpdate() 在更新之前获取快照
28、卸载组件
del = () => {
ReactDOM.unmountComponentAtNode(document.getElementById("root"))
}
29、如何让组件不发生无效的重新渲染
- 重写shouldComponentUpdate()方法
比较新旧state或props数据,如果有变化才返回true,如果没有返回false
- 使用PureComponent
PuerComponent重写了shouldComponentupdate(),只有state或props数据有变化才会返回true
【注意】:
只是进行state和props数据的浅比较,如果只是数据对象内部数据变了,返回false
不要直接修改state数据,而是要产生新数据
项目中一般用PureComponent来优化
30、路径改变,样式文件丢失的3种解决办法?
- 直接把’./‘替换为’/’
- %PUBLIC_URL% (相当于public的绝对路径)
- 用hash值,不用history,因为#后边的内容不会带到服务器
31、SPA的理解
- 单页WEB应用
- 整个应用只有一个完整的应用
- 点击页面中的链接不会刷新页面,指挥做局部的更新
- 数据都需要通过ajax请求获取,并在前端异步展现