React面试题

qq_66588740

已于 2024-03-17 11:55:10 修改

阅读量954

点赞数 23

文章标签： react.js javascript 前端

于 2024-03-01 14:13:30 首次发布

本文链接：https://blog.csdn.net/qq_66588740/article/details/136351586

版权

1.组件之间如何通信

父子组件使用props。向子组件传递函数和数据

自定义事件

Redux和context

2.JSX的本质是什么

creatElement

执行返回vnode

3.context是什么，如何应用？

父组件向其所有子孙组件传递信息，深层传递参数

如一些简单的公共信息：主题色、语言等。

复杂的公共信息使用redux

4.shouldComponentUpdate用途

性能优化

要配合不可变值一块使用，否则会出错

5.redux数据流

State用于存储状态

Actions是具有type字段的普通JavaScript对象，描述想要修改state的意图。

Reducers是接收当前的state和action作为参数并返回新的state结果的函数。用来修改state,要结合不可变值。可使用combineReducers来组合Reducers。

异步请求：redux-thunk,同步action直接返回一个action对象，异步action则在异步操作之后再返回一个action对象。

Redux和UI的基本集成

view通过store.getState获取state

通过store.dispatch(action) 来修改state

通过store.subscribe(()=> {})来订阅state变化来修改UI

Reduc结合React使用(hooks)

使用useSelector从Store中读取State。 const todos = useSelector(state => state.todos)

useSelector会自动订阅Redux store! 这样，任何时候 dispatch action，它都会立即再次调用对应的 selector 函数。如果 selector 返回的值与上次运行时相比发生了变化，useSelector 将强制组件使用新值重新渲染。我们仅需要在组件中调用一次 useSelector() 即可。

使用useDispatch来Dispatch Action。 const dispatch = useDispatch() dispatch(someAction)

使用Provider透传Store

使用useStore()获取store实例

react-redux(Connect API)

mapStateToProps

mapDispatchToProps

6.React性能优化

渲染列表时使用key

自定义事件、DOM事件及时销毁

合理使用异步组件

减少函数bind this的次数(把bind放到constructor中)

合理使用 SCU PureComponent 和Memo

合理使用immutable.js

webpack层面的优化

前端通用的性能优化，如图片懒加载

使用SSR

7.React和Vue的区别和相同点

都支持组件化

都是数据驱动视图(得益于第三点)致使我们可以实现更负责的应用

都使用vdom操作DOM

React使用JSX拥抱JS，Vue使用模板拥抱html

React函数式编程，Vue声明式编程

React更多需要自力更生，Vue把想要的都给你

React默认组件全部更新，需要自行使用scu进行优化。Vue则只更新对应的组件。

React没有v-for v-if这些指令，有没有Computed Watch这些。

8.函数组件和Class组件的区别

纯函数：输入props,输出JSX

没有实例，没有生命周期，没有state

不能扩展其他方法

9.什么是受控组件，非受控组件

表单的值受state控制

需要自行监听onChange事件更新state

对比非受控组件

10.何时使用异步组件

同vue

加载大组件

路由懒加载 react.lazy() suspense

11.多个组件有公共逻辑，如何抽离

高阶组件 hoc

render props

12.pureComponent有何区别

实现了浅比较的scu,对props和state的数据进行第一层的比较。使用object.is()

性能优化，要结合不可变值

13.React事件和DOM事件的区别

所有事件都挂在到root上

event不是原生的，是syntheticEvent合成事件对象

dispatchEvent

React 16.x及以前的合成事件：

事件委托到document；
部分事件还是会绑定到当前元素；
存在React事件和原生事件的映射关系，比如onMouseLeave会映射成原生的mouseout事件；
事件池机制。

React 17的合成事件：

事件委托到root；
React capture阶段的合成事件提前到原生事件capture阶段执行；
移除事件池机制；
事件有优先级。

为什么使用合成事件

浏览器兼容，统一行为，比如事件对象有统一的属性和方法，又比如，移除不想要的点击事件（Firefox右键点击会生成点击事件），再比如无论注册onMouseLeave还是onMouseOut都会映射成原生的mouseout事件；
多平台适配，ReactNative也能使用；
实现事件委托，避免大量创建事件监听；
事件池机制，避免频繁创建和销毁SyntheticEvent对象，释放过程将SyntheticEvent对象的大部分属性置为null，提升旧浏览器的性能。

14.什么是纯函数

纯函数是指输入相同，输出也必定相同并且没有副作用的函数。不会修改外部状态的值。

重点：不可变值

15.组件生命周期

单个组件生命周期

可以分为3个阶段：挂载阶段、更新阶段、卸载阶段

挂载阶段：

constructor() 构造方法，初始化state,以及为事件处理程序绑定this

componentWillMount(), 已经弃用

render(),根据组件的props和state返回一个React元素，用于描述组件的UI。JSX实际

上就是调用React.creatElement()。注意render()里面不能调用setState()

更新阶段：

组件被挂载到DOM之后，props和state都可以引起组件的更新。props引起的组件更新，

本质上是渲染父组件引起的。state引起的组件更新，则是通过调用this.setState()修改

组件的state来触发的。因此，父组件调用render方法或调用this.setState都会引起组件

的更新。

componentWillReceiveProps()

shouldComponentUpdate()

componentWillUpdate()

render()

componentDidUpdate()

卸载阶段：

componentWillUnmount()

父子组件生命周期关系

16.React发起ajax应该在哪个生命周期

同vue ,DisdMount。 dom已经渲染完执行应用更加流畅

17.渲染列表，为什么使用key

diff算法中通过tag和key来判断，是否是sameNode。有些时候只需要移动DOM的顺序即可，而不是更新每个元素，减少渲染次数，提高渲染性能。

Vue默认按照“就地更新”的策略。默认模式是高效的。但只适用于列表渲染输出的结果不依赖子组件状态或者临时DOM状态（例如表单输入值）的情况

18.setState什么时候是异步，什么时候是同步

class组件中

setState在不同情况下可以表现为异步或同步

1.在promise的状态更新、js原生事件、setTimeout、setInterval中是同步的。

2.在react的合成事件中，是异步的。

原因：

在React的setState函数实现中，会根据一个变量isBatchingUpdates判断是直接更新this.state还是放到队列中回头再说，
而isBatchingUpdates默认是false，也就表示setState会同步更新this.state，
但是，有一个函数batchedUpdates，这个函数会把isBatchingUpdates修改为true，
而当React在调用事件处理函数之前就会调用这个batchedUpdates，造成的后果，就是由React控制的事件处理过程setState不会同步更新this.state。

hooks

setState都会表现为异步（即批处理）。

react会等到事件处理函数中的所有代码都运行完毕再处理state更新。这种特性就是批处理。

这让你可以更新多个 state 变量——甚至来自多个组件的 state 变量——而不会触发太多的重新渲染。

19.react的diff算法

20.react组件更新的过程

setState(newState) --> dirtyComponents(可能会有子组件)

更新的两个阶段

reconciliation阶段-执行diff算法，纯js计算

commit阶段-将diff结果渲染DOM

可能有性能问题

JS是单线程，且和DOM渲染共用一个线程