面试 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 中，配置路由切换主要通过以下步骤：

安装 React-Router： 使用 npm 或 yarn 安装 React-Router 相关的包，如 react-router-dom。
```
npm install react-router-dom
```

引入 BrowserRouter 或 HashRouter： 在应用的入口文件中引入 BrowserRouter 或 HashRouter，并将整个应用包裹在其中。

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

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById('root')
);

定义路由： 在应用中使用 <Route> 组件定义路由，将路径与对应的组件关联起来。

tsx 复制代码

import { Route } from 'react-router-dom';

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

使用 Link 进行导航： 使用 <Link> 组件或 useHistory 钩子进行导航。

tsx 复制代码

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> 组件来进行重定向。下面是一个简单的例子：

tsx 复制代码

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 钩子来获取。以下是使用这两个钩子的简单示例：

tsx 复制代码

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，路由通过浏览器的 pushState 和 replaceState 方法来实现，可以去除 URL 中的 #。
tsx 复制代码
```
import { BrowserRouter as Router } from 'react-router-dom';

// ...
```
HashRouter： 使用 URL 的哈希部分（即 # 后的部分）来进行路由，不依赖于 History API，适用于不支持 HTML5 History API 的环境。
tsx 复制代码
```
import { HashRouter as Router } from 'react-router-dom';

// ...
```

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

8）React-Router 4的Switch有什么用？

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

tsx 复制代码

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 的工作流程主要包括以下几个步骤：

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

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

已 300 + Star！

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