---
# System prepended metadata

title: React 面试题

---

# React 面试题
1. 如果只想要载入`Component`组件，下列语法正确的是？
A. `import React.Component from 'react'`
B. `import [ Component ] from 'react'`
C. `import Component from 'react'`
D. `import { Component } from 'react'`

2. 如果一个函数组件在给定相同的props下反复渲染，一个简单的性能优化方法是？
A. 使用 `React.memo` HOC
B. 使用 `useReducer` 钩子函数
C. 使用 `useMemo` 钩子函数
D. 实现 `shouldComponentUpdate` 生命周期函数

3. 如何修复下列语法错误？
```jsx=
const person =(firstName, lastName) =>
{
  first: firstName,
  last: lastName
}
console.log(person("Jill", "Wilson"))
```
A. 给Object包裹括号
B. 在另一个文件调用这个函数
C. 在第一个花括号处添加 return 声明
D. 使用Array代替Object

4. 如果你看到如下导入，这个组件使用了什么状态管理？
```jsx=
import React, {useState} from 'react';
```
A. React hook (钩子函数)
B. stateful components (状态组件)
C. math 
D. class components (类组件)

5. 下列打印的结果是？
```jsx=
const name = 'Rachel';
const age = 31;
const person = { name, age };
console.log(person);
```
A. `{{name: "Rachel", age: 31}}`
B. `{name: "Rachel", age: 31}`
C. `{person: "Rachel", person: 31}}`
D. `{person: {name: "Rachel", age: 31}}`

6. 如何将参数传递过组件树而不需要手动传递props给每一层？
A. React Send
B. React Pinpoint
C. React Router
D. React Context

7. 什么工具将`JSX`转为`createELement`调用?
A. JSX Editor
B. ReactDOM
C. Browser Buddy
D. Babel

8. 考虑React Route中，下列代码中`:id`代表什么？
```jsx=
<Route path="/:id" />
```
A. route modal
B. route parameter
C. route splitter
D. route link

9. 如下代码会是由什么JSX代码转义来的？
```jsx=
React.createElement('h1', null, "What's happening?");
```
A. `<h1 props={null}>What's happening?</h1>`
B. `<h1>What's happening?</h1>`
C. `<h1 id="component">What's happening?</h1>`
D. `<h1 id="element">What's happening?</h1>`

10. Suspense 组件需要添加什么参数，以便去展示loading状态或spin？
```jsx=
function MyComponent() {
  return (
    <Suspense>
      <div>
        <Message />
      </div>
    </Suspense>
  );
}
```
A. lazy
B. loading
C. fallback
D. spinner

11. 下列哪项属性你会用来在DOM中替代innerHTML?
A. injectHTML
B. dangerouslySetInnerHTML
C. weirdSetInnerHTML
D. strangeHTML

12. 当你使用webpack时，为什么需要用到loader?
A. 将物理文件放在一起
B. 预处理文件
C. 加载额外数据
D. 将网站加载入浏览器

13. 下列代码不渲染，该如何修复？
```jsx=
const Heading = () => (
  <h1>Hello!</h1>;
);
```
A. 增加render function
B. 将圆括号改为花括号，并在h1标签前增加return
C. 将h1标签移到其他组件
D. 将h1标签包裹在一个div标签内

14. 你将一个用于捕获组件树下Javascript错误的React组件称作什么？
A. error bosses
B. error catchers
C. error helpers
D. error boundaries


15. 下列组件, 从初始化到点击一次按钮后，一共渲染了多少次?浏览器显示的value的值为?实际myRef.current的值为？
```jsx=
export default function App() {
  const myRef = useRef(0);
  useEffect(() => {
    myRef.current += 1;
  }, []);
  const onClick = () => {
    myRef.current += 1;
  };
  return (
    <div>
      <button onClick={onClick}>add one</button>
      <div>value: {myRef.current}</div>
    </div>
  );
}
```
A. 渲染2次，value为1，myRef.current为2
B. 渲染1次，value为1，myRef.current为1
C. 渲染3次，value为2，myRef.current为2
D. 渲染1次，value为0，myRef.current为2
E. 渲染2次，value为1，myRef.current为1
F. 渲染3次，value为0，myRef.current为0