面向初学者和新手的 2023 年基本 React 面试问题

作者汲古
面向初学者和新手的 2023 年基本 React 面试问题插图
来源

React 的主要特点是什么？

React 的主要特点是：

  • 考虑到 RealDOM 操作的成本很高，它使用 VirtualDOM 而不是 RealDOM。
  • 它支持服务器端渲染。
  • 它遵循单向数据流或数据绑定。
  • 它使用可重用/可组合的 UI 组件来开发视图。
面向初学者和新手的 2023 年基本 React 面试问题插图1

如何将参数传递给事件处理程序或回调？

您可以使用箭头函数环绕事件处理程序并传递参数：

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 元素或组件实例时，它们会很有用。

面向初学者和新手的 2023 年基本 React 面试问题插图2

如何创建参考？

有两种方法：

这是最近添加的方法。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 实现。

希望你学到一些重要的东西。如果您喜欢这篇文章，请分享给有需要的人。

类似文章