大廠面試中遇到的幾十道 webpack 與 react 面試題

時間 2019-12-28

標籤大廠面試遇到幾十 webpack react 欄目快樂工作简体版

原文原文鏈接

我在 github 上新建了一個倉庫日問，天天一道面試題，有關前端，後端，devops以及軟技能，促進職業成長，敲開大廠之門，歡迎交流css

而且記錄個人面試經驗html

如下是總結的 react 與 webpack 問題，我將在本週末補充答案，另外也歡迎各位補充答案前端

分類

計算機與編程基礎

計算機網絡 | 算法與數據結構 | 操做系統 | Linux基礎 | http | vim | gitvue

前端

CSS | Javascript | html | React | Vue | Webpack | 前端工程化node

後端

後端基礎 | 數據庫 | Redis | 微服務架構react

DevOps

DevOps | Docker | kuberneteslinux

開放式問題

開放式問題webpack

歷史記錄

查看全部問題git

00 瞭解 React 中的 ErrorBoundary 嗎，它有那些使用場景

在 Issue 中交流與討論: Issue 地址github

待答

01 有沒有使用過 react hooks，它帶來了那些便利

在 Issue 中交流與討論: Issue 地址

依個人見解，React hooks 主要解決了狀態以及反作用難以複用的場景，除此以外，他對我最大的好處就是在 Console 中不會看到重重疊疊相同名字的組件了(HOC)。

目前使用感受最爽的兩個hook，都是關於請求的。一個是 apollo-client 的 useQuery，一個是 swr。

02 如何使用 react hooks 實現一個計數器的組件

更多描述: 如何使用 react hooks 實現最簡單一個計數器的組件
爲了保證最最簡單化，不須要暫停與開始狀態

在 Issue 中交流與討論: Issue 地址

03 React 中，cloneElement 與 createElement 各是什麼，有什麼區別

在 Issue 中交流與討論: Issue 地址

首參不同，直接上 API

React.cloneElement(
  element,
  [props],
  [...children]
)

React.createElement(
  type,
  [props],
  [...children]
)
複製代碼

04 使用 react 實現一個通用的 message 組件

在 Issue 中交流與討論: Issue 地址

05 如何使用 react hooks 實現 useFetch 請求數據

更多描述: 好比設計成 `useFetch` 這種形式，它的 API 應該如何設計

在 Issue 中交流與討論: Issue 地址

能夠參考 How to fetch data with React Hooks?

06 react 如何使用 render prop component 請求數據

在 Issue 中交流與討論: Issue 地址

參考: www.robinwieruch.de/react-fetch…

07 React Portal 有哪些使用場景

在 Issue 中交流與討論: Issue 地址

Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.

在之前， react 中全部的組件都會位於 #app 下，而使用 Portals 提供了一種脫離 #app 的組件。

所以 Portals 適合脫離文檔流(out of flow) 的組件，特別是 position: absolute 與 position: fixed 的組件。好比模態框，通知，警告，goTop 等。

如下是官方一個模態框的示例，能夠在如下地址中測試效果 codepen.io/gaearon/pen…

<html>
  <body>
    <div id="app"></div>
    <div id="modal"></div>
    <div id="gotop"></div>
    <div id="alert"></div>
  </body>
</html>
複製代碼

const modalRoot = document.getElementById('modal');

class Modal extends React.Component {
  constructor(props) {
    super(props);
    this.el = document.createElement('div');
  }

  componentDidMount() {
    modalRoot.appendChild(this.el);
  }

  componentWillUnmount() {
    modalRoot.removeChild(this.el);
  }

  render() {
    return ReactDOM.createPortal(
      this.props.children,
      this.el,
    );
  }
}
複製代碼

08 什麼是 virtual DOM，它的引入帶了什麼好處

在 Issue 中交流與討論: Issue 地址

數據與UI的進一步分離，這樣也更有利於 SSR

09 react 與 vue 數組中 key 的做用是什麼

在 Issue 中交流與討論: Issue 地址

10 webpack 是用來作什麼的，原理是什麼

在 Issue 中交流與討論: Issue 地址

11 webpack 中的 loader 的做用是什麼

在 Issue 中交流與討論: Issue 地址

12 有沒有本身寫過一個webpack的loader

在 Issue 中交流與討論: Issue 地址

13 webpack 中plugin的做用是什麼，有沒有本身寫過

在 Issue 中交流與討論: Issue 地址

14 使用 webpack 時如何優化項目體積

在 Issue 中交流與討論: Issue 地址

15 什麼是 HMR，原理是什麼

在 Issue 中交流與討論: Issue 地址

16 使用 webpack 打包時，如何更好地利用 long term cache

在 Issue 中交流與討論: Issue 地址

17 隨着 http2 的發展，webpack 有沒有更好的打包方案

在 Issue 中交流與討論: Issue 地址

18 webpack 中 tree shaking 的原理是什麼

在 Issue 中交流與討論: Issue 地址

19 vue-loader 的實現原理是什麼

在 Issue 中交流與討論: Issue 地址

20 react 中 ref 是幹什麼用的，有哪些使用場景

在 Issue 中交流與討論: Issue 地址

21 如何使用 react/vue 實現一個 message API

更多描述: 能夠實現以下 API
message.info() message.success()

在 Issue 中交流與討論: Issue 地址

22 react hooks 中如何模擬 componentDidMount

在 Issue 中交流與討論: Issue 地址

我是山月，能夠加我微信 shanyue94 與我交流，備註交流。另外能夠關注個人公衆號【全棧成長之路】

若是你對全棧面試，前端工程化，graphql，devops，我的服務器運維以及微服務感興趣的話，能夠關注我

最後再放一個交流羣，掃碼入羣吧

相關文章

相關標籤/搜索

Java面試題十

Node.js面試題

Docker命令大全

PHP 7 新特性

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<