面向初学者和新手的 2023 年基本 React 面试问题
React 的主要特点是什么？
React 的主要特点是：
- 考虑到 RealDOM 操作的成本很高，它使用 VirtualDOM 而不是 RealDOM。
- 它支持服务器端渲染。
- 它遵循单向数据流或数据绑定。
- 它使用可重用/可组合的 UI 组件来开发视图。
如何将参数传递给事件处理程序或回调？
您可以使用箭头函数环绕事件处理程序并传递参数：
button onClick={() => this.handleClick(id)} />
这相当于调用 .bind：
也可以看看:
<button onClick={this.handleClick.bind(this, id)}/>
除了这两种方法，您还可以将参数传递给定义为箭头函数的函数
handleClick = (id) => () => {
console.log("Hello, your ticket number is", id)
};
<button onClick={this.handleClick.bind(this, id)} />
<button onClick={this.handleClick(id)} />
什么是内联条件表达式？
您可以使用if 语句或JS 提供的三元表达式来有条件地呈现表达式。除了这些方法之外，您还可以通过将表达式用大括号括起来然后跟上 JS 逻辑运算符 && 来在 JSX 中嵌入任何表达式。
<h1>Hello!</h1>
{
messages.length > 0 && !isLogin?
<h2>
You have {messages.length} unread messages.
</h2> :
<h2>
You don't have unread messages.
</h2>
}
refs有什么用？
ref用于返回对元素的引用。在大多数情况下应该避免使用它们，但是，当您需要直接访问 DOM 元素或组件实例时，它们会很有用。
如何创建参考？
有两种方法：
这是最近添加的方法。Refs是使用 React.createRef() 方法创建的，并通过 ref 属性附加到 React 元素。为了在整个组件中使用ref ，只需将ref分配给构造函数中的实例属性。
class MyComponent extends React.Component {
constructor(props) {
super(props)
this.myRef = React.createRef()
}
render() {
return <div ref={this.myRef} />
}
}
无论 React 版本如何，您都可以使用 Ref 回调方法。例如，搜索栏组件的输入元素被访问如下，
class SearchBar extends Component {
constructor(props) {
super(props);
this.txtSearch = null;
this.state = { term: '' };
this.setInputSearchRef = e => {
this.txtSearch = e;
}
}
onInputChange(event) {
this.setState({ term: this.txtSearch.value
});
} render() {
return (
<input
value={this.state.term}
onChange={this.onInputChange.bind(this)}
ref={this.setInputSearchRef}
/>
); }
}
您还可以在使用闭包的函数组件中使用refs。注意：您也可以使用内联 ref 回调，即使这不是推荐的方法
解释前向引用？
Ref 转发是一项功能，它允许某些组件获取它们收到的ref，并将其进一步传递给子组件。
const ButtonElement = React.forwardRef((props,
ref) => (
<button ref={ref} className="CustomButton">
{props.children}
</button>
));
// Create ref to the DOM button:
const ref = React.createRef();
<ButtonElement ref={ref}>{'Forward Ref'}
</ButtonElement>
哪个是回调引用和 findDOMNode() 中的首选选项？
最好在 API上使用回调引用findDOMNode()。因为findDOMNode()阻止了 React 将来的某些改进。
使用findDOMNode的传统方法：
class MyComponent extends Component {
componentDidMount() {
findDOMNode(this).scrollIntoView()
}
render() {
return <div />
}
}
推荐的方法是：
class MyComponent extends Component {
constructor(props){
super(props);
this.node = createRef();
}
componentDidMount() {
this.node.current.scrollIntoView();
} render() {
return <div ref={this.node} />
}
}
为什么 String Refs 是遗留的？
如果您之前使用过 React，您可能熟悉一个旧的 API，其中 ref 属性是一个字符串，例如 ，并且 DOM 节点被访问为 。我们反对它，因为字符串引用有以下问题，并且被认为是遗留的。React v16 中删除了字符串引用。
- 它们强制 React 跟踪当前正在执行的组件。这是有问题的，因为它使反应模块有状态，因此当反应模块在包中复制时会导致奇怪的错误。
- 它们是不可组合的——如果库在传递的孩子上放置一个 ref，用户不能在其上放置另一个 ref。回调引用是完全可组合的。
- 它们不适用于像 Flow 这样的静态分析。Flow 无法猜测框架使字符串 ref 出现在 this.refs 上的魔法，以及它的类型（可能不同）。回调引用对静态分析更友好。
它不像大多数人所期望的那样使用“渲染回调”模式（例如）
class MyComponent extends Component {
renderRow = (index) => {
// This won't work. Ref will get attached to
DataTable rather than MyComponent:
return <input ref={'input-' + index} />;
// This would work though! Callback refs are
awesome.
return <input ref={input => this['input-' +
index] = input} />;
}
render() {
return <DataTable data={this.props.data}
renderRow={this.renderRow} />
}
}
什么是虚拟 DOM？
Virtual DOM (VDOM) 是Real DOM的内存表示。UI 的表示保存在内存中并与“真实”DOM 同步。这是在调用渲染函数和在屏幕上显示元素之间发生的一个步骤。这整个过程称为和解。
Shadow DOM 和 Virtual DOM 有什么区别？
Shadow DOM是一种浏览器技术，主要设计用于web 组件中的范围变量和 CSS 。虚拟DOM是一个概念，由库在浏览器 API 之上用 JavaScript 实现。
希望你学到一些重要的东西。如果您喜欢这篇文章，请分享给有需要的人。
