"sidebar" />

它转换为以下JS代码：

React.createElement(  'div',  {className: 'sidebar'})

进一步阅读

JSX 简介https://zh-hans.reactjs.org/docs/introducing-jsx.html深入理解 JSXhttps://zh-hans.reactjs.org/docs/jsx-in-depth.html

3. 类组件和函数式组件有何不同？

解答

在 React 16.8版本(引入钩子)之前，使用基于类的组件来创建需要维护内部状态或利用生命周期方法的组件(即componentDidMount和shouldComponentUpdate)。基于类的组件是 ES6 类，它扩展了 React 的 Component 类，并且至少实现了render()方法。

类组件：

class Welcome extends React.Component {  render() {    return <h1>Hello, {this.props.name}h1>;  }}

函数组件是无状态的(同样，小于 React 16.8版本)，并返回要呈现的输出。它们渲染 UI 的首选只依赖于属性，因为它们比基于类的组件更简单、更具性能。

函数组件：

function Welcome(props) {  return <h1>Hello, {props.name}h1>;}

注意：在 React 16.8版本中引入钩子意味着这些区别不再适用(请参阅14和15题)。

进一步阅读

React 中对比函数式组件和类组件https://www.freecodecamp.org/news/functional-components-vs-class-components-in-react/React 中函数与类组件比对https://medium.com/@Zwenza/functional-vs-class-components-in-react-231e3fbd7108

4. React 中 keys 的作用是什么？

Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。

在 React 中渲染集合时，向每个重复的元素添加关键字对于帮助React跟踪元素与数据之间的关联非常重要。key 应该是唯一ID，最好是 UUID 或收集项中的其他唯一字符串：


  {todos.map((todo) =><li key={todo.id}>
      {todo.text}li>
  )};ul>

在集合中添加和删除项目时，不使用键或将索引用作键会导致奇怪的行为。

进一步阅读

列表 & keyhttps://zh-hans.reactjs.org/docs/lists-and-keys.html#keysReact 中 key 属性https://kentcdodds.com/blog/understanding-reacts-key-prop

5. 状态(state)和属性(props)有何不同？

解答

props 是从父组件传递到组件的数据。它们不应该被改变，而应该只显示或用于计算其他值。状态是组件的内部数据，可以在组件的生存期内修改，并在重新呈现之间进行维护。

进一步阅读

深入理解 Props & Statehttps://zhuanlan.zhihu.com/p/44784850

6. 为什么调用 setState 而不是直接改变 state？

解答

如果您尝试直接改变组件的状态，React 将无法得知它需要重新渲染组件。通过使用setState()方法，React 可以更新组件的UI。

另外，您还可以谈谈如何不保证状态更新是同步的。如果需要基于另一个状态(或属性)更新组件的状态，请向setState()传递一个函数，该函数将 state 和 props 作为其两个参数：

this.setState((state, props) => ({  counter: state.counter + props.increment}));

进一步阅读

正确地使用 Statehttps://zh-hans.reactjs.org/docs/state-and-lifecycle.html#using-state-correctly

7. 如何限制作为 props 传递的值类型，使其成为必需的？

解答

为了对组件的 props 进行类型检查，您可以使用prop-types包(以前作为React的一部分包含在15.5版本之前)来声明期望的值类型以及是否需要该prop：

import PropTypes from 'prop-types';

class Greeting extends React.Component {  render() {    return (      <h1>Hello, {this.props.name}h1>    );  }}

Greeting.propTypes = {  name: PropTypes.string};

进一步阅读

使用 PropTypes 进行类型检查https://zh-hans.reactjs.org/docs/typechecking-with-proptypes.html

8. 什么是 prop drilling，如何避免它？

Prop drilling(也叫线程)是当您需要将数据从父组件向下传递到层次结构中较低的组件时所发生的事情，“drilling”通过除了传递它们之外不需要 props 本身的其他组件。

有时，可以通过重构组件，避免过早将组件分解为较小的组件以及将公共状态保持在最接近的公共父级中来避免进行钻探。如果您需要在组件树中深处/彼此之间的组件之间共享状态，则可以使用 React 的 Context API 或专用的状态管理库(例如 Redux)。

进一步阅读

prop drilling 详解https://kentcdodds.com/blog/prop-drilling

9. React context 是什么？

解答

React 提供了上下文API，以解决应用内多个组件之间共享状态的问题。在引入上下文之前，唯一的选择是引入一个单独的状态管理库，例如 Redux。但是，许多开发人员认为 Redux 引入了许多不必要的复杂性，尤其是对于较小的应用程序。

进一步阅读

React 文档中的 Contexthttps://zh-hans.reactjs.org/docs/context.html如何用 React Hooks 和 Context API 替换 Reduxhttps://www.sitepoint.com/replace-redux-react-hooks-context-api/

10. Redux 是什么？

解答

Redux 是 React 的第三方状态管理库，创建于上下文API存在之前。它基于一个称为存储的状态容器的概念，组件可以从该容器中作为 props 接收数据。更新存储区的唯一方法是向存储区发送一个操作，该操作被传递到一个reducer中。reducer接收操作和当前状态，并返回一个新状态，触发订阅的组件重新渲染。

进一步阅读

Redux 入门https://redux.js.org/introduction/getting-started深入研究 Reduxhttps://www.sitepoint.com/redux-deep-dive/

11. 样式化 React 应用程序的最常见方法是什么？

解答

有多种方法可用于对 React 组件进行样式设置，每种方法各有利弊。要提到的主要是：

内联样式：适用于原型设计，但有局限性(例如，无伪类样式)基于类的CSS样式：比内联样式更高效，并且对 React 刚接触的开发人员来说是熟悉的JS样式中的CSS：有许多库允许将样式在组件内声明为 JavaScript，从而将样式更像代码。

进一步阅读

如何设置 React 组件的样式https://www.sitepoint.com/react-components-styling-options/

12. 受控组件和非受控组件有什么区别？

解答

在 HTML 文档中，许多表单元素(例如、、)都保持自己的状态。不受控制的组件将 DOM 视为这些输入状态的真实源。在受控组件中，内部状态用于跟踪元素值。当输入值改变时，React 会重新渲染输入。

在与非 React 代码集成时，不受控制的组件非常有用(例如，如果您需要支持某种 jQuery 表单插件)。

进一步阅读

受控组件https://zh-hans.reactjs.org/docs/forms.html#controlled-components非受控组件https://zh-hans.reactjs.org/docs/uncontrolled-components.html受控输入与非受控输入https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/

13. 生命周期方法是什么？

解答

基于类的组件可以声明在其生命周期中某些特定时刻调用的特殊方法，例如何时将其装入(渲染到 DOM 中)以及何时将其卸载。例如，它们对于设置和拆除组件可能需要的东西，设置计时器或绑定到浏览器事件很有用。

可以在组件中实现以下生命周期方法：

componentWillMount：在创建组件之后但在将其渲染到DOM中之前调用componentDidMount：在第一个渲染之后调用；组件的DOM元素现在可用componentWillReceiveProps：当属性更新时调用shouldComponentUpdate：当收到新props时，此方法可以防止重新渲染以优化性能componentWillUpdate：在收到新的props并且ComponentUpdate返回true时调用componentDidUpdate：在组件更新后调用componentWillUnmount：在组件从DOM中移除之前调用，允许您清理事件侦听器之类的内容。

在处理函数式组件时，可以使用 useEffect 钩子来复制生命周期行为。

进一步阅读

React 生命周期方法示意图https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/组件的生命周期https://zh-hans.reactjs.org/docs/react-component.html#the-component-lifecycle

14. React hooks 是什么？

解答

Hooks 钩子是 React 试图将基于类的组件(即内部状态和生命周期方法)的优势引入函数式组件的尝试。

进一步阅读

5分钟内学会 React hookshttps://www.freecodecamp.org/news/react-hooks-in-5-minutes/React Hooks: 如何快速开始并构建https://www.sitepoint.com/react-hooks/

15. React hooks 有什么优势？

解答

向 React 引入钩子有几个明显的好处：

不需要基于类的组件、生命周期钩子和 this 关键字通过将公共函数抽象到定制钩子中，使重用逻辑变得更容易通过能够将逻辑与组件本身分离出来，使代码更具可读性和可测试性

进一步阅读

React Hooks 的好处https://www.darrenlester.com/blog/benefits-of-react-hooksReact Hooks 的优点与旧的可重用逻辑方法的比较https://medium.com/@mateuszroth/react-hooks-advantages-and-comparison-to-older-reusable-logic-approaches-in-short-f424c9899cb5

16. 为什么虚拟 dom 会提高性能?

解答

虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存，利用 dom diff 算法避免了没有必要的 dom 操作，从而提高性能。用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异把 2 所记录的差异应用到步骤 1 所构建的真正的 DOM 树上，视图就更新了。

进一步阅读

如何理解虚拟 DOMhttps://www.zhihu.com/question/29504639?sort=created

17. React diff 原理

解答

把树形结构按照层级分解，只比较同级元素。列表结构的每个单元添加唯一的 key 属性，方便比较。React 只会匹配相同 class 的 component(这里面的 class 指的是组件的名字)合并操作，调用 component 的 setState 方法的时候, React 将其标记为 dirty 到每一个事件循环结束, React 检查所有标记 dirty 的 component 重新绘制.选择性子树渲染。开发人员可以重写 shouldComponentUpdate 提高 diff 的性能。

进一步阅读

不可思议的 React diffhttps://zhuanlan.zhihu.com/p/20346379手把手教你学会 React diff 原理https://zhuanlan.zhihu.com/p/140489744

18. React 中 refs 的作用是什么？

解答

Refs 是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄。

我们可以为元素添加 ref 属性然后在回调函数中接受该元素在 DOM 树中的句柄，该值会作为回调函数的第一个参数返回：

class CustomForm extends Component {  handleSubmit = () => {    console.log("Input Value: ", this.input.value)  }  render () {    return (      <form onSubmit={this.handleSubmit}><inputtype='text'ref={(input) => this.input = input} /><button type='submit'>Submitbutton>form>    )  }}

上述代码中的 input 域包含了一个 ref 属性，该属性声明的回调函数会接收 input 对应的 DOM 元素，我们将其绑定到 this 指针以便在其他的类函数中使用。

另外值得一提的是，refs 并不是类组件的专属，函数式组件同样能够利用闭包暂存其值：

function CustomForm ({handleSubmit}) {  let inputElement  return (    <form onSubmit={() => handleSubmit(inputElement.value)}><inputtype='text'ref={(input) => inputElement = input} /><button type='submit'>Submitbutton>form>  )}

进一步阅读

何时使用 Refshttps://zh-hans.reactjs.org/docs/refs-and-the-dom.html#gatsby-focus-wrapper

总结

虽然这并不是一个全面的清单(React 是不断发展的)，但这些问题涉及很多方面。了解这些问题将使您对库及其最新的一些更改有很好的了解。建议进一步阅读将有助于巩固你的理解能力，这样你就能展示由浅入深的知识。

希望能对 React 初学者或者面试者有所帮助，祝你好运！

参考资料：

15 React Interview Questions with Solutions

https://www.sitepoint.com/react-interview-questions-solutions/

❤️ 爱心三连击

如果觉得这篇文章还不错，来个分享、点赞、在看三连吧，让更多的人也看到～关注公众号「懒人码农」，定期为你推送前端精选优质好文。如有前端技术问题，请加我微信「lazycode520」，小编拉您进前端技术交流群。