高级前端一面必会react面试题（持续更新中）

最新推荐文章于 2024-02-01 15:50:48 发布

beifeng11996

最新推荐文章于 2024-02-01 15:50:48 发布

阅读量627

点赞数

文章标签： reactjs

本文链接：https://blog.csdn.net/beifeng11996/article/details/128324318

版权

本文详细探讨了React的核心概念，包括虚拟DOM如何提高性能、React Router的使用、数据持久化实践、hooks的父子传值、JSX的作用、useEffect与useLayoutEffect的区别、Store的理解以及React与其他框架的异同。还涵盖了React的性能优化、生命周期方法、Redux的优缺点等，帮助读者深入理解React的工作原理和设计理念。

摘要由CSDN通过智能技术生成

为什么虚拟 dom 会提高性能

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

具体实现步骤如下:

用 JavaScript 对象结构表示 DOM 树的结构;然后用这个树构建一个真正的 DOM 树，插到文档当中;
当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异;
把 2 所记录的差异应用到步骤 1 所构建的真正的 DOM 树上，视图就更新了。

react router

import React from 'react'
import {
    render } from 'react-dom'
import {
    browserHistory, Router, Route, IndexRoute } from 'react-router'

import App from '../components/App'
import Home from '../components/Home'
import About from '../components/About'
import Features from '../components/Features'

render(
  <Router history={
   browserHistory}>  // history 路由
    <Route path='/' component={
   App}>
      <IndexRoute component={
   Home} />
      <Route path='about' component={
   About} />
      <Route path='features' component={
   Features} />
    </Route>
  </Router>,
  document.getElementById('app')
)
render(
  <Router history={
   browserHistory} routes={
   routes} />,
  document.getElementById('app')
)

React Router 提供一个routerWillLeave生命周期钩子，这使得 React组件可以拦截正在发生的跳转，或在离开route前提示用户。routerWillLeave返回值有以下两种：

return false 取消此次跳转
return 返回提示信息，在离开 route 前提示用户进行确认。

React 数据持久化有什么实践吗？

封装数据持久化组件：

let storage={
   
    // 增加
    set(key, value){
   
        localStorage.setItem(key, JSON.stringify(value));
    },
    // 获取
    get(key){
   
        return JSON.parse(localStorage.getItem(key));
    },
    // 删除
    remove(key){
   
        localStorage.removeItem(key);
    }
};
export default Storage;

在React项目中，通过redux存储全局数据时，会有一个问题，如果用户刷新了网页，那么通过redux存储的全局数据就会被全部清空，比如登录信息等。这时就会有全局数据持久化存储的需求。首先想到的就是localStorage，localStorage是没有时间限制的数据存储，可以通过它来实现数据的持久化存储。

但是在已经使用redux来管理和存储全局数据的基础上，再去使用localStorage来读写数据，这样不仅是工作量巨大，还容易出错。那么有没有结合redux来达到持久数据存储功能的框架呢？当然，它就是redux-persist。redux-persist会将redux的store中的数据缓存到浏览器的localStorage中。其使用步骤如下：

（1）首先要安装redux-persist：

npm i redux-persist

（2）对于reducer和action的处理不变，只需修改store的生成代码，修改如下：

import {
   createStore} from 'redux'
import reducers from '../reducers/index'
import {
   persistStore, persistReducer} from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2';
const persistConfig = {
   
    key: 'root',
    storage<