React面试题

前端

1. 什么是React？

React是用于构建用户界面的JavaScript库 ， 起源于Facebook的内部项目，该公司对市场上所有 JavaScript MVC框架都不满意，决定自行开发一套，用于架设自己的网站 ，React 不是一个 MVC 框架，仅仅是视图（V）层的库

2. 为什么虚拟 dom 会提高性能?

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

用Js对象表示真实的DOM结构，当状态变化的时候在重新创建一个虚拟DOM树结构，然后用新的树和旧的树进行比较，记录两棵树差异，把所记录的差异应用到所构建的真正的 DOM 树上，视图就更新了。

3. 什么是JSX？

jsx是JavaScript的一种语法扩展，它跟模板语言很接近，但是它充分具备JavaScript的能力

JSX就是用来声明React当中的元素，React使用JSX来描述用户界面

JSX语法糖允许前端开发者使用我们最熟悉的类HTML标签语法来创建虚拟DOM在降低学习成本

4. React创建元素的方法？

React.createElement()

5. class组件和函数组件区别

语法上：

函数式组件是一个纯函数，它是需要接受props参数并且返回一个React元素就可以了。类组件是需要继承React.Component的，而且class组件需要创建render并且返回React元素，语法上来讲更复杂。

状态管理：

函数式组件没有状态管理，类组件有状态管理。

调用方式：

函数式组件可以直接调用，返回一个新的React元素；类组件在调用时是需要创建一个实例的，然后通过调用实例里的render方法来返回一个React元素。

6. React 事件绑定的方式

React 事件绑定属性的命名采用驼峰式写法， 采用 JSX 的语法传入一个函数作为事件处理函数

事件绑定函数的方式

1. 直接写函数名字{callback}，

2. 可以使用bind方法绑定调用 {callback.bind(this)}

7. 事件处理方法this指向改变

当我们把事件函数写成普通函数的形式时 , 调用函数使用state变量会报错，提示state变量不存在，

是因为

• 事件处理程序的函数式函数调用模式，在严格模式下，this指向undefined

• render函数是被组件实例调用的，因此render函数中的this指向当前组件

解决方法： 1. 把普通函数改成箭头函数 2. 调用函数的时候使用bind方法改变this指向

8. React事件处理方法传值

1. 调用的时候定义一个箭头函数 函数中调用方法传递参数据

   <button onClick={()=> this.del(index) }>
       点击
   </button>
   

   2. 第二种方法 bind方法传递参数

      <button onClick={this.del.bind(this,index) }>
          点击
      </button>
      

9 React如何获取表单数据

1. 给文本框绑定value属性，value属性绑定state中定义的变量
2. 给表单绑定onChange事件，调用定义的方法
3. 在方法中我们获取e.target.value属性，赋给value属性绑定的变量

10. React条件渲染方法有哪些

1. if-else的条件渲染方法
2. 三元运算符进行条件渲染，可以缩短代码量
3. switch的多条件渲染效果
4. HOC条件渲染

11. React怎么实现列表渲染

react中可以使用map方法渲染列表，return对应的页面结构即可， React 在渲染列表时，会要求开发者为每一个列表元素指定唯一的 key ，我们尽量不要使用index索引值作为key，如果对数据进行：逆序添加、逆序删除等破坏顺序操作：可能会引起页面更新错误问题。

12. React中key的作用是什么?

key是虚拟DOM对象的唯一标识，在更新显示时key起到极其重要的作用 ，简单的来说就是为了提高diff的同级比较的效率，避免原地复用带来的副作用

react采用的是自顶而下的更新策略，每次小的改动都会生成一个全新的的vdom，从而进行diff，如果不写key，就会发生本来应该更新却没有更新

13. React组件样式的定义方式

1. 外联样式

   定义css文件，在组件中通过import导入css样式，

   import "App.css"

2. 内联样式

   React推崇的是内联的方式定义样式。这样做的目的就在于让你的组件更加的容易复用

   定义一个style属性，属性中定义对应的css样式即可，比如style={{fontSize:'15px'}}

   外层花括号是语法，内层花括号是对象边界符

14. Props校验数据类型

array（数组）、bool（布尔值）、func（函数number（数字）、object（对象）、string（字符串）

15.受控组件和非受控组件

受控组件
由React控制的输入表单元素而改变其值的方式，称为受控组件。
比如，给表单元素input绑定一个onChange事件，当input状态发生变化时就会触发onChange事件，从而更新组件的state。
非受控组件
非受控组件指的是，表单数据由DOM本身处理。即不受setState()的控制，与传统的HTML表单输入相似，input输入值即显示最新值。
在非受控组件中，可以使用一个ref来从DOM获得表单值。

16. props和state的区别

props是指组件间传递的一种方式，props自然也可以传递state。由于React的数据流是自上而下的，所以是从父组件向子组件进行传递；另外组件内部的this.props属性是只读的不可修改！

state是组件内部的状态（数据），不能够直接修改，必须要通过setState来改变值的状态，从而达到更新组件内部数据的作用。

17.组件传值的方式？

父传子组件通信， 子传父组件通信 兄弟组件通信

18.父传子通信流程

1. 在父组件中的子组件标签上绑定自定义属性，挂载传递的数据
2. 子组件中props接受传递的数据，直接使用即可

19. 子传父通信的流程

1. 父组件中子组件标签上绑定一个属性，传递一个方法给子组件
2. 子组件中通过props接受这个方法，直接调用，传递相应的参数即可

20.非父子组件通信

1. 状态提升(中间人模式)
   React中的状态提升概括来说,就是将多个组件需要共享的状态提升到它们最近的父组件,在父组件上改变这个状态然后通过props分发给子组件
2. context状态树传参

21.context状态树是怎么运行的?

1. 在父组件中我们通过createContext() 创建一个空对象，在父组件的最外层我们使用Provider包裹数据，通过value绑定要传递的对象数据。
2. 在嵌套的子组件中，我们有两种方式获取数据:
   (1) 我们可以使用Customer标签，在标签中绑定一个箭头函数，函数的形参context就是value传递的数据
   (2). class组件中我们可以定义static contextType=context对象，组件中直接使用this.context获取数据。

22.React生命周期分为几个阶段?

Mounting(挂载阶段)：已插入真实 DOM
Updating(更新阶段)：正在被重新渲染
Unmounting(卸载阶段)：已移出真实 DOM

23. 简述React的生命周期函数?

挂载阶段:

• constructor() 在 React 组件挂载之前，会调用它的构造函数。
• componentWillMount: 在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。
• componentDidMount(): 在组件挂载后（插入 DOM 树中）立即调用

更新运行阶段:

• componentWillReceiveProps: 在接受父组件改变后的props需要重新渲染组件时用到的比较多，外部组件传递频繁的时候会导致效率比较低
• shouldComponentUpdate():用于控制组件重新渲染的生命周期，state发生变化，组件会进入重新渲染的流程，在这里return false可以阻止组件的更新
• render(): render() 方法是 class 组件中唯一必须实现的方法。
• componentWillUpdate()*: shouldComponentUpdate返回true以后，组件进入重新渲染完成之前进入这个函数。
• componentDidUpdate(): 每次state改变并重新渲染页面后都会进入这个生命周期
  卸载或销毁阶段
  componentWillUnmount ()： 在此处完成组件的卸载和数据的销毁。

24. React旧生命周期有哪些问题？

(1) componentWillMount ,在ssr中 这个方法将会被多次调用， 所以会重复触发多遍，同时在这里如果绑定事件，
将无法解绑，导致内存泄漏 ， 变得不够安全高效逐步废弃。
(2) componentWillReceiveProps 外部组件多次频繁更新传入多次不同的 props，会导致不必要的异步请求
(3) componetWillupdate, 更新前记录 DOM 状态, 可能会做一些处理，与componentDidUpdate相隔时间如果过长， 会导致 状态不太信

25. React新生命周期有哪些改变？

1. 用 getDerivedStateFromProps替换了 compoentWillMount和compontWillReceiveProps生命周期函数
2. 用getSnapshotBeforeUpdate函数替换componetWillUpdate方法，避免和CompoentDidUpdate函数中获取数据不一致的问题

26. react的路由几种模式，是什么？

两种路由模式:
一种是Hash路由模式，用的是HashRouter组件
一种是历史路由模式，用的是BrowserRouter组件绑定

27. react路由常用的组件有哪些？

HashRouter或BrowserRouter配置路由模式
Route 定义路由组件映射关系
Redirect 设置路由重定向
NavLink 或者Link 页面路由跳转
Switch 路由匹配，当path匹配到一个component之后，将不会再想下继续匹配，提高了程序效率

28. react路由传参的方式有哪些？

//隐士参数传递
(1) this.props.history.push({ pathname : '/user' ,query : {id:100}})
this.props.location.query.id 获取query传递的参数据，刷新数据不在
(2) this.props.history.push({ pathname:'/user',state:{id: 1000 } }) this.props.location.state.id 获取state的数据,刷新数据还在

3. url传参方式 (<Link to="/user?id=100"></Link>) history.location.search获取数据比较麻烦，得自己解析
4. 动态路由定义 /detail/:id => /detail/100 => location.match.params中接受的参数是 {id:100}

29. react路由跳转的方式有哪些?

声明式导航:
使用NavLink或者Link跳转， to属性后面跟字符串或者跟对象
编程式导航跳转:
props.history.push(url) 跳转页面可以返回上一页，保留历史记录
props.history.replace(url) 跳转页面，清空历史记录
props.history.go(num) 返回第几个页面

30. react路由嵌套如何配置？

1. 配置父组件的路由地址，在父组件中配置子组件的路由映射关系
2. 关闭父组件路由配置exact属性，避免精准匹配
3. 父组件路由地址作为子组件路由地址的开始的一部分。比如父组件是/index 子组件应该是/index/子组件地址

31. withRouter是干什么的？

不是所有组件都直接与路由相连（比如拆分的子组件）的，当这些组件需要路由参数时，使用withRouter就可以给此组件传入路由参数，将react-router的history、location、match三个对象传入props对象上，此时就可以使用this.props.history跳转页面了或者接受参数了

32. 什么是Redux?

在react中每个组件的state是由自身进行管理，包括组件定义自身的state、组件之间的通信通过props传递、使用Context实现数据共享等，如果让每个组件都存储自身相关的状态，理论上来讲不会影响应用的运行，但在开发及后期我们将比较难以维护，所以我们可以把数据进行集中式的管理，redux就是一个实现上述集中管理的容器的工具，redux并不是只应用在react中，还与其他界面库一起使用，如Vue

33. Redux的三大原则

• state数据必须是单一数据源
• redux中的state数据必须 是只读的，只能通过dispatch调用actions修改
• Reducer必须使用纯函数来执行修改

34. redux的执行原理

React的组件需要获取或者修改页面的数据，通过dispatch方法调用actions进入到Reducer函数中修改state的数据内容，state更新后，通知组件更新页面即可。

35. redux的使用步骤

1. 创建一个store文件夹，新建一个index.js文件
2. 文件中导入redux的createStore方法，用于创建公共数据区域
3. 创建一个reducer纯函数，接受两个参数state，actions分别表示分别表示数据和操作state的方法，返回state数据给组件页面
4. 把reducer作为createStore的参数抛出
5. 在需要使用的页面导入store文件，通过store.getState获取数据，通过store.dispatch触发action修改state数据
6. store.subscrible 方法监听 store 的改变，避免数据不更新

36. state和props有什么区别

相同点：
两者都是 JavaScript 对象
两者都是用于保存信息
props 和 state 都能触发渲染更新
区别：
props 是外部传递给组件的，而 state 是在组件内被组件自己管理的，一般在 constructor 中初始化
props 在组件内部是不可修改的，但 state 在组件内部可以进行修改
state 是多变的、可以修改

37. super() 和super(props)有什么区别?

在 React 中，类组件基于 ES6，所以在 constructor 中必须使用 super
在调用 super 过程，无论是否传入 props，React 内部都会将 porps 赋值给组件实例 porps 属性中
如果只调用了 super()，那么 this.props 在 super() 和构造函数结束之间仍是 undefined

38. 说说 React中的setState执行机制

一个组件的显示形态可以由数据状态和外部参数所决定，而数据状态就是state, 当需要修改里面的值的状态需要通过调用setState来改变，从而达到更新组件内部数据的作用
setState第一个参数可以是一个对象，或者是一个函数，而第二个参数是一个回调函数，用于可以实时的获取到更新之后的数据
在使用setState更新数据的时候，setState的更新类型分成：同步更新，异步更新
在组件生命周期或React合成事件中，setState是异步
在setTimeout或者原生dom事件中，setState是同步
对同一个值进行多次 setState， setState 的批量更新策略会对其进行覆盖，取最后一次的执行结果

39. React的事件机制总结

React事件机制总结如下：

• React 上注册的事件最终会绑定在document这个 DOM 上，而不是 React 组件对应的 DOM(减少内存开销就是因为所有的事件都绑定在 document 上，其他节点没有绑定事件)
• React 自身实现了一套事件冒泡机制，所以这也就是为什么我们 event.stopPropagation()无效的原因。
• React 通过队列的形式，从触发的组件向父组件回溯，然后调用他们 JSX 中定义的 callback
• React 有一套自己的合成事件 SyntheticEvent

40. 说说对React refs 的理解？应用场景？

创建ref的形式有三种：

• 传入字符串，使用时通过 this.refs.传入的字符串的格式获取对应的元素
• 传入对象，对象是通过 React.createRef() 方式创建出来，使用时获取到创建的对象中存在 current 属性就是对应的元素
• 传入hook，hook是通过 useRef() 方式创建，使用时通过生成hook对象的 current 属性就是对应的元素

在某些情况下，我们会通过使用refs来更新组件，但这种方式并不推荐，更多情况我们是通过props与state的方式进行去重新渲染子元素

但下面的场景使用refs非常有用：

• 对Dom元素的焦点控制、内容选择、控制
• 对Dom元素的内容设置及媒体播放
• 对Dom元素的操作和对组件实例的操作
• 集成第三方 DOM 库

41. 说说对高阶组件的理解？应用场景?

高阶函数（Higher-order function），至少满足下列一个条件的函数
接受一个或多个函数作为输入,输出一个函数
在React中，高阶组件即接受一个或多个组件作为参数并且返回一个组件，本质也就是一个函数，并不是一个组件
高阶组件的主要功能是封装并分离组件的通用逻辑，让通用逻辑在组件间更好地被复用
高阶组件可以传递所有的props，但是不能传递ref
高阶组件能够提高代码的复用性和灵活性，在实际应用中，常常用于与核心业务无关但又在多个模块使用的功能，如权限控制、日志记录、数据校验、异常处理、统计上报等

42. 说说对Redux中间件的理解？常用的中间件有哪些？

Redux中，中间件就是放在就是在dispatch过程，在分发action进行拦截处理
前面我们了解到了Redux整个工作流程，当action发出之后，reducer立即算出state，整个过程是一个同步的操作
那么如果需要支持异步操作，或者支持错误处理、日志监控，这个过程就可以用上中间件，其本质上一个函数，对store.dispatch方法进行了改造，在发出 Action和执行 Reducer这两步之间，添加了其他功能

常用的redux中间件，如：
redux-thunk：用于异步操作
redux-logger：用于日志记录

中间件都需要通过applyMiddlewares进行注册，作用是将所有的中间件组成一个数组，依次执行然后作为第二个参数传入到createStore中

const store = createStore(
  reducer,
  applyMiddleware(thunk, logger)
);

React中常见的Hooks方法有哪些？

useMemo, useCallback做了那些性能优化？

A组件是B组件的父组件，那么A组件加载完成，请详细叙述A，B组件执行流程