听说现在都考这些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

更多描述: 可以实现如下 API
message.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" />
    </>
  );
}

关注我

扫码添加我的微信，备注进群，加入高级前端进阶群

React 面试题