听说现在都考这些React面试题

山月

发布于 2021-05-11 10:04:38

1K0

发布于 2021-05-11 10:04:38

文章被收录于专栏：服务器运维笔记

收集了很多关于React的面试题，有的山月试着答了一下，有的没有，待续补充。

01 当新入职一家公司时，如何快速搭建开发环境并让应用跑起来

新人入职新上手项目，如何把它跑起来，这是所有人都会碰到的问题：所有人都是从新手开始的。

查看是否有 CI/CD，如果有跟着 CI/CD 部署的脚本跑命令
查看是否有 dockerfile，如果有跟着 dockerfile 跑命令
查看 npm scripts 中是否有 dev/start，尝试 npm run dev/npm start
查看是否有文档，如果有跟着文档走

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

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

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

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

长按识别二维码查看原文

https://github.com/zeit/swr标题：swr

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

更多描述: 如何使用 react hooks 实现最简单一个计数器的组件为了保证最最简单化，不需要暂停与开始状态

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

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

React.createElement(
  type,
  [props],
  [...children]
)

直接上 API，很容易得出结论：首参不一样。这也是他们的最大区别：

cloneElement，根据 Element 生成新的 Element
createElement，根据 Type 生成新的 Element

然而，此时估计还是云里雾里，含糊不清，需要弄清它，首先要明白俩概念

Type
Element

React.cloneElement 的使用场景

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

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

更多描述: 比如设计成 `useFetch` 这种形式，它的 API 应该如何设计

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

长按识别二维码查看原文

https://www.robinwieruch.de/react-hooks-fetch-data标题：How to fetch data with React Hooks?

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

参考: https://www.robinwieruch.de/react-fetching-data#how-to-fetch-data-in-render-props

09 React Portal 有哪些使用场景

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 等。

以下是官方一个模态框的示例，可以在以下地址中测试效果 https://codepen.io/gaearon/pen/jGBWpE?editors=1010

<html>
  <body>
    <section id="app"></section>
    <section id="modal"></section>
    <section id="gotop"></section>
    <section id="alert"></section>
  </body>
</html>

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

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

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

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

  render() {
    return ReactDOM.createPortal(
      this.props.children,
      this.el,
    );
  }
}

10 什么是 virtual DOM，它的引入带了什么好处

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

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

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

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

更多描述: 可以实现如下 APImessage.info() message.success()

14 react hooks 中如何模拟 componentDidMount

在 useEffect，把第二个参数即依赖的状态，设置为 []

useEffect(callback, [])

15 如果使用 SSR，可以在 created/componentWillMount 中访问 localStorage 吗

不可以，created/componentWillMount 时，还未挂载，代码仍然在服务器中执行，此时没有浏览器环境，因此此时访问 localStorage 将会报错

16 react hooks 如何替代或部分替代 redux 功能

我们把全局store分为两块

从服务器端来，如各种 model，此时可以使用 swr 直接替代。或者封装一个 useModel，如 useUser，usePermission
客户端全局 store，此时可以使用 useReducer 和 useContext 来替代

17 如何实现一个 react hook，你有没有自己写过一个

可以参考官方文档 https://reactjs.org/docs/hooks-custom.html

自定义一个 hook 仅仅是一个以 use 打头，组合 useState 和 useEffect 或者其它 hooks 的一个普通函数

18 在 react/vue 中数组是否可以以在数组中的次序为 key

19 React 中 fiber 是用来做什么的

20 React hooks 中 useCallback 的使用场景是什么

21 useEffect 中如何使用 async/await

function useEffect(effect: EffectCallback, deps?: DependencyList): void;
type EffectCallback = () => (void | (() => void | undefined));

根据文档及 ts 的提示来看，useEffect 的回调参数返回的是一个清除副作用的 clean-up 函数。因此无法返回 Promise，更无法使用 async/await

useEffect(() => {
  const subscription = props.source.subscribe();
  return () => {
    // Clean up the subscription
    subscription.unsubscribe();
  };
});

「此时可以选择再包装一层 async 函数，置于 useEffect 的回调函数中，变相使用 async/await」

async function fetchMyAPI() {
  let response = await fetch('api/data')
  response = await res.json()
  dataSet(response)
}

useEffect(() => {
  fetchMyAPI();
}, []);

22 react hooks 的原理是什么

23 redux 解决什么问题，还有什么其他方案

24 为什么不能在表达式里面定义 react hooks

25 redux 和 mobx 有什么不同

26 关于 React hooks 的 caputre value，以下输出多少

更多描述:

function App() {
  const [count, setCount] = useState(0);
  const incr = () => {
    setTimeout(() => {
      setCount(count + 1);
    }, 3000);
  };
  return <h1 onClick={incr}>{count}</h1>;
}

当连续点击 10 次时，会输出多少

27 在 React 项目中 immutable 是优化性能的

28 在 redux 中如何发送请求

29 在 redux 中如何写一个记录状态变更的日志插件

30 在 setState 时发生了什么

31 如何设计一个UI组件库

32 React 中的 dom diff 算法如何从 O(n3) 优化到 O(n) 的

33 在 React 应用中如何排查性能问题

34 React 17.0 有什么变化

35 现代框架如 React、Vue 相比原生开发有什么优势

36 React/Vue 中的 router 实现原理如何

37 在 SSR 项目中如何判断当前环境时服务器端还是浏览器端

38 React.setState 是同步还是异步的

39 什么是服务器渲染 (SSR)

40 在 React 中如何实现代码分割 (code splitting)

41 在 React 中如何做好性能优化

42 在 React 中发现状态更新时卡顿，此时应该如何定位及优化

43 当多次重复点击按钮时，以下三个 Heading 是如何渲染的

更多描述:

import React, { memo, useMemo, useState } from "react";

const Heading = memo(({ style, title }) => {
  console.log("Rendered:", title);

  return <h1 style={style}>{title}</h1>;
});

export default function App() {
  const [count, setCount] = useState(0);

  const normalStyle = {
    backgroundColor: "teal",
    color: "white",
  };

  const memoizedStyle = useMemo(() => {
    return {
      backgroundColor: "red",
      color: "white",
    };
  }, []);

  return (
    <>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        Increment {count}
      </button>
      <Heading style={memoizedStyle} title="Memoized" />
      <Heading style={normalStyle} title="Normal" />
      <Heading title="React.memo Normal" />
    </>
  );
}

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2021-04-30，如有侵权请联系 cloudcommunity@tencent.com 删除

react

本文分享自全栈成长之路微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度