{"id":21985024,"url":"https://github.com/minsion/react-interview","last_synced_at":"2025-07-22T07:31:34.634Z","repository":{"id":231485006,"uuid":"781810825","full_name":"minsion/react-interview","owner":"minsion","description":"50道react精选面试题","archived":false,"fork":false,"pushed_at":"2024-04-04T08:07:31.000Z","size":20,"stargazers_count":6,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-30T07:52:04.576Z","etag":null,"topics":["interview","interview-questions","react"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/minsion.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2024-04-04T04:47:19.000Z","updated_at":"2025-03-04T15:11:21.000Z","dependencies_parsed_at":"2024-04-04T08:47:38.172Z","dependency_job_id":null,"html_url":"https://github.com/minsion/react-interview","commit_stats":null,"previous_names":["minsion/react-interview"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/minsion/react-interview","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/minsion%2Freact-interview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/minsion%2Freact-interview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/minsion%2Freact-interview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/minsion%2Freact-interview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/minsion","download_url":"https://codeload.github.com/minsion/react-interview/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/minsion%2Freact-interview/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266447653,"owners_count":23929993,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-22T02:00:09.085Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["interview","interview-questions","react"],"created_at":"2024-11-29T18:12:17.225Z","updated_at":"2025-07-22T07:31:34.612Z","avatar_url":"https://github.com/minsion.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"## React技术栈50道面试题\n\n### 1. 区分Real DOM和Virtual DOM\n```\nReal DOM\t                   Virtual DOM\n1. 更新缓慢。\t                    1. 更新更快。\n2. 可以直接更新 HTML。\t            2. 无法直接更新 HTML。\n3. 如果元素更新，则创建新DOM。\t    3. 如果元素更新，则更新 JSX 。\n4. DOM操作代价很高。\t            4. DOM 操作非常简单。\n5. 消耗的内存较多。\t            5. 很少的内存消耗。\n```\n### 2. 什么是React？\nReact 是 Facebook 在 2011 年开发的前端 JavaScript 库。\n它遵循基于组件的方法，有助于构建可重用的UI组件。\n它用于开发复杂和交互式的 Web 和移动 UI。\n尽管它仅在 2015 年开源，但有一个很大的支持社区。\n### 3. React有什么特点？\nReact的主要功能如下：\n\n它使用虚拟DOM 而不是真正的DOM。\n它可以进行服务器端渲染。\n它遵循单向数据流或数据绑定。\n### 4. 列出React的一些主要优点。\nReact的一些主要优点是：\n\n它提高了应用的性能\n可以方便地在客户端和服务器端使用\n由于 JSX，代码的可读性很好\nReact 很容易与 Meteor，Angular 等其他框架集成\n使用React，编写UI测试用例变得非常容易\n### 5. React有哪些限制？\nReact的限制如下：\n\nReact 只是一个库，而不是一个完整的框架\n它的库非常庞大，需要时间来理解\n新手程序员可能很难理解\n编码变得复杂，因为它使用内联模板和 JSX\n### 6. 什么是JSX？\nJSX 是J avaScript XML 的简写。是 React 使用的一种文件，它利用 JavaScript 的表现力和类似 HTML 的模板语法。这使得 HTML 文件非常容易理解。此文件能使应用非常可靠，并能够提高其性能。下面是JSX的一个例子：\n```\nrender(){\n    return(        \n        \u003cdiv\u003e\n            \u003ch1\u003e Hello World from Edureka!!\u003c/h1\u003e\n        \u003c/div\u003e\n    );\n}\n```\n### 7. 你了解 Virtual DOM 吗？解释一下它的工作原理。\nVirtual DOM 是一个轻量级的 JavaScript 对象，它最初只是 real DOM 的副本。它是一个节点树，它将元素、它们的属性和内容作为对象及其属性。 React 的渲染函数从 React 组件中创建一个节点树。然后它响应数据模型中的变化来更新该树，该变化是由用户或系统完成的各种动作引起的。\n\nVirtual DOM 工作过程有三个简单的步骤。\n\n每当底层数据发生改变时，整个 UI 都将在 Virtual DOM 描述中重新渲染。\nclipboard.png\n\n然后计算之前 DOM 表示与新表示的之间的差异。\nclipboard.png\n\n完成计算后，将只用实际更改的内容更新 real DOM。\nclipboard.png\n\n### 8. 为什么浏览器无法读取JSX？\n浏览器只能处理 JavaScript 对象，而不能读取常规 JavaScript 对象中的 JSX。所以为了使浏览器能够读取 JSX，首先，需要用像 Babel 这样的 JSX 转换器将 JSX 文件转换为 JavaScript 对象，然后再将其传给浏览器。\n\n### 9. 与 ES5 相比，React 的 ES6 语法有何不同？\n以下语法是 ES5 与 ES6 中的区别：\n```\n1.require 与 import\n\n// ES5\nvar React = require('react');\n \n// ES6\nimport React from 'react';\n2.export 与 exports\n\n// ES5\nmodule.exports = Component;\n \n// ES6\nexport default Component;\n3.component 和 function\n\n// ES5\nvar MyComponent = React.createClass({\n    render: function() {\n        return\n            \u003ch3\u003eHello Edureka!\u003c/h3\u003e;\n    }\n});\n \n// ES6\nclass MyComponent extends React.Component {\n    render() {\n        return\n            \u003ch3\u003eHello Edureka!\u003c/h3\u003e;\n    }\n}\n4.props\n\n// ES5\nvar App = React.createClass({\n    propTypes: { name: React.PropTypes.string },\n    render: function() {\n        return\n            \u003ch3\u003eHello, {this.props.name}!\u003c/h3\u003e;\n    }\n});\n\n// ES6\nclass App extends React.Component {\n    render() {\n        return\n            \u003ch3\u003eHello, {this.props.name}!\u003c/h3\u003e;\n    }\n}\n5.state\n\n// ES5\nvar App = React.createClass({\n    getInitialState: function() {\n        return { name: 'world' };\n    },\n    render: function() {\n        return\n            \u003ch3\u003eHello, {this.state.name}!\u003c/h3\u003e;\n    }\n});\n\n// ES6\nclass App extends React.Component {\n    constructor() {\n        super();\n        this.state = { name: 'world' };\n    }\n    render() {\n        return\n            \u003ch3\u003eHello, {this.state.name}!\u003c/h3\u003e;\n    }\n}\n```\n### 10. React与Angular有何不同？\n主题\tReact\tAngular\n```\n1. 体系结构\t只有 MVC 中的 View\t完整的 MVC\n2. 渲染\t可以进行服务器端渲染\t客户端渲染\n3. DOM\t使用 virtual DOM\t使用 real DOM\n4. 数据绑定\t单向数据绑定\t双向数据绑定\n5. 调试\t编译时调试\t运行时调试\n\n```\n\n### 11. 你怎样理解“在React中，一切都是组件”这句话。\n组件是 React 应用 UI 的构建块。这些组件将整个 UI 分成小的独立并可重用的部分。每个组件彼此独立，而不会影响 UI 的其余部分。\n\n### 12. 怎样解释 React 中 render() 的目的。\n每个React组件强制要求必须有一个 render()。它返回一个 React 元素，是原生 DOM 组件的表示。如果需要渲染多个 HTML 元素，则必须将它们组合在一个封闭标记内，例如 ```\u003cform\u003e、\u003cgroup\u003e、\u003cdiv\u003e``` 等。此函数必须保持纯净，即必须每次调用时都返回相同的结果。\n\n### 13. 如何将两个或多个组件嵌入到一个组件中？\n可以通过以下方式将组件嵌入到一个组件中：\n```\n\nclass MyComponent extends React.Component{\n    render(){\n        return(          \n            \u003cdiv\u003e\n                \u003ch1\u003eHello\u003c/h1\u003e\n                \u003cHeader/\u003e\n            \u003c/div\u003e\n        );\n    }\n}\nclass Header extends React.Component{\n    render(){\n        return\n            \u003ch1\u003eHeader Component\u003c/h1\u003e   \n   };\n}\nReactDOM.render(\n    \u003cMyComponent/\u003e, document.getElementById('content')\n);\n```\n\n### 14. 什么是 Props?\nProps 是 React 中属性的简写。它们是只读组件，必须保持纯，即不可变。它们总是在整个应用中从父组件传递到子组件。子组件永远不能将 prop 送回父组件。这有助于维护单向数据流，通常用于呈现动态生成的数据。\n\n### 15. React中的状态是什么？它是如何使用的？\n状态是 React 组件的核心，是数据的来源，必须尽可能简单。基本上状态是确定组件呈现和行为的对象。与props 不同，它们是可变的，并创建动态和交互式组件。可以通过 this.state() 访问它们。\n\n### 16. 区分状态和 props\n条件\tState\tProps\n1. 从父组件中接收初始值\tYes\tYes\n2. 父组件可以改变值\tNo\tYes\n3. 在组件中设置默认值\tYes\tYes\n4. 在组件的内部变化\tYes\tNo\n5. 设置子组件的初始值\tYes\tYes\n6. 在子组件的内部更改\tNo\tYes\n17. 如何更新组件的状态？\n可以用 this.setState()更新组件的状态。\n```\nclass MyComponent extends React.Component {\n    constructor() {\n        super();\n        this.state = {\n            name: 'Maxx',\n            id: '101'\n        }\n    }\n    render()\n        {\n            setTimeout(()=\u003e{this.setState({name:'Jaeha', id:'222'})},2000)\n            return (              \n                \u003cdiv\u003e\n                    \u003ch1\u003eHello {this.state.name}\u003c/h1\u003e\n                    \u003ch2\u003eYour Id is {this.state.id}\u003c/h2\u003e\n                \u003c/div\u003e\n            );\n        }\n    }\nReactDOM.render(\n    \u003cMyComponent/\u003e, document.getElementById('content')\n);\n```\n\n### 18. React 中的箭头函数是什么？怎么用？\n箭头函数（=\u003e）是用于编写函数表达式的简短语法。这些函数允许正确绑定组件的上下文，因为在 ES6 中默认下不能使用自动绑定。使用高阶函数时，箭头函数非常有用。\n```\n//General way\nrender() {    \n    return(\n        \u003cMyInput onChange = {this.handleChange.bind(this) } /\u003e\n    );\n}\n//With Arrow Function\nrender() {  \n    return(\n        \u003cMyInput onChange = { (e)=\u003ethis.handleOnChange(e) } /\u003e\n    );\n}\n```\n### 19. 区分有状态和无状态组件。\n有状态组件\t无状态组件\n1. 在内存中存储有关组件状态变化的信息\t1. 计算组件的内部的状态\n2. 有权改变状态\t2. 无权改变状态\n3. 包含过去、现在和未来可能的状态变化情况\t3. 不包含过去，现在和未来可能发生的状态变化情况\n4. 接受无状态组件状态变化要求的通知，然后将 props 发送给他们。\t4.从有状态组件接收 props 并将其视为回调函数。\n\n### 20. React组件生命周期的阶段是什么？\nReact 组件的生命周期有三个不同的阶段：\n\n初始渲染阶段：这是组件即将开始其生命之旅并进入 DOM 的阶段。\n更新阶段：一旦组件被添加到 DOM，它只有在 prop 或状态发生变化时才可能更新和重新渲染。这些只发生在这个阶段。\n卸载阶段：这是组件生命周期的最后阶段，组件被销毁并从 DOM 中删除。\n\n### 21. 详细解释 React 组件的生命周期方法。\n一些最重要的生命周期方法是：\n\ncomponentWillMount() – 在渲染之前执行，在客户端和服务器端都会执行。\ncomponentDidMount() – 仅在第一次渲染后在客户端执行。\ncomponentWillReceiveProps() – 当从父类接收到 props 并且在调用另一个渲染器之前调用。\nshouldComponentUpdate() – 根据特定条件返回 true 或 false。如果你希望更新组件，请返回true 否则返回 false。默认情况下，它返回 false。\ncomponentWillUpdate() – 在 DOM 中进行渲染之前调用。\ncomponentDidUpdate() – 在渲染发生后立即调用。\ncomponentWillUnmount() – 从 DOM 卸载组件后调用。用于清理内存空间。\n\n### 22. React中的事件是什么？\n在 React 中，事件是对鼠标悬停、鼠标单击、按键等特定操作的触发反应。处理这些事件类似于处理 DOM 元素中的事件。但是有一些语法差异，如：\n\n用驼峰命名法对事件命名而不是仅使用小写字母。\n事件作为函数而不是字符串传递。\n事件参数重包含一组特定于事件的属性。每个事件类型都包含自己的属性和行为，只能通过其事件处理程序访问。\n\n### 23.如何在React中创建一个事件？\n```\nclass Display extends React.Component({    \n    show(evt) {\n        // code   \n    },   \n    render() {      \n        // Render the div with an onClick prop (value is a function)        \n        return (            \n            \u003cdiv onClick={this.show}\u003eClick Me!\u003c/div\u003e\n        );    \n    }\n});\n```\n### 24. React中的合成事件是什么？\n合成事件是围绕浏览器原生事件充当跨浏览器包装器的对象。它们将不同浏览器的行为合并为一个 API。这样做是为了确保事件在不同浏览器中显示一致的属性。\n\n### 25. 你对 React 的 refs 有什么了解？\nRefs 是 React 中引用的简写。它是一个有助于存储对特定的 React 元素或组件的引用的属性，它将由组件渲染配置函数返回。用于对 render() 返回的特定元素或组件的引用。当需要进行 DOM 测量或向组件添加方法时，它们会派上用场。\n```\nclass ReferenceDemo extends React.Component{\n     display() {\n         const name = this.inputDemo.value;\n         document.getElementById('disp').innerHTML = name;\n     }\nrender() {\n    return(        \n          \u003cdiv\u003e\n            Name: \u003cinput type=\"text\" ref={input =\u003e this.inputDemo = input} /\u003e\n            \u003cbutton name=\"Click\" onClick={this.display}\u003eClick\u003c/button\u003e            \n            \u003ch2\u003eHello \u003cspan id=\"disp\"\u003e\u003c/span\u003e !!!\u003c/h2\u003e\n          \u003c/div\u003e\n    );\n   }\n }\n ```\n### 26. 列出一些应该使用 Refs 的情况。\n以下是应该使用 refs 的情况：\n\n需要管理焦点、选择文本或媒体播放时\n触发式动画\n与第三方 DOM 库集成\n\n### 27. 如何模块化 React 中的代码？\n可以使用 export 和 import 属性来模块化代码。它们有助于在不同的文件中单独编写组件。\n```\n//ChildComponent.jsx\nexport default class ChildComponent extends React.Component {\n    render() {\n        return(           \n              \u003cdiv\u003e\n                  \u003ch1\u003eThis is a child component\u003c/h1\u003e\n              \u003c/div\u003e\n        );\n    }\n}\n \n//ParentComponent.jsx\nimport ChildComponent from './childcomponent.js';\nclass ParentComponent extends React.Component {    \n    render() {        \n        return(           \n             \u003cdiv\u003e               \n                \u003cApp /\u003e          \n             \u003c/div\u003e       \n        );  \n    }\n}\n```\n\n### 28. 如何在 React 中创建表单\nReact 表单类似于 HTML 表单。但是在 React 中，状态包含在组件的 state 属性中，并且只能通过 setState() 更新。因此元素不能直接更新它们的状态，它们的提交是由 JavaScript 函数处理的。此函数可以完全访问用户输入到表单的数据。\n```\nhandleSubmit(event) {\n    alert('A name was submitted: ' + this.state.value);\n    event.preventDefault();\n}\n \nrender() {\n    return (        \n        \u003cform onSubmit={this.handleSubmit}\u003e\n            \u003clabel\u003e\n                Name:\n                \u003cinput type=\"text\" value={this.state.value} onChange={this.handleSubmit} /\u003e\n            \u003c/label\u003e\n            \u003cinput type=\"submit\" value=\"Submit\" /\u003e\n        \u003c/form\u003e\n    );\n}\n```\n### 29. 你对受控组件和非受控组件了解多少？\n受控组件\t非受控组件\n1. 没有维持自己的状态\t1. 保持着自己的状态\n2.数据由父组件控制\t2.数据由 DOM 控制\n3. 通过 props 获取当前值，然后通过回调通知更改\t3. Refs 用于获取其当前值\n\n### 30. 什么是高阶组件（HOC）？\n高阶组件是重用组件逻辑的高级方法，是一种源于 React 的组件模式。 HOC 是自定义组件，在它之内包含另一个组件。它们可以接受子组件提供的任何动态，但不会修改或复制其输入组件中的任何行为。你可以认为 HOC 是“纯（Pure）”组件。\n\n### 31. 你能用HOC做什么？\nHOC可用于许多任务，例如：\n\n代码重用，逻辑和引导抽象\n渲染劫持\n状态抽象和控制\nProps 控制\n\n### 32. 什么是纯组件？\n纯（Pure） 组件是可以编写的最简单、最快的组件。它们可以替换任何只有 render() 的组件。这些组件增强了代码的简单性和应用的性能。\n\n### 33. React 中 key 的重要性是什么？\nkey 用于识别唯一的 Virtual DOM 元素及其驱动 UI 的相应数据。它们通过回收 DOM 中当前所有的元素来帮助 React 优化渲染。这些 key 必须是唯一的数字或字符串，React 只是重新排序元素而不是重新渲染它们。这可以提高应用程序的性能。\n\nReact Redux\n\n### 34. MVC框架的主要问题是什么？\n以下是MVC框架的一些主要问题：\n\n对 DOM 操作的代价非常高\n程序运行缓慢且效率低下\n内存浪费严重\n由于循环依赖性，组件模型需要围绕 models 和 views 进行创建\n\n### 35. 解释一下 Flux\nclipboard.png\n\nFlux 是一种强制单向数据流的架构模式。它控制派生数据，并使用具有所有数据权限的中心 store 实现多个组件之间的通信。整个应用中的数据更新必须只能在此处进行。 Flux 为应用提供稳定性并减少运行时的错误。\n\n### 36. 什么是Redux？\nRedux 是当今最热门的前端开发库之一。它是 JavaScript 程序的可预测状态容器，用于整个应用的状态管理。使用 Redux 开发的应用易于测试，可以在不同环境中运行，并显示一致的行为。\n\n### 37. Redux遵循的三个原则是什么？\n单一事实来源：整个应用的状态存储在单个 store 中的对象/状态树里。单一状态树可以更容易地跟踪随时间的变化，并调试或检查应用程序。\n状态是只读的：改变状态的唯一方法是去触发一个动作。动作是描述变化的普通 JS 对象。就像 state 是数据的最小表示一样，该操作是对数据更改的最小表示。\n使用纯函数进行更改：为了指定状态树如何通过操作进行转换，你需要纯函数。纯函数是那些返回值仅取决于其参数值的函数。\nclipboard.png\n\n### 38. 你对“单一事实来源”有什么理解？\nRedux 使用 “Store” 将程序的整个状态存储在同一个地方。因此所有组件的状态都存储在 Store 中，并且它们从 Store 本身接收更新。单一状态树可以更容易地跟踪随时间的变化，并调试或检查程序。\n\n### 39. 列出 Redux 的组件。\nRedux 由以下组件组成：\n\nAction – 这是一个用来描述发生了什么事情的对象。\nReducer – 这是一个确定状态将如何变化的地方。\nStore – 整个程序的状态/对象树保存在Store中。\nView – 只显示 Store 提供的数据。\n\n### 40. 数据如何通过 Redux 流动？\nclipboard.png\n\n### 41. 如何在 Redux 中定义 Action？\nReact 中的 Action 必须具有 type 属性，该属性指示正在执行的 ACTION 的类型。必须将它们定义为字符串常量，并且还可以向其添加更多的属性。在 Redux 中，action 被名为 Action Creators 的函数所创建。以下是 Action 和Action Creator 的示例：\n```\nfunction addTodo(text) {\n       return {\n                type: ADD_TODO,    \n                 text\n    }\n}\n```\n### 42. 解释 Reducer 的作用。\nReducers 是纯函数，它规定应用程序的状态怎样因响应 ACTION 而改变。Reducers 通过接受先前的状态和 action 来工作，然后它返回一个新的状态。它根据操作的类型确定需要执行哪种更新，然后返回新的值。如果不需要完成任务，它会返回原来的状态。\n\n### 43. Store 在 Redux 中的意义是什么？\nStore 是一个 JavaScript 对象，它可以保存程序的状态，并提供一些方法来访问状态、调度操作和注册侦听器。应用程序的整个状态/对象树保存在单一存储中。因此，Redux 非常简单且是可预测的。我们可以将中间件传递到 store 来处理数据，并记录改变存储状态的各种操作。所有操作都通过 reducer 返回一个新状态。\n\n### 44. Redux与Flux有何不同？\nFlux\tRedux\n1. Store 包含状态和更改逻辑\t1. Store 和更改逻辑是分开的\n2. 有多个 Store\t2. 只有一个 Store\n3. 所有 Store 都互不影响且是平级的\t3. 带有分层 reducer 的单一 Store\n4. 有单一调度器\t4. 没有调度器的概念\n5. React 组件订阅 store\t5. 容器组件是有联系的\n6. 状态是可变的\t6. 状态是不可改变的\n\n### 45. Redux 有哪些优点？\nRedux 的优点如下：\n\n结果的可预测性 - 由于总是存在一个真实来源，即 store ，因此不存在如何将当前状态与动作和应用的其他部分同步的问题。\n可维护性 - 代码变得更容易维护，具有可预测的结果和严格的结构。\n服务器端渲染 - 你只需将服务器上创建的 store 传到客户端即可。这对初始渲染非常有用，并且可以优化应用性能，从而提供更好的用户体验。\n开发人员工具 - 从操作到状态更改，开发人员可以实时跟踪应用中发生的所有事情。\n社区和生态系统 - Redux 背后有一个巨大的社区，这使得它更加迷人。一个由才华横溢的人组成的大型社区为库的改进做出了贡献，并开发了各种应用。\n易于测试 - Redux 的代码主要是小巧、纯粹和独立的功能。这使代码可测试且独立。\n组织 - Redux 准确地说明了代码的组织方式，这使得代码在团队使用时更加一致和简单。\n\n\n### 46. 什么是React 路由？\nReact 路由是一个构建在 React 之上的强大的路由库，它有助于向应用程序添加新的屏幕和流。这使 URL 与网页上显示的数据保持同步。它负责维护标准化的结构和行为，并用于开发单页 Web 应用。 React 路由有一个简单的API。\n\n### 47. 为什么React Router v4中使用 switch 关键字 ？\n虽然 \u003cdiv\u003e 用于封装 Router 中的多个路由，当你想要仅显示要在多个定义的路线中呈现的单个路线时，可以使用 “switch” 关键字。使用时，```\u003cswitch\u003e``` 标记会按顺序将已定义的 URL 与已定义的路由进行匹配。找到第一个匹配项后，它将渲染指定的路径。从而绕过其它路线。\n\n### 48. 为什么需要 React 中的路由？\nRouter 用于定义多个路由，当用户定义特定的 URL 时，如果此 URL 与 Router 内定义的任何 “路由” 的路径匹配，则用户将重定向到该特定路由。所以基本上我们需要在自己的应用中添加一个 Router 库，允许创建多个路由，每个路由都会向我们提供一个独特的视图\n```\n\u003cswitch\u003e\n    \u003croute exact path=’/’ component={Home}/\u003e\n    \u003croute path=’/posts/:id’ component={Newpost}/\u003e\n    \u003croute path=’/posts’   component={Post}/\u003e\n\u003c/switch\u003e\n```\n\n### 49. 列出 React Router 的优点。\n几个优点是：\n\n就像 React 基于组件一样，在 React Router v4 中，API 是 'All About Components'。可以将 Router 可视化为单个根组件（\u003cBrowserRouter\u003e），其中我们将特定的子路由（\u003croute\u003e）包起来。\n无需手动设置历史值：在 React Router v4 中，我们要做的就是将路由包装在 \u003cBrowserRouter\u003e 组件中。\n包是分开的：共有三个包，分别用于 Web、Native 和 Core。这使我们应用更加紧凑。基于类似的编码风格很容易进行切换。\n\n### 50. React Router与常规路由有何不同？\n主题\t常规路由\tReact 路由\n参与的页面\t每个视图对应一个新文件\t只涉及单个HTML页面\nURL 更改\tHTTP 请求被发送到服务器并且接收相应的 HTML 页面\t仅更改历史记录属性\n体验\t用户实际在每个视图的不同页面切换\t用户认为自己正在不同的页面间切换\n希望这套 React 面试题和答案能帮你准备面试。祝一切顺利！\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fminsion%2Freact-interview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fminsion%2Freact-interview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fminsion%2Freact-interview/lists"}