天天看點
傳回

2022必備react面試題 附答案2022必備react面試題 附答案

2022必備react面試題 附答案

React視訊講解 點選學習

1. React的嚴格模式如何使用，有什麼用處？

StrictMode

是一個用來突出顯示應用程式中潛在問題的工具。與

Fragment

一樣，

StrictMode

不會渲染任何可見的 UI。它為其後代元素觸發額外的檢查和警告。 可以為應用程式的任何部分啟用嚴格模式。例如：

import React from 'react';
function ExampleApplication() {
  return (
    <div>
      <Header />
      <React.StrictMode>        
        <div>
          <ComponentOne />
          <ComponentTwo />
        </div>
      </React.StrictMode>      
      <Footer />
    </div>
  );
}
複制代碼

複制

在上述的示例中，不會對

Header

和

Footer

元件運作嚴格模式檢查。但是，

ComponentOne

和

ComponentTwo

以及它們的所有後代元素都将進行檢查。

StrictMode

目前有助于：

  • 識别不安全的生命周期
  • 關于使用過時字元串 ref API 的警告
  • 關于使用廢棄的 findDOMNode 方法的警告
  • 檢測意外的副作用
  • 檢測過時的 context API

2. 在React中周遊的方法有哪些？

（1）周遊數組：map && forEach

import React from 'react';

class App extends React.Component {
  render() {
    let arr = ['a', 'b', 'c', 'd'];
    return (
      <ul>
        {
          arr.map((item, index) => {
            return <li key={index}>{item}</li>
          })
        }
      </ul>
    )
  }
}

class App extends React.Component {
  render() {
    let arr = ['a', 'b', 'c', 'd'];
    return (
      <ul>
        {
          arr.forEach((item, index) => {
            return <li key={index}>{item}</li>
          })
        }
      </ul>
    )
  }
}
複制代碼

複制

（2）周遊對象：map && for in

class App extends React.Component {
  render() {
    let obj = {
      a: 1,
      b: 2,
      c: 3
    }
    return (
      <ul>
        {
          (() => {
            let domArr = [];
            for(const key in obj) {
              if(obj.hasOwnProperty(key)) {
                const value = obj[key]
                domArr.push(<li key={key}>{value}</li>)
              }
            }
            return domArr;
          })()
        }
      </ul>
    )
  }
}

// Object.entries() 把對象轉換成數組
class App extends React.Component {
  render() {
    let obj = {
      a: 1,
      b: 2,
      c: 3
    }
    return (
      <ul>
        {
          Object.entries(obj).map(([key, value], index) => {   // item是一個數組，把item解構，寫法是[key, value]
            return <li key={key}>{value}</li>
          }) 
        }
      </ul>
    )
  }
}

複制

3. 在React中頁面重新加載時怎樣保留資料？

這個問題就設計到了資料持久化， 主要的實作方式有以下幾種：

  • Redux： 将頁面的資料存儲在redux中，在重新加載頁面時，擷取Redux中的資料；
  • data.js： 使用webpack建構的項目，可以建一個檔案，data.js，将資料儲存data.js中，跳轉頁面後擷取；
  • sessionStorge： 在進入選擇位址頁面之前，componentWillUnMount的時候，将資料存儲到sessionStorage中，每次進入頁面判斷sessionStorage中有沒有存儲的那個值，有，則讀取渲染資料；沒有，則說明資料是初始化的狀态。傳回或進入除了選擇位址以外的頁面，清掉存儲的sessionStorage，保證下次進入是初始化的資料
  • history API： History API 的

    pushState

     函數可以給曆史記錄關聯一個任意的可序列化

    state

     ，是以可以在路由

    push

     的時候将目前頁面的一些資訊存到

    state

     中，下次傳回到這個頁面的時候就能從

    state

     裡面取出離開前的資料重新渲染。react-router 直接可以支援。這個方法适合一些需要臨時存儲的場景。

4. React必須使用JSX嗎？

React 并不強制要求使用 JSX。當不想在建構環境中配置有關 JSX 編譯時，不在 React 中使用 JSX 會更加友善。

每個 JSX 元素隻是調用

React.createElement(component, props, ...children)

的文法糖。是以，使用 JSX 可以完成的任何事情都可以通過純 JavaScript 完成。

例如，用 JSX 編寫的代碼：

class Hello extends React.Component {
  render() {
    return <div>Hello {this.props.toWhat}</div>;
  }
}
ReactDOM.render(
  <Hello toWhat="World" />,
  document.getElementById('root')
);
複制代碼

複制

可以編寫為不使用 JSX 的代碼：

class Hello extends React.Component {
  render() {
    return React.createElement('div', null, `Hello ${this.props.toWhat}`);
  }
}
ReactDOM.render(
  React.createElement(Hello, {toWhat: 'World'}, null),
  document.getElementById('root')
);

複制

5.為什麼使用jsx的元件中沒有看到使用react卻需要引入react？

本質上來說JSX是

React.createElement(component, props, ...children)

方法的文法糖。在React 17之前，如果使用了JSX，其實就是在使用React，

babel

會把元件轉換為

CreateElement

形式。在React 17之後，就不再需要引入，因為

babel

已經可以幫我們自動引入react。

5. 在React中怎麼使用async/await？

async/await是ES7标準中的新特性。如果是使用React官方的腳手架建立的項目，就可以直接使用。如果是在自己搭建的webpack配置的項目中使用，可能會遇到 regeneratorRuntime is not defined 的異常錯誤。那麼我們就需要引入babel，并在babel中配置使用async/await。可以利用babel的 transform-async-to-module-method 插件來轉換其成為浏覽器支援的文法，雖然沒有性能的提升，但對于代碼編寫體驗要更好。

6. React.Children.map和js的map有什麼差別？

JavaScript中的map不會對為null或者undefined的資料進行處理，而React.Children.map中的map可以處理React.Children為null或者undefined的情況。

7. React 中的高階元件運用了什麼設計模式？

使用了裝飾模式，高階元件的運用：

function withWindowWidth(BaseComponent) {
  class DerivedClass extends React.Component {
    state = {
      windowWidth: window.innerWidth,
    }
    onResize = () => {
      this.setState({
        windowWidth: window.innerWidth,
      })
    }
    componentDidMount() {
      window.addEventListener('resize', this.onResize)
    }
    componentWillUnmount() {
      window.removeEventListener('resize', this.onResize);
    }
    render() {
      return <BaseComponent {...this.props} {...this.state}/>
    }
  }
  return DerivedClass;
}
const MyComponent = (props) => {
  return <div>Window width is: {props.windowWidth}</div>
};
export default withWindowWidth(MyComponent);
複制代碼

複制

裝飾模式的特點是不需要改變 被裝飾對象 本身，而隻是在外面套一個外殼接口。JavaScript 目前已經有了原生裝飾器的提案，其用法如下：

@testable
   class MyTestableClass {
}

複制

8. 類元件和函數元件有何不同？

解答

在 React 16.8版本（引入鈎子）之前，使用基于類的元件來建立需要維護内部狀态或利用生命周期方法的元件（即

componentDidMount

和

shouldComponentUpdate

）。基于類的元件是 ES6 類，它擴充了 React 的 Component 類，并且至少實作了

render()

方法。

類元件：

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}
複制代碼

複制

函數元件是無狀态的（同樣，小于 React 16.8版本），并傳回要呈現的輸出。它們渲染 UI 的首選隻依賴于屬性，因為它們比基于類的元件更簡單、更具性能。

函數元件：

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
複制代碼

複制

注意：在 React 16.8版本中引入鈎子意味着這些差別不再适用（請參閱14和15題）。

進一步閱讀

  • React 中對比函數式元件和類元件
  • React 中函數與類元件比對

9. React 中 keys 的作用是什麼？

Keys 是 React 用于追蹤哪些清單中元素被修改、被添加或者被移除的輔助辨別。

在 React 中渲染集合時，向每個重複的元素添加關鍵字對于幫助React跟蹤元素與資料之間的關聯非常重要。key 應該是唯一ID，最好是 UUID 或收集項中的其他唯一字元串：

<ul>
  {todos.map((todo) =>
    <li key={todo.id}>
      {todo.text}
    </li>
  )};
</ul>
複制代碼

複制

在集合中添加和删除項目時，不使用鍵或将索引用作鍵會導緻奇怪的行為。

進一步閱讀

  • 清單 & key
  • React 中 key 屬性

10. 為什麼調用 setState 而不是直接改變 state？

解答

如果您嘗試直接改變元件的狀态，React 将無法得知它需要重新渲染元件。通過使用

setState()

方法，React 可以更新元件的UI。

另外，您還可以談談如何不保證狀态更新是同步的。如果需要基于另一個狀态（或屬性）更新元件的狀态，請向

setState()

傳遞一個函數，該函數将 state 和 props 作為其兩個參數：

this.setState((state, props) => ({
  counter: state.counter + props.increment
}));
複制代碼

複制

進一步閱讀

  • 正确地使用 State
上一篇: proxy_next_upstream 對POST無效proxy_next_upstream 對POST無效
下一篇: Apache httpd 幾個報錯的解決記錄Apache httpd 幾個報錯的解決記錄