20 个 React 基本问题助你学习

学习 React 在最初几周可能会很有挑战性。要了解如何使用 props，何时使用类组件或函数组件。我仍在学习 React，我发现每周问自己一些基本的初学者问题很有帮助。这不仅能帮助我理解基础知识，而且重复学习还能让我更容易回忆。这周我使用了一些我遇到的最喜欢的资源。我会发布这些问题和答案，以及我获取它们的来源链接。目前我不会深入研究 redux 或 hooks，只讨论一些基本的常见 React 问题。随着我学习的深入，我一定会写第二部分，其中包含更复杂的问题。
如果你也在学习 React，你可以每周五问自己这些问题，随着时间的推移，你会更容易回忆起答案。不要等到准备面试时才匆匆浏览它们。

React 问题

1）什么是 React

• 前端 Javascript 库
• 由 Facebook 于 2011 年开发
• 遵循基于组件的方法
• 它允许您创建可重复使用的 UI 组件
• 用于开发复杂、交互式的 Web 和移动 UI
• 2015 年开源，拥有强大的基础和庞大的社区。

✨来源链接

2）React 的特性

• 使用虚拟 Dom
• 是否服务器端渲染
• 遵循单向数据流，即单向数据绑定。React 组件之间的数据流是单向的（仅从父组件到子组件）。
• 使用可重复使用/可组合的 UI 组件来开发视图。

✨来源链接 - Edureka

3）React 的优缺点

优势

• 很容易知道组件是如何渲染的，只需查看渲染函数即可。
• JSX 使组件代码更易于阅读。此外，它还能轻松查看组件的布局以及组件之间的连接/组合方式。
• 您可以在服务器端渲染 React。
• 它很容易测试，并且您还可以集成一些像jest这样的工具。
• 它确保了可读性并使可维护性更容易。
• 您可以将 React 与任何框架（Backbone.js、Angular.js）一起使用，因为它只是一个视图层。

缺点

• 它只是一个视图层，您仍然需要插入用于 Ajax 请求、事件等的代码。
• 图书馆本身相当大。
• 学习曲线可能很陡峭。

✨来源链接 - Stackoverflow

4）什么是 JSX

• JSX 代表 Javascript XML 可扩展标记语言。
• 利用类似 HTML 的模板语法来发挥 Javascript 的表现力。
• 使 HTML 易于理解。
• 它很强大
• 提升 JS 性能。
• JSX 表达式必须只有最外层元素。

✨来源链接 - Edureka

5）什么是虚拟DOM

虚拟 DOM (VDOM) 是一种编程概念，其中 UI 的理想或“虚拟”表示保存在内存中，并通过诸如 ReactDOM 之类的库与“真实” DOM 同步。此过程称为协调。

✨来源 - React 文档

6）虚拟Dom如何工作？

• 每当任何底层数据发生变化时，整个 UI 都会以虚拟 Dom 表示形式重新渲染。
• 然后计算先前的 DOM 表示和新的 DOM 表示之间的差异。
• 一旦计算完成，真实的 DOM 将仅更新实际发生变化的内容。

✨来源链接 - Edureka

7）虚拟 DOM 与真实 DOM 的区别

✨来源链接 - Edureka

8）为什么浏览器无法读取 JSX

• JSX 不是常规的 JavaScript
• 浏览器只能读取 Javascript 对象。
• JSX 文件在到达浏览器之前通过 JSX Transformer 链接 Babel 转换为 JS 对象。

✨来源链接 - Edureka

9）React 与 Angular 有何不同？

✨来源链接 - Edureka

10）“在 React 中一切都是组件”，解释一下？

• 首先，组件是 React 用户界面的构建块。
• 组件可让您将 UI 拆分为独立的、可重复使用的部分，并单独考虑每个部分。
• 从概念上讲，组件就像 JavaScript 函数。它们接受任意输入（称为“props”），并返回描述屏幕上应显示内容的 React 元素。

✨来源 - React 文档

11）解释渲染函数的用途

• 渲染函数用于更新用户界面
• 它返回一个单独的 React 元素，它是原生 DOM 组件的表示。
• 要将 React 元素渲染到根 DOM 节点，请将两者都传递给 ReactDOM.render()

const title = <h1>Hello, world</h1>;
ReactDOM.render(title, document.getElementById('root'));

✨源链接 - React 文档

12）React 中的 props 是什么

• Props 代表组件的属性。
• 是纯粹的，即不可变的。
• 始终从父组件传递到子组件。
• 用于呈现动态数据

✨来源链接 - Edureka

13）React 中的状态是什么

• State 是 React 中的内置对象，可帮助组件创建和管理其数据。
• 确定组件的渲染和行为。
• 创建动态和交互式组件
• 可以通过 this.state() 访问
• 可以使用 this.setState() 更新状态

✨来源链接 - Edureka

14）React 中的事件是什么

• 事件是特定动作（例如鼠标点击、鼠标悬停、键盘按下等）触发的反应的结果。
• React 中的事件类似于原始 Javascript 事件。

15）在 React 中模块化代码

• 这只是意味着将您的代码放入独立的模块或文件中。
• 您可以使用导入和导出方法并使用来自不同组件的组件。

16）受控组件和非受控组件之间的区别

✨来源链接 - Edureka

17）什么是高阶组件？

• 包装其他组件的自定义组件。
• 它们接受动态提供的子组件。
• 是纯函数。

✨来源链接 - Edureka

18）React 中的键有什么意义？

• 用于识别唯一的虚拟 DOM 元素及其驱动 UI 的相应数据。
• 通过回收现有的 DOM 元素帮助 React 优化渲染。
• 键必须是唯一的数字或字符串。
• 应用程序的性能提高。

✨来源链接 - Edureka

19）如何使用 React 标签元素

您不需要for=""像在 HTML 中那样使用htmlFor=""属性。

<label htmlFor = {'name'}> </label>
<input type={'text} id={'name'}/> 

20）为什么在 React 中使用箭头函数

• 当你希望 this 引用父组件时，箭头函数很有用。
• 箭头函数没有它自己的this。
• this将从其封闭范围继承。

综上所述

我把找到问题和答案的资源链接了起来。你可以用它们来更深入地理解你第一次不明白或答不出来的问题。坚持每天问自己3个问题，看看你的学习进度如何。你越能不用谷歌搜索就能详细解释这些问题，你的水平就越高。

如果你觉得这篇文章有用，请分享给你的同行或学习 React JS 的初学者，或许这些问题会对他们有所帮助。你也可以请我喝杯咖啡。🙂