React 经典面试题

React 经典面试题

React 17.0 为什么要废除三个生命周期。

getDerivedStateFromProps
以前我们会使用componentWillReceiveProps来做判断，如果前后props不相等，然后就setState等等。这个生命周期的出现更加简单，我们可以直接很方便的实现这中场景，getDerivedStsteFromProps方法是一个static方法，属于React.component类的方法，所以方法内是无法使用 this 的，这就意味着无法使用 this.setState 来更新 state，所以这个方法直接通过返回对象的形式来更新 state，如果某些 props 的情况不需要更新 state，那么就返回 null 就好。
getSnapshotBeforeUpdata
另外一个方法，首先它不是一个静态方法，从名字来看是在更新之前获取组件的快照。就是这样，这个方法会在组件更新前出发，它的返回值会作为第三个参数传递给后面的 componentDidUpdate 参数中，和 componentDidUpdate 一起使用，能覆盖掉 componentWillUpdate 的所有使用场景了

component和 purecomponent的区别

purecomponent通过props和state的浅比较来实现shoucomponentUpdata，如果prop和state变化比较频繁的情下purecomponent的效率不如component，因为浅比较也需要时间，所以purecomponent用于展示组件

Antdesign Form表单

3.X是通过this.form这个高阶组件定义的 然后在通过validateFields获取input的value。
4.X是不在有高级组件create.From，而是直接通过onFinish这个回调事件获取input的value。

diff算法的原理及作用

作用：计算出虚拟dom需要改变的的部分，对其改变，不用 重新渲染整个页面。
原理：经过调和，基于diff的三个策略，
tree diff 策略，层级控制
是对同层级节点进行比较，如果节点不存在，则该节点及其子节点会被完全删除，不会进行比较。如果是跨层级操作，只用创建和删除节点。
component diff
同一类型的两个组件，按原策略比较虚拟dom即可。
不同类型的两个组件，将替换整个组件的所有节点。
Element diff
当节点处于同一层级，提供了三种操作 删除 插入 和移动。需要添加一个(唯一的key值)
举key值列子：当我们写了一组数据名叫data，我们通过map方法遍历在页面中，然后在componentDidMount中写了一个3秒的延时器，去修改data，用一个新的data结构数据和旧data一样，只是改变其中第一组中的value，此时就发现3秒过后只有第一个数据发生了改变 第二组并没有重新渲染，这就保证了按需加载的diff原理。

Diff不足之处 其中在移动的时候，是通过比较旧的index与 此时lastIndex，当index<lastindex才会移动，当然Element diff移动的时候有一个不足之处，举一个简单例子，当有一组新的集合abcd 此时我想要把d的位置移动到a的前面 理想只用移动d，但是此时旧的d 的index是最大，从而abc都要去移动。
因此，在开发过程中，尽量减少类似将最后一个节点移动到列表首部的操作，当节点数量过大或更新操作过于频繁时，会影响React的渲染性能。

react组件懒加载

1、webpack + es6 的 import ( this.props.children 为回调函数 );
2、webpack + es6 的 import 纯粹的高阶组价
3、webpack + es6 的 import +async（高阶函数）
4、webpack + require.ensure (高阶组件)

为什么react的组件要super(props)

调用super的原因：在ES6中，在子类的constructor中必须先调用super才能引用this
super(props)的目的：在constructor中可以使用this.props

手动触发render

Setstate(） this.forceUpdate()
render在shouldcompentUpdata之后执行的

react的虚拟Dom。

缺点：首次加载比较慢
react的虚拟dom其实就是js的对象，模拟DOM中的真实节点对象，再通过特定的render方法将其渲染成真实的DOM节点。
同时也是react的一大亮点，正是有了虚拟dom的存在大大提高了页面的性能，

hook钩子函数

Hook 本质就是 JavaScript 函数 linter 插件来强制执行这些规则
Userstate 类组件的this.state 定义数据 下标0
useEffect 相当于三个生命周期 componentdidmount componentdidUpdata componentwillunmount 捕获到props和状态 第二参数[]是依赖项参数如果没有将会无限循环和重复

useReducer

集中式的处理复杂的state管理
useReducer 在复杂的状态管理场景下比 useState 更好维护。
第一个参数是一个reducer 第二个参数是一个初始值
useConexet 上下文 组件之间共享状态 TestContext.Provider

useMemo 相当于showcomponentUpdata 是为了优化性能、按需更新
useRef 获取非受控组件的dom .current 属性
Usehistory 路由跳转
usecallback执行后回调函数

React-router 的原理

依赖history
实现URL与UI界面的同步。其中在react-router中，URL对应Location对象，而UI是由react components来决定的，这样就转变成location与components之间的同步问题。

react和vue的区别

react与vue的最大不同就是模板的编写
react ----大型项目
优化需要手动去做，状态可控
vue ------中小型项目
状态改变需要watch监听，数据量太大的话会卡顿
设计思想：react单项数据流 vue双向数据绑定
Redux 使用的是不可变数据，而Vuex的数据是可变的。Redux每次都是用新的state替换旧的state，而Vuex是直接修改，相对来说比较灵活一些。

redux中间件

saga底层原理时generator函数封装的
saga处理异步请求，获取数据库数据，在通过Yield put 派发

redux数据流通的过程 全局状态管理器

rudux中有三个核心概念:store reducer action
redux三大原则：1唯一的数据源 2 保持只读的状态 3数据改变只能通过纯函数来执行
通过store来存储应用状态，而且内置了方法来存取状态(store.getState),reducer根据action传入不同的值和type类型对原始状态进行处理返回一个新的状态，在通过store.dispatch派发不同的action，reducer处理后在返回新状态，这也就是所为的单项数据流。
Subscribe 去监听getState的变化

redux mobx 区别

它们都有统一维护管理应用状态的能力
设计思想不同：
Redux 更多的是遵循函数式编程思想
Mobx 设计更多偏向于面向对象编程和响应式编程，
对store管理不同
Redux将所有共享的数据集中在一个大的store中，统一管理
Mobx是按模块将状态划分出多个独立的store进行管理

react高阶组件知道吗？HOC

高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。
高阶组件就是接收一个组件返回一个新的组件
Connect是一个返回高阶组件的高阶函数第一个参数是 mapStateToProps第二个参数是 mapDispatchToProps

Ant design 中的from表单中的this.from也是一个高级组件
通过validateFields获取表单的value值；

react受控组件与非受控组件的区别？

由React控制的输入表单元素称为“受控组件”
受控组件可以设置value值 由state控制 可读可写
非受控组件 是通过ref获取 一般用于不需要改变组件的value值的时候可以用。

Umi是什么？

umi是以路由为基础，支持配置式路由和约定式路由，集成dva(很多插件)的企业级前端应用框架。
umi的特点：可扩展 开箱即用
dva：redux redux-saga react-Router
umi：react dva

是否封装过组件？

promise+axios接口请求

调用setState之后发生了什么？

调用之后，react会将传入的参数对象与当前的状态合并，从而触发所谓的调和过程，react会自动计算新树与旧树的区别根据差异对界面进行最小化的渲染，这就保证了按需加载，而不是全部重新渲染。

深层组件通信？

Usecontext

为什么建议 setState 的参数是一个回调函数而不是一个对象？

因为 this.props 和 this.state 的更新可能是异步的，不能依赖他们的值去计算下一个 state （一个参数修改state值，第二个参数是一个回调函数）

你有使用过 loadable 组件吗，它能解决什么问题？

它是用于代码分割的高阶组件，使用异步组件解决异步组件的加载速度

Fetch与ajax axios的区别

ajax、axios从浏览器创建Xmlhttprequest 支持promiseapi /async/await
api不同
Fetch 对400、500都会当成成功的请求 只有网络错误这些导致请求不能完成时，fetch 才会被 reject。

Qs插件

接收参数 url？后面的参数