收集了很多关于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 各是什么，有什么区别
代码语言：javascript复制React.cloneElement(
element,
[props],
[...children]
)
React.createElement(
type,
[props],
[...children]
)
直接上 API，很容易得出结论：首参不一样。这也是他们的最大区别：
cloneElement，根据 Element 生成新的 ElementcreateElement，根据 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?
参考: 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
代码语言：javascript复制<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
代码语言：javascript复制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」
代码语言：javascript复制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，以下输出多少
更多描述:
代码语言：javascript复制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 是如何渲染的
更多描述:
代码语言：javascript复制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" />
</>
);
}
