阅读 9782

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

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

并且记录我的面试经验

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

分类

计算机与编程基础

计算机网络 | 算法与数据结构 | 操作系统 | Linux基础 | http | vim | git

前端

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

后端

后端基础 | 数据库 | Redis | 微服务架构

DevOps

DevOps | Docker | kubernetes

开放式问题

开放式问题

历史记录

查看所有问题

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

在 Issue 中交流与讨论: Issue 地址

待答

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

在 Issue 中交流与讨论: Issue 地址

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

目前使用感觉最爽的两个hook,都是关于请求的。一个是 apollo-clientuseQuery,一个是 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: absoluteposition: 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,个人服务器运维以及微服务感兴趣的话,可以关注我

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

关注下面的标签,发现更多相似文章
评论