腾讯前端必会react面试题合集

最新推荐文章于 2023-09-08 00:41:55 发布

xiaofeng123aazz

最新推荐文章于 2023-09-08 00:41:55 发布

阅读量462

点赞数

文章标签：前端框架 reactjs

本文链接：https://blog.csdn.net/xiaofeng123aazz/article/details/129239897

版权

本文深入探讨了React Router的两种模式BrowserRouter和HashRouter，讲解了它们的工作原理和配置方法。此外，还涵盖了React组件生命周期、Redux中间件、虚拟DOM的优势和React Native的设备连接问题。同时，文章讨论了React的受控组件与非受控组件、Fiber的调度优化以及React Hooks中useEffect的生命周期行为。最后，提到了React Portal的使用场景和React面试中常见的问题与解答。

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

React-Router的路由有几种模式？

React-Router 支持使用 hash（对应 HashRouter）和 browser（对应 BrowserRouter）两种路由规则， react-router-dom 提供了 BrowserRouter 和 HashRouter 两个组件来实现应用的 UI 和 URL 同步：

BrowserRouter 创建的 URL 格式：xxx.com/path
HashRouter 创建的 URL 格式：xxx.com/#/path

（1）BrowserRouter

它使用 HTML5 提供的 history API（pushState、replaceState 和 popstate 事件）来保持 UI 和 URL 的同步。由此可以看出，BrowserRouter 是使用 HTML 5 的 history API 来控制路由跳转的：

<BrowserRouter
    basename={
   string}
    forceRefresh={
   bool}
    getUserConfirmation={
   func}
    keyLength={
   number}
/>

其中的属性如下：

basename 所有路由的基准 URL。basename 的正确格式是前面有一个前导斜杠，但不能有尾部斜杠；

<BrowserRouter basename="/calendar">
    <Link to="/today" />
</BrowserRouter>

等同于

<a href="/calendar/today" />

forceRefresh 如果为 true，在导航的过程中整个页面将会刷新。一般情况下，只有在不支持 HTML5 history API 的浏览器中使用此功能；
getUserConfirmation 用于确认导航的函数，默认使用 window.confirm。例如，当从 /a 导航至 /b 时，会使用默认的 confirm 函数弹出一个提示，用户点击确定后才进行导航，否则不做任何处理；

// 这是默认的确认函数
const getConfirmation = (message, callback) => {
   
  const allowTransition = window.confirm(message);
  callback(allowTransition);
}
<BrowserRouter getUserConfirmation={
   getConfirmation} />

需要配合<Prompt> 一起使用。

KeyLength 用来设置 Location.Key 的长度。

（2）HashRouter

使用 URL 的 hash 部分（即 window.location.hash）来保持 UI 和 URL 的同步。由此可以看出，HashRouter 是通过 URL 的 hash 属性来控制路由跳转的：

<HashRouter
    basename={
   string}
    getUserConfirmation={
   func}
    hashType={
   string}  
/>

其参数如下：

basename, getUserConfirmation 和 BrowserRouter 功能一样；
hashType window.location.hash 使用的 hash 类型，有如下几种：
- slash - 后面跟一个斜杠，例如 #/ 和 #/sunshine/lollipops；
- noslash - 后面没有斜杠，例如 # 和 #sunshine/lollipops；
- hashbang - Google 风格的 ajax crawlable，例如 #!/ 和 #!/sunshine/lollipops。

如何使用4.0版本的 React Router？

React Router 4.0版本中对 hashHistory做了迁移，执行包安装命令 npm install react-router-dom后，按照如下代码进行使用即可。

import {
    HashRouter, Route, Redirect, Switch } from " react-router-dom";
class App extends Component {
   
  render() {
   
    return (
      <div>
        <Switch>
          <Route path="/list" componen t={
   List}></Route>
          <Route path="/detail/：id" component={
   Detail}>
            {
   " "}
          </Route>
          <Redirect from="/ " to="/list">
            {
   " "}
          </Redirect>
        </Switch>
      </div>
    );
  }
}
const routes = (
  <HashRouter>
    <App> </App>
  </HashRouter>
);
render(routes, ickt);