什么是React

React相关
fetch VS ajax VS axios

传统 Ajax 指的是 XMLHttpRequest（XHR）， 最早出现的发送后端请求技术，隶属于原始js中，核心使用XMLHttpRequest对象，多个请求之间如果有先后关系的话，就会出现回调地狱。JQuery ajax 是对原生XHR的封装

axios 是一个基于Promise ，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，

fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。

React事件处理---修改this指向

方式1：通过bind方法进行原地绑定，从而改变this指向

方式2：通过创建箭头函数

方式3：在constructor中提前对事件进行绑定

方式4：将事件调用的写法改为箭头函数的形式

请简述你对react的理解

React起源于facebook，react是一个用于构建用户界面的js库

特点：

声明式设计：react采用范式声明，开发者只需要声明显示内容，react就会自动完成

高效： react通过对dom的模拟（也就是虚拟dom），最大限度的减少与dom的交互

灵活： react可以和已知的库或者框架很好配合

组件： 通过react构建组件，让代码更容易复用，能够很好应用在大型项目开发中，把页面功能拆分成小模块  每个小模块就是组件

单向数据流：  react是单向数据流，数据通过props从父节点传递到子节点，如果父级的某个props改变了，react会重新渲染所有的子节点

react组件之间的数据传递

正向传值用props

逆向传值用函数传值 通过事件调用函数传递

同级传值用pubsub-js

用pubsub.publish（事件名，数据）抛出数据

用pubsub.subscribe（监听的事件，（）=）{}）接收数据

跨组件传递  用context  要使用context进行跨组件传值就需要使用createContext()方法，这个方法有两个对象  provider  生产者   Consumer 消费者

Vue与react区别

相同点：

都支持服务器渲染
都有虚拟dom，组件化开发，通过props参数进行父子组件数据的传递，都实现webcomponent规范
都是数据驱动视图
都有状态管理，react有redux，vue有vuex
都有支持native’的方案 react有react native  vue有weex
不同点：

react严格上只针对mvc的view层，vue是mvvm模式
虚拟dom不一样，vue会跟踪每一个组件的依赖关系，不需要重新渲染整个dom组件树，而react不同，当应用的状态被改变时，全部组件都会重新渲染，所以react中用shouldcomponentupdate这个生命周期的钩子函数来控制
组件写法不一样 ，react是jsx和inline style ，就是把html和css全写进js中，vue则是html，css ，js在同一个文件
数据绑定不一样，vue实现了数据双向绑定，react数据流动是单向的
在react中，state对象需要用setstate方法更新状态，在vue中，state对象不是必须的，数据由data属性在vue对象中管理
请简述虚拟dom与diff算法

虚拟DOM也就是常说的虚拟节点，它是通过js的object对象模拟DOM中的节点，然后再通过特定的渲染方法将其渲染成真实的DOM节点。

频繁的操作DOM，或大量造成页面的重绘和回流

Diff算法：把树形结构按照层级分解，只比较同级元素，给列表结构的每个单元添加唯一的key值，方便比较

你对组件的理解

可组合，可复用，可维护，可测试

调用 setState 之后发生了什么？

React在调用setstate后，react会将传入的参数对象和组件当前的状态合并，触发调和过程，

在调和过程中，react会根据新的状态构建react元素树重新渲染整个UI界面，在得到元素树之后，react会自动计算新老节点的差异，根据差异对界面进行最小化重新渲染

react 生命周期函数
componentWillMount  组件渲染之前调用

componentDidMount  在第一次渲染之后调用

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

shouldComponentUpdate  判断组件是否更新html

componentWillupdate  组件即将更新html时调用

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

componentWillUnmount  在组件移除之前调用

******为什么虚拟 dom 会提高性能?(必考)
虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存，利用 dom diff 算法避免了没有必要的 dom 操作，从而提高性能

(组件的)状态(state)和属性(props)之间有何不同
State与props区别

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

State 一个组件的显示形态可以由数据状态和外部参数决定，外部参数是props，数据状态就是state，首先，在组件初始化的时候，用this.state给组件设定一个初始的state，在第一次渲染的时候就会用这个数据来渲染组件，state不同于props一点时，state可以修改，通过this.setState()方法来修改state

shouldComponentUpdate 是做什么的
这个react生命周期钩子函数是来解决这个问题：

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

解决办法：

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

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

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

react diff 原理
它是基于三个策略：

tree diff  web UI中dom节点跨层级的移动操作特别少，可以忽略不计
component diff 拥有相同类的两个组件将会生成相似的树形结构，拥有不同类的两个组件会生成不同的树形结构
element diff 对于同一层级的一组子节点，他们可以通过唯一的id进行区分
何为受控组件
React负责渲染表单的组件，值是来自于state控制的，输入表单元素称为受控组件

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

React 中构建组件的方式
自定义组件：函数组件或者无状态组件  组件首字母大写