React Router面试题

React Router是什么？

React Router是一个建立在React之上的强大路由器，可以帮助您快速地向程序添加新的屏幕和流程，并保持URL与页面上显示的内容同步。

React Router和history库的区别是什么？

React Router是history库的一个包装器，它处理与浏览器窗口历史交互的细节，提供了浏览器和哈希历史记录。它还提供了内存历史记录。

组件有哪些？

• 
  上述组件将创建浏览器、哈希和内存历史记录实例。React Router v4 通过路由器对象中的上下文使与您的路由器相关的历史实例的属性和方法可用。

history中的push()和replace()的目的？

如果将历史记录想象为已访问位置的数组，则 push() 方法将向数组中添加一个新位置，而 replace() 方法将用新位置替换数组中的当前位置。

如何通过history.push()传递参数

this.props.history.push({
  pathname: "/template",
  search: "?name=sudheer",
  state: { detail: response.data },
});

如何实现默认导航

{/*首页*/}
<Route path="/" component={Layout}/>
{/*默认实验页面*/}
<Redirect to='/'/>

React国际化

React国际化是一种在React应用程序中实现多语言支持的方法。它可以让您的应用程序在不同的语言环境中显示不同的文本内容，以满足全球用户的需求。使用React国际化，您可以轻松地将应用程序中的文本翻译成多种语言，并根据用户的语言环境自动显示正确的翻译内容。

React国际化通常使用插件或库来实现，例如react-i18next、react-intl等。这些插件提供了一种简单的方式来管理多种语言翻译，并且可以在React组件中轻松地使用。在使用这些插件时，您可以创建一个语言文件，其中包含每种语言的翻译，然后将其与React组件集成。当应用程序需要显示文本时，插件会根据用户的语言环境自动选择正确的翻译内容并将其显示在页面上。

使用React国际化可以帮助您的应用程序更好地适应全球市场，为不同语言环境的用户提供更好的用户体验。

什么是React Intl？

React Intl库使得在React应用程序中进行国际化变得简单，它提供了现成的组件和API，可以处理从字符串、日期、数字到复数形式等所有的格式化操作。React Intl是FormatJS的一部分，它通过其组件和API为React提供了绑定。

使用React Intl，您可以轻松地实现多语言支持，包括文本翻译、格式化日期和数字等操作。它提供了一组预定义的组件，可以直接在您的React应用程序中使用，例如FormattedMessage、FormattedDate、FormattedNumber等。此外，React Intl还提供了一个API，您可以在自己的组件中使用该API来进行更灵活的格式化操作。

React Intl可以帮助您更好地管理多种语言的翻译，并提供一致的国际化方案，使得应用程序更易于维护和扩展。使用React Intl，您可以为全球用户提供更好的用户体验，为您的应用程序带来更多的价值。

React Intl的主要特点？

以下是React Intl的主要特点：

显示带有分隔符的数字。
正确地显示日期和时间。
相对于“现在”显示日期。
处理字符串中的标签复数形式。
支持150多种语言。
可在浏览器和Node中运行。
基于标准构建。
React Intl提供了多种功能，帮助您更好地管理多种语言的翻译，使得应用程序更易于国际化。它可以帮助您正确地显示数字、日期和时间，以及处理复数形式等语言特性。React Intl支持150多种语言，可以在浏览器和Node中运行，并且基于标准构建，可以保证代码的稳定性和可靠性。这些特点使React Intl成为一种强大而灵活的国际化方案，适用于各种类型的React应用程序。

React 测试

React测试中的Shallow Renderer是什么？

Shallow Renderer在React测试中非常有用，它可以让你对一个组件进行浅层渲染，并对其render方法的返回值进行断言，而无需考虑子组件的行为，因为它们不会被实例化或渲染。

function MyComponent() {
  return (
    <div>
      <span className={"heading"}>{"Title"}</span>
      <span className={"description"}>{"Description"}</span>
    </div>
  );
}

import ShallowRenderer from "react-test-renderer/shallow";

// 在你的测试代码中
const renderer = new ShallowRenderer();
renderer.render(<MyComponent />);

const result = renderer.getRenderOutput();

expect(result.type).toBe("div");
expect(result.props.children).toEqual([
  <span className={"heading"}>{"Title"}</span>,
  <span className={"description"}>{"Description"}</span>,
]);

以上代码可以对 MyComponent 进行浅层渲染，并且断言渲染的结果符合预期。

什么是TestRenderer包？

该软件包提供了一个渲染器，可以用于将组件渲染为纯JavaScript对象，而不依赖于DOM或本地移动环境。该软件包使得可以在不使用浏览器或jsdom的情况下，轻松地获取由ReactDOM或React Native渲染的平台视图层次结构（类似于DOM树）的快照。

import TestRenderer from "react-test-renderer";

const Link = ({ page, children }) => <a href={page}>{children}</a>;

const testRenderer = TestRenderer.create(
  <Link page={"https://www.facebook.com/"}>{"Facebook"}</Link>
);

console.log(testRenderer.toJSON());
// {
//   type: 'a',
//   props: { href: 'https://www.facebook.com/' },
//   children: [ 'Facebook' ]
// }

ReactTestUtils 包的目标是什么？

ReactTestUtils是在with-addons软件包中提供的工具，允许您对模拟的DOM执行操作，以进行单元测试。

什么是Jest?

Jest是由Facebook基于Jasmine创建的JavaScript单元测试框架，提供自动化的模拟创建和jsdom环境。它通常用于测试组件。

相对于Jasmine，Jest有以下几个优点：

自动查找需要执行的测试用例。在源代码中查找测试用例时，Jest可以自动识别测试用例并执行，无需手动指定。

在运行测试时自动模拟依赖项。Jest可以自动创建依赖项的模拟，使得测试更加简便。

允许您同步测试异步代码。Jest提供了专门的API，可以轻松地测试异步代码，而无需使用回调函数或Promise。

在虚拟DOM环境（通过jsdom实现）中运行测试。Jest使用虚拟DOM环境，使得测试可以在命令行中运行。

支持并行处理多个测试用例。Jest可以将测试用例分配给多个进程并行执行，以加快测试速度。

写一个简单的Jest测试的例子

const sum = (a, b) => a + b;

test("adds 1 + 2 to equal 3", () => {
  expect(sum(1, 2)).toBe(3);
});

React Redux

什么是flux？

Flux是一种应用程序设计范例，用作传统MVC模式的替代品。它不是一个框架或库，而是一种新的架构，与React和单向数据流的概念相辅相成。Facebook在使用React时内部使用这种模式。

dispatcher、stores和views组件之间的工作流程如下，这些组件具有不同的输入和输出：

什么是Redux？

Redux是基于Flux设计模式的JavaScript应用程序的可预测状态容器。Redux可以与React或任何其他视图库一起使用。它非常小巧（约2kB），没有任何依赖项。

Redux的核心原则？

Redux遵循三个基本原则：

1.单一数据源：整个应用程序的状态都存储在一个对象树中的单个store中。单一状态树使得跟踪随时间变化的更改以及调试或检查应用程序更加容易。

2.状态是只读的：改变状态的唯一方式是发出一个action，这是一个描述所发生的事情的对象。这确保了视图和网络回调都不会直接写入状态。

3.使用纯函数进行更改：为了指定状态树如何由actions转换，需要编写reducers。reducers只是纯函数，它以先前的状态和一个action作为参数，并返回下一个状态。

和Flux相比，Redux的缺点？

需要学习避免突变：Flux对数据突变不做规定，但Redux不喜欢突变，许多与Redux相关的包都假设你从不突变状态。你可以通过使用开发专用包（如redux-immutable-state-invariant、Immutable.js）或指导团队编写不突变代码来强制实现这一点。

需要仔细选择包：Flux明确不尝试解决撤消/重做、持久性或表单等问题，而Redux具有中间件和存储增强等扩展点，它已经产生了丰富的生态系统。

目前还没有很好的Flow集成：Flux目前可以进行非常出色的静态类型检查，而Redux还不支持此功能。

156