面试 React 框架八股文十问十答第八期

news/2025/2/23 15:28:36

面试 React 框架八股文十问十答第八期

作者:程序员小白条,个人博客

相信看了本文后,对你的面试是有一定帮助的!关注专栏后就能收到持续更新!

⭐点赞⭐收藏⭐不迷路!⭐

1)组件通信的方式有哪些?

在 React 中,组件通信的方式主要有以下几种:

  • 父子组件通信: 通过 props 将数据传递给子组件,子组件通过回调函数或事件来与父组件通信。
  • 子父组件通信: 子组件通过 props 接收回调函数,通过该函数将信息传递给父组件。
  • 兄弟组件通信: 通过将共享的状态提升到它们的共同父组件,并通过 props 传递给各个兄弟组件,或者使用状态管理库(如 Redux)来管理共享状态。
  • 上下文(Context): 使用 React 的上下文 API,允许在组件树中传递数据,而不必手动通过 props 层层传递。
  • 全局状态管理库: 使用像 Redux、MobX 等状态管理库,允许在整个应用程序中共享状态。

2)React-Router 的实现原理是什么?

React-Router 是 React 应用中用于处理导航和路由的库。它的实现原理主要基于 React 的上下文(Context)和组件渲染的特性。React-Router 通过声明式的方式定义路由配置,使用 React 组件来表示不同的页面。

具体实现原理包括:

  • 利用 React 上下文(Context)来传递路由信息,使得路由信息可以在整个组件树中共享。
  • 使用 <Route> 组件来匹配 URL 和组件,决定哪个组件应该渲染。
  • 使用 <Link> 组件提供声明式的导航,它实际上是一个渲染了 <a> 标签的组件。
  • 使用 history 对象来监听 URL 变化,从而实现导航时组件的重新渲染。

3)如何配置 React-Router 实现路由切换

在 React-Router 中,配置路由切换主要通过以下步骤:

  1. 安装 React-Router: 使用 npm 或 yarn 安装 React-Router 相关的包,如 react-router-dom

    npm install react-router-dom
    
  2. 引入 BrowserRouter 或 HashRouter: 在应用的入口文件中引入 BrowserRouterHashRouter,并将整个应用包裹在其中。

    import { BrowserRouter as Router } from 'react-router-dom';
    
    ReactDOM.render(
      <Router>
        <App />
      </Router>,
      document.getElementById('root')
    );
    
  3. 定义路由: 在应用中使用 <Route> 组件定义路由,将路径与对应的组件关联起来。

    import { Route } from 'react-router-dom';
    
    function App() {
      return (
        <div>
          <Route path="/home" component={Home} />
          <Route path="/about" component={About} />
        </div>
      );
    }
    
  4. 使用 Link 进行导航: 使用 <Link> 组件或 useHistory 钩子进行导航。

    import { Link } from 'react-router-dom';
    
    function Navigation() {
      return (
        <div>
          <Link to="/home">Home</Link>
          <Link to="/about">About</Link>
        </div>
      );
    }
    

4)React-Router怎么设置重定向?

在 React-Router 中,可以使用 <Redirect> 组件来进行重定向。下面是一个简单的例子:

import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom';

function App() {
  return (
    <Router>
      <div>
        <Route path="/home" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/old-route">
          {/* 设置重定向 */}
          <Redirect to="/new-route" />
        </Route>
        <Route path="/new-route" component={NewRoute} />
      </div>
    </Router>
  );
}

在上述例子中,如果用户访问 /old-route,将会被重定向到 /new-route

5)react-router 里的 Link 标签和 a 标签的区别

<Link> 组件和 <a> 标签都可以用于导航,但它们之间有一些关键区别:

  • 性能优化: <Link> 组件在点击时会阻止浏览器默认的页面刷新,从而避免了完整的页面重新加载。这可以提高性能,尤其在单页面应用中。相比之下,使用 <a> 标签可能导致整个页面的重新加载。
  • 样式处理: <Link> 组件在当前页面匹配的时候可以方便地添加样式,以突显当前活动的链接,而 <a> 标签则需要通过其他手段来处理当前活动链接的样式。
  • 应用场景: <Link> 组件更适合在 React 单页面应用中使用,而 <a> 标签更适合传统多页面应用。

总体而言,使用 <Link> 组件更符合 React 单页面应用的设计理念,而 <a> 标签更适合传统的多页面应用。

6)React-Router如何获取URL的参数和历史对象?

在 React-Router 中,可以使用 useParams 钩子来获取 URL 中的参数,而历史对象则可以通过 useHistory 钩子来获取。以下是使用这两个钩子的简单示例:

import { useParams, useHistory } from 'react-router-dom';

function MyComponent() {
  // 获取URL参数
  const { id } = useParams();

  // 获取历史对象
  const history = useHistory();

  // 在组件中使用参数和历史对象
  const handleClick = () => {
    // 通过 push 进行导航
    history.push('/new-route');
  };

  return (
    <div>
      <p>URL参数: {id}</p>
      <button onClick={handleClick}>Navigate to New Route</button>
    </div>
  );
}

在上述例子中,useParams 钩子用于获取 URL 中的参数,而 useHistory 钩子用于获取历史对象,可以通过该对象进行导航等操作。

7)React-Router的路由有几种模式?

React-Router 提供了两种主要的路由模式:

  • BrowserRouter: 使用 HTML5 History API,路由通过浏览器的 pushStatereplaceState 方法来实现,可以去除 URL 中的 #

    import { BrowserRouter as Router } from 'react-router-dom';
    
    // ...
    
  • HashRouter: 使用 URL 的哈希部分(即 # 后的部分)来进行路由,不依赖于 History API,适用于不支持 HTML5 History API 的环境。

    import { HashRouter as Router } from 'react-router-dom';
    
    // ...
    

在应用中选择使用哪种模式取决于你的服务器配置和浏览器支持情况。

8)React-Router 4的Switch有什么用?

<Switch> 组件是 React-Router 中的一个容器组件,它用于渲染与当前 URL 匹配的第一个 <Route><Redirect>。当有多个路由规则匹配到相同的路径时,<Switch> 只会渲染第一个匹配到的路由,而忽略后续的匹配项。

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/home" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </Router>
  );
}

在上述例子中,如果 URL 同时匹配 /home/about/contact<Switch> 只会渲染第一个匹配到的 <Route>,而不会同时渲染多个。

9)对 Redux 的理解,主要解决什么问题

Redux 是一个状态管理库,主要用于解决 React 应用中状态管理的复杂性和一致性问题。它的核心概念包括:

  • 单一数据源: 应用的状态被存储在一个单一的 JavaScript 对象中,称为 Store。这种单一数据源的设计使得整个应用的状态变得可预测和可维护。
  • 状态不可变性: 状态的修改通过纯函数(Reducers)进行,不直接修改原始状态,而是返回一个新的状态对象。这样的不可变性有助于跟踪状态的变化,便于调试和性能优化。
  • 通过 Actions 触发状态变化: 状态的变化通过 Actions 触发,Actions 是描述状态变化的纯 JavaScript 对象。Reducers 根据收到的 Action 来更新状态。
  • 中心化的状态管理: Redux 提供了一个中心化的状态管理容器(Store),使得整个应用中任何组件都能方便地访问和修改应用的状态。

主要问题的解决方案包括:

  • 组件通信: 在大型应用中,多个组件之间的状态共享和通信变得复杂。Redux 提供了一个中央存储,使得组件之间可以通过访问相同的状态来进行通信。
  • 状态一致性: 当应用状态分散在多个组件中时,可能导致状态不一致的问题。Redux 强调单一数据源和不可变性,确保状态的一致性。
  • 调试和追踪: Redux 提供了强大的开发者工具,可以轻松地追踪状态变化、查看 Action 日志,并进行时间旅行式的调试。

10)Redux 原理及工作流程

Redux 的工作流程主要包括以下几个步骤:

  1. Action: 应用中的任何状态变化都需要通过 Action 来描述。Action 是一个普通的 JavaScript 对象,其中包含一个 type 属性表示动作的类型,以及其他可能的数据。
  2. Reducer: Reducer 是纯函数,接收当前状态和一个 Action,返回新的状态。Reducers 负责根据 Action 更新应用的状态。Redux 应用中可能有多个 Reducer,每个 Reducer 负责管理状态的一部分。
  3. Store: Store 是整个应用的状态容器。它通过 Redux 的 createStore 函数创建,接收根 Reducer 作为参数。Store 有三个主要功能:维护应用的状态、提供 getState 方法来获取当前状态、提供 dispatch 方法来触发状态变化。
  4. Dispatch: 要触发状态的变化,需要调用 Store 的 dispatch 方法,传入一个 Action。dispatch 方法会将 Action 发送给所有注册的 Reducers。
  5. Middleware(中间件): Middleware 是 Redux 的扩展机制

开源项目地址:https://gitee.com/falle22222n-leaves/vue_-book-manage-system

已 300 + Star!

⭐点赞⭐收藏⭐不迷路!⭐

文章来源:https://blog.csdn.net/qq_67358181/article/details/135584064
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.niftyadmin.cn/n/5329710.html

相关文章

【大数据】Flink 详解(九):SQL 篇 Ⅱ

《Flink 详解》系列&#xff08;已完结&#xff09;&#xff0c;共包含以下 10 10 10 篇文章&#xff1a; 【大数据】Flink 详解&#xff08;一&#xff09;&#xff1a;基础篇【大数据】Flink 详解&#xff08;二&#xff09;&#xff1a;核心篇 Ⅰ【大数据】Flink 详解&…

Gartner发布CPS安全2024年预测:安全形势动荡的四大向量

随着威胁形势、自动化和人工智能采用的步伐以及供应商形势不断快速发展&#xff0c;我们为安全和风险管理领导者提供了四项预测&#xff0c;以规划 2024 年及以后 CPS 安全的未来发展方向。 主要发现 随着人工智能的采用加速增加网络物理系统&#xff08; CPS&#xff09;的“智…

springCloud使用apache的http类和RestTemplate以及Eureka

使用apache的&#xff1a; package com.csgholding.pvgpsp.eqp.util;import com.esotericsoftware.minlog.Log; import org.apache.commons.collections4.MapUtils; import org.apache.http.HttpEntity; import org.apache.http.client.config.RequestConfig; import org.apac…

Java重修第六天—面向对象3

通过学习本篇文章可以掌握如下知识 1、多态&#xff1b; 2、抽象类&#xff1b; 3、接口。 之前已经学过了继承&#xff0c;static等基础知识&#xff0c;这篇文章我们就开始深入了解面向对象多态、抽象类和接口的学习。 多态 多态是在继承/实现情况下的一种现象&#xf…

Elasticsearch_8.11.4_kibana_8.11.4_metricbeat_8.11.4安装及本地部署_ELK日志部署

文章目录 Elasticsearch_8.11.4_kibana_8.11.4_metricbeat_8.11.4安装及本地部署_ELK日志部署分布式引擎Elasticsearch_8.11.4安装及本地部署系统环境要求1 Windows 安装 Elasticsearch下载完成后进行解压,进入 bin 目录,找到elasticsearch.bat脚本文件执行一键启动.启动都选允…

基于springboot时间管理系统源码和论文

在Internet高速发展的今天&#xff0c;我们生活的各个领域都涉及到计算机的应用&#xff0c;其中包括时间管理系统的网络应用&#xff0c;在外国时间管理系统已经是很普遍的方式&#xff0c;不过国内的管理系统可能还处于起步阶段。时间管理系统具有时间管理功能的选择。时间管…

C++ namespace高级用法

高级用法 C++中的命名空间(namespace)是一种用于组织代码的机制,它可以帮助避免命名冲突,并使代码更加清晰和易于维护。以下是C++命名空间的一些高级用法: 嵌套命名空间:命名空间可以嵌套在其他命名空间中,形成一个层次结构。嵌套命名空间可以进一步细化命名空间,使其更…

PyTorch损失函数(二)

损失函数 5、nn.L1Loss nn.L1Loss是一个用于计算输入和目标之间差异的损失函数&#xff0c;它计算输入和目标之间的绝对值差异。 主要参数&#xff1a; reduction&#xff1a;计算模式&#xff0c;可以是none、sum或mean。 none&#xff1a;逐个元素计算损失&#xff0c;返…