# 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. 如何修复下列语法错误？

const person =(firstName, lastName) =>
{
  first: firstName,
  last: lastName
}
console.log(person("Jill", "Wilson"))

A. 给Object包裹括号
B. 在另一个文件调用这个函数
C. 在第一个花括号处添加 return 声明
D. 使用Array代替Object

4. 如果你看到如下导入，这个组件使用了什么状态管理？

import React, {useState} from 'react';

A. React hook (钩子函数)
B. stateful components (状态组件)
C. math
D. class components (类组件)

5. 下列打印的结果是？

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`代表什么？

<Route path="/:id" />

A. route modal
B. route parameter
C. route splitter
D. route link

9. 如下代码会是由什么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？

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. 下列代码不渲染，该如何修复？

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的值为？

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