大厂面试中遇到的几十道 webpack 与 react 面试题

我在 github 上新建了一个仓库日问，每天一道面试题，有关前端，后端，devops以及软技能，促进职业成长，敲开大厂之门，欢迎交流

并且记录我的面试经验

以下是总结的 react 与 webpack 问题，我将在本周末补充答案，另外也欢迎各位补充答案

00 了解 React 中的 ErrorBoundary 吗，它有那些使用场景

待答

01 有没有使用过 react hooks，它带来了那些便利

依我的看法，React hooks 主要解决了状态以及副作用难以复用的场景，除此之外，他对我大的好处就是在 Console 中不会看到重重叠叠相同名字的组件了(HOC)。

目前使用感觉爽的两个hook，都是关于请求的。一个是 apollo-client 的 useQuery，一个是 swr。

02 如何使用 react hooks 实现一个计数器的组件

03 React 中，cloneElement 与 createElement 各是什么，有什么区别

首参不一样，直接上 API

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

React.createElement(
  type,
  [props],
  [...children]
)
复制代码

04 使用 react 实现一个通用的 message 组件

05 如何使用 react hooks 实现 useFetch 请求数据

可以参考 How to fetch data with React Hooks?

06 react 如何使用 render prop component 请求数据

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

07 React Portal 有哪些使用场景

在以前， 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，它的引入带了什么好处

数据与UI的进一步分离，这样也更有利于 SSR

09 react 与 vue 数组中 key 的作用是什么

10 webpack 是用来做什么的，原理是什么

11 webpack 中的 loader 的作用是什么

12 有没有自己写过一个webpack的loader

13 webpack 中plugin的作用是什么，有没有自己写过

14 使用 webpack 时如何优化项目体积

15 什么是 HMR，原理是什么

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

17 随着 http2 的发展，webpack 有没有更好的打包方案

18 webpack 中 tree shaking 的原理是什么

19 vue-loader 的实现原理是什么

20 react 中 ref 是干什么用的，有哪些使用场景

21 如何使用 react/vue 实现一个 message API

22 react hooks 中如何模拟 componentDidMount

如果你对全栈面试，前端工程化，graphql，devops，个人服务器运维以及微服务感兴趣的话，可以关注我

后再放一个交流群，扫码入群吧

分类

计算机与编程基础

前端

后端

DevOps

开放式问题

历史记录