React核心面试题（高频面试题）这一篇就够了

1. React框架的特点有哪些？

1. 虚拟dom
2. 组件化开发
3. jsx声明式代码
4. 单向数据流

1. React中虚拟dom的作用是什么？

1. 每次数据模型变化的时候，虚拟DOM树都会重新构建
2. React依赖某个算法(称之为diff算法)来与之前的虚拟DOM树进行比较，只有在新旧dom树不同的情况下才重新进行计算
3. 所有的变化都要经过批处理，完成之后，真实的DOM树才进行更新，这样就提升了DOM更新的效率

1. React的fiber算法用来解决什么问题？工作原理是什么？

JavaScript引擎和页面渲染引擎两个线程是互斥的，当其中一个线程执行时，另一个线程只能挂起等待，如果JavaScript线程长时间占用了主线程，那么渲染层面的更新就不得不长时间等待，界面长时间不更新，会导致页面响应度变差，用户可能会感觉到卡顿

工作原理：React Fiber的原理其实很简单---分片，把一个耗时长的任务分成很多小片，每一个小片的运行时间很短，虽然总时间依然很长，但是在每个小片执行完之后，都给其他的任务一个执行的机会，这样唯一的线程就不会被独占，其他任务依然有运行的机会

1. React创建组件的方式有哪些？

1.函数式定义的无状态组件

2.es6形式的class组件

3.es5原生方式React.creatClass定义的组件

1. 描述一下React中的jsx语法？

React定义的一种类似XML的JavaScript语法扩展，他的典型特征是标签和js混着写

它的优点有：

1. JSX执行更快，因为它在编译为JavaScript代码后进行了优化
2. 它是类型安全的，在编译过程中就能发现错误
3. 使用JSX编写模板更加简单快速

1. 描述一下React中组件通信的方式？

1.父组件向子组件通信，父组件在子组件身上通过自定义属性向子组件传值，子组件通过props接收值

2.子组件向父组件通信，父组件在子组件身上通过自定义属性将一个函数传递给子组件，子组件回调该函数并传值

3.非起嵌套组件间通信，实例化一个events对象，其中一个组件监听事件，另一个组件触发事件并传值

4.跨级组件之间通信，借助Context，外层组件用Provider传值给内层组件，内层组件用context接收值

1. React组件生命周期函数有哪些？分别有什么作用？

constructor

getDefaultProps

getInitialState

componentWillMount

componentDidMount,在这里发起网络请求，创建定时器，添加事件监听

componentWillReceiveProps

shouldComponentUpdate,用于组件性能优化

componentWillUpdate

render,组件更新的核心方法

componentWillUpdate

componentWillUnMount,在这里取消网络请求，销毁定时器，移除事件监听

1. React父组件中如何调用子组件的函数？

方式1：通过ref获取到子组件实例，通过子组件实例调用子组件的方法

方式2：通过属性传递函数到子组件，子组件回调该函数将子组件的实例以参数的形式传给父组件并保存在父组件中，父组件拿到子组件的实例调用子组件的方法

1. 什么是高阶函数？它有哪些应用？

高阶函数：本质是一个函数，它的参数是函数 或返回值是一个函数

应用：函数柯里化，函数节流，函数防抖，分时函数，AOP(面向切面编程)

1. 你怎么理解React中的高阶组件？

高阶组件：本质是一个函数，它的参数是组件，返回值是一个组件

高阶组件最大的特点就是重用组件逻辑。它并不是由React API定义出来的功能，而是由React的组合特性衍生出来的一种设计模式，例如：react-router-dom中的withRouter，react-redux中的connect就是高阶组件

1. React跳路由的方式有哪些？

1. Link或者NavLink
2. js事件中跳路由，this.props.history.push({pathname:’路由地址’})

1. React中的Link和NavLink的区别是什么？

Link和NavLink默认渲染为a标签

是的一个特定版本，会在匹配上当前的url的时候给已经渲染的元素添加参数，借助该特性可以实现导航按钮高亮，而Link不会

1. React中跳路由传参的集中方式是什么？区别是什么？

1. 动态路由传参，地址栏显示参数
2. query传参，地址栏不显示参数，刷新页面，参数丢失
3. state传参，地址栏不显示参数，刷新页面，参数不丢失

1. React-Router渲染组件的三种方式是什么？有什么区别？

component,支持react元素和回调函数两种写法

render,只支持回调函数的写法

children,只支持回调函数的写法

1. Redux的作用是什么？

集中管理应用程序的状态

react组件间通信

1. 描述一下redux的数据流/工作流？

1.调用store.dispatch(action)

2.store调用reducer函数

3.根reducer把多个子reducer输出合并成一个单一的state树

4.store保存根reducer返回的完整state树

1. Redux的三大原则是什么？

1.单一数据源，整个应用的state被存储在唯一一个store中

2.State是只读的，唯一改变state的方法就是触发action

3.使用纯函数来修改state，为了描述action如何改变state，你需要编写reducer

1. React-redux的作用是什么？

1.react-redux将redux的dispath和state映射到react组件的props中，将react组件与redux真正连接起来，实现组件间的通信

2.降低了react组件和redux仓库的耦合性

3.当store中的数据改变时，使用到该数据的多个组件会立即更新，确保组件状态的统一

1. React的状态管理中间件有哪些？

redux-logger

redux-thunk

redux-saga

redux-promise

1. 手写一个Redux状态管理中间件？

({ getState,dispatch }) =>next ==>action

1. React函数式组件和类组件的区别？

1.函数式组件一般用于比较简单的组件定义，类组件用于复杂的组件定义

2.函数组件是一个纯函数，它接收一个props对象返回一个react元素；而类组件需要去继承React.Component并且创建render函数返回react元素

3.函数组件中的this是undefined，类组件中的this指向的是当前组件的实例对象

4.函数组件没有生命周期和状态state，而类组件有

5.函数组件ReactDOM.render的过程：随后调用该函数，将赶回的虚拟DOM转为真实DOM，随后呈现在页面中，类组件中ReactDOM.render的过程：new出该组件的实例，并通过该实例调用原型上的render方法，将render返回的虚拟DOM转为真实的DOM，随意偶呈现在页面中

1. 写出React中所有的Hooks和它的作用？

useState，给函数式组件引入状态

useEffect,给函数式组件引入生命周期

useContext,实现多层嵌套组件传值

useReducer,实现类似redux的状态管理，可以看作是mini版的redux

useMemo,用于性能优化，会执行第一个函数并将执行结果返回，该结果会被缓存

useCallback,用于性能优化，不会执行第一个参数参数，而是将它返回

useRef,类似createDef，用来生成DOM对象

1. React中如何封装前端路由？

1. 抽离并封装路由表routerConfig.js 统一管理应用程序的路由
2. 封装路由组件RouterView.js负责路由的过滤和渲染

1. antd组件库的表格组件都有哪些属性，他们的作用是什么？

columns,表格列

cataSource，表格数据源

pagination,表格分页

loading,表格loading状态

1. store的核心api有哪些？分别有什么用？

1. store.getState(),在组件中获取state
2. Store.dispatch(),在组件中触发action
3. Store.subscribe(),在组件中监听store的改变