我的 React 面试题集锦（第二部分）
React 面试题（共 10 道）
React 面试题（共 10 道）
让我们更深入地探讨一下。
11.你对 React 中的 refs 有什么理解？
引用是一种让你获取指向已创建组件的句柄的方法。
它允许存储对组件 render() 配置函数返回的特定 React 元素或组件的引用。当你需要在组件内部引用 render() 函数中包含的某个元素或组件时，这非常有用。
<Text ref={(component)=>{this.textComponent = component}} > Here is some Text</Text>
然后，在你的代码中，你可以通过以下方式访问你的文本：
this.textComponent
这样，您就可以以面向对象的方式调用组件上的函数。
12.何时需要引用而不是 ID？
但使用 ref 属性并非总是明智之举。一般而言，最好避免使用它。React 官方文档列出了三种别无选择时可以使用 ref 属性的情况。
- 管理焦点、文本选择或媒体播放。
- 与第三方 DOM 库集成。
- 触发指令动画。
13. ref 值何时首次设置？
ref 是在第一次 render() 之后、componentDidMount() 之前设置的。
14.只有在绝对必要的情况下才使用“ref”，否则不要使用……为什么？
- 这会阻碍 Babel 内联插件的优化运行。
- 使用 refs 有点偏离 React 的思路，React 的思路是，一旦状态改变，就重新渲染所有依赖于该状态的 UI 组件。React 会确保只更新 DOM 中正确的部分，从而提高效率。你最终可能会像 jQuery 那样使用 refs，但这并非我们的目标。
15. React 中的事件是什么？
在 React 中，事件是对特定操作（例如鼠标悬停、鼠标点击、按键等）触发的响应。处理这些事件与处理 DOM 元素中的事件类似。但两者在语法上存在一些差异，例如：
- 事件名称采用驼峰式命名法，而不是全部使用小写字母。
- 事件以函数的形式传递，而不是以字符串的形式传递。
事件参数包含一组特定于某个事件的属性。每种事件类型都有其自身的属性和行为，这些属性和行为只能通过其事件处理程序访问。
16.如何在 React 中创建事件？
class Display extends React.Component({
show(evt) {
// code
},
render() {
// Render the div with an onClick prop (value is a function)
return (
<div onClick={this.show}>Click Me!</div>
);
}
});
17. React 中的合成事件是什么？
在 React 中，当你在 JSX 中指定一个事件（例如我们之前提到的 onClick 事件）时，你并非直接处理常规的 DOM 事件。相反，你处理的是一种 React 特有的事件类型，称为 SyntheticEvent。你的事件处理程序不会接收到 MouseEvent、KeyboardEvent 等类型的原生事件参数，而是始终接收到封装了浏览器原生事件的 SyntheticEvent 类型的事件参数。
18.为什么 React 有时需要指定 key 属性？
因为 React 就是这样处理最小 DOM 变化的。我们应该给每个子元素以及子元素内的每个元素都添加一个键。
19. React 中的组件有两种类型，它们是什么？
React组件可以分为两种类型：函数组件和类组件。
- 函数组件是 React 组件中最简单的形式。它是一个具有简单契约的简单函数：
const Hello = ({ name }) => (<div>Hello, {name}!</div>);
函数组件接收一个属性对象，通常名为 props。它返回类似 HTML 的内容，但实际上是 JSX。
类组件是定义 React 组件的一种更高级的方式。它也像一个接收 props 的函数，但该函数还会将一个私有的内部状态作为额外的输入，以控制返回的 JSX。
class Hello extends React.Component {
constructor(props) {
super(props);
}
render() {
return(
<div>
Hello {props}
</div>
)
}
}
18.容器和组件有什么区别？
-
组件是 React API 的一部分。组件是一个类或函数，用于描述 React UI 的某个部分。
-
容器（Container）是连接到 Redux store 的 React 组件的非正式术语。容器接收 Redux 状态更新并分发 action，它们通常不渲染 DOM 元素；它们将渲染工作委托给负责展示的子组件。
19.什么是高阶分量？举例说明。
高阶组件（HOC）是一种高级的组件逻辑复用方式。本质上，它是一种源于 React 组合特性的模式。HOC 是自定义组件，它将另一个组件包裹在其中。它们可以接受任何动态提供的子组件，但不会修改或复制其输入组件的任何行为。可以说，HOC 是“纯”组件。
//it's a function that accepts ComponentToDebug and explicitly returns a Functional component
let DebugComponent = (ComponentToDebug) => {
return (props) => (
<div className="debug">
<ComponentToDebug {...props}/>
</div>
);
};
20. HOC 可以做什么？
- 代码重用、逻辑和引导抽象
- 渲染劫持
- 状态抽象和操控
- 道具操控