OTT 前端技术

ReactJS 面试题一

2024-04-07 10:36:39

阅读：723

ReactJS 面试题一

为了成为一名优秀的前端开发人员并获得理想的工作，不得不进行大量学习、练习。但有时会发生这样的情况，尽管我们有专业知识，但总有一些事情可能会忘记或没有考虑到。所以我们需要将一些问题记录下来

什么是 JSX

JSX 是 ECMAScript 的类似 XML 的语法扩展，或者 s 说是一种创建 React UI 的方法，它使用 HTML 语法但添加了 JavaScript 的功能和动态属性。简而言之，它是用于构建 React 应用程序的 JS + HTML

当我们在 JSX 中写一个 div 标签是，则意味着 React.createElement()。当然，我们可以手动创建 UI 并调用 React.createElement()，但是随着元素数量的增加，整个结构变得越来越难以阅读和使用。
浏览器无法理解 JSX 本身，这就是为什么我们必须使用 Babel 将其编译，它将类似 HTML 的代码转换为 JS 函数调用

  class App extends React.Component {
    render() {
      return <div>{"Welcome to React world"}</div>;
    }
  }

什么是虚拟 DOM

Virtual DOM (VDOM) 是 Real DOM 的内存驻留副本。UI 的内存版本与“实际”DOM 同步。这是在调用渲染函数和在屏幕上显示项目之间发生的一个阶段。这一过程也叫协调(reconciler)，这种方式使我们可以声明式的渲染相应的 ui 状态，让我们从 DOM 操作中解放出来

它分三个步骤工作：

当数据发生变化时，整个 UI 将在 VDOM 中重新渲染
计算新旧 DOM 表示之间的差异，也就我我们通常说的 diff
计算完成，真实的 DOM 会随着实际的变化而更新

React 中的 props 是什么

Props 是 React 组件的输入。它们是具有一组值的单个值和对象。使用接近 HTML 标记属性的命名模式，提供给 ReactJS 组件。也是从父组件传输数据到子组件的方式

ReactJS props 的主要目的是确保这样的功能：

将自定义数据传递给必要的组件
触发状态的变化
在组件内部使用 render()方法中调用 this.props.someData

在类组件中

  import React, { Component } from "react";

  class ChildComponent extends Component {
    render() {
      return (
        <div>
          {this.props.name}
          {this.props.age}
        </div>
      );
    }
  }

  class ParentComponent extends Component {
    render() {
      return (
        <div>
          <ChildComponent name="riki" age="18"></ChildComponent>
          <ChildComponent name="tiffany" age="16"></ChildComponent>
        </div>
      );
    }
  }

在函数组件中

  import React, { Component } from "react";

  function ChildComponent (props) {
    return (
      <div>
        {props.name}
        {props.age}
      </div>
    )
  }

  function ParentComponent () {
    return (
      <div>
        <ChildComponent name="riki" age="18"></ChildComponent>
        <ChildComponent name="tiffany" age="16"></ChildComponent>
      </div>
    )
  }

如何在 React 中创建 refs

通常，我们使用React.createRef()方法创建ref。然后通过ref属性附加到 React 元素。如果你想在整个组件中使用 ref，只需将所需的 ref 分配给实例属性即可

就像这样

  class MyComponent extends React.Component {
    constructor(props) {
      super(props);
      this.myRef = React.createRef();
    }
    render() {
      return <div ref={this.myRef} />;
    }
  }

除此之外，我们还可以使用另一种设置 refs 的方式，称为"回调refs"

  class MyComponent extends React.Component {
    constructor(props) {
      super(props);
      this.textInput = null;
    }

    componentDidMount() {
      this.focusTextInput();
    }

    setTextInputRef = element => {
      this.textInput = element;
    };
    // 组件挂载后，让文本框自动获得焦点
    focusTextInput = () => {
      if (this.textInput) this.textInput.focus();
    };

    render() {
      // 使用 `ref` 的回调函数将 text 输入框 DOM 节点的引用存储到实例
      return (
        <div>
          <input
            type="text"
            ref={this.setTextInputRef}
          />
        </div>
      );
    }
  }

ReactJS 中的 refs 用于什么

Refs 其实是一个降级方案，允许访问DOM元素、组件实例。我们只需要向元素添加 ref 属性并设置一个回调函数，该回调函数将底层DOM元素或挂载组件的实例作为其第一个参数返回

一个常见的误解是必须使用类组件才能使用 refs；默认情况下确实是这样。但是，当你使用回调ref时，您将能够将 refs 与函数组件一起使用

  function CustomTextInput(props) {
    return (
      <div>
        <input ref={props.inputRef} />
      </div>
    );
  }
  // 我们可以很轻松的拿子组件的ref
  class Parent extends React.Component {
    render() {
      return (
        <CustomTextInput
          inputRef={el => this.inputElement = el}
        />
      );
    }
  }

React 中的状态是什么

组件的状态是一个对象，其中包含在组件生命周期中可能发生变化的信息。我们应该不断努力简化我们的状态并减少有状态组件的数量

State 类似于 props，因为它是私有的并且完全由组件管理，但它对另一个组件不可用，除非组件的所有者希望暴露它

state 和 props 的区别

状态是可以在 React 组件中读取和更新的值，而 props 是可以传递给 React 组件的值，并且可以是只读的。这意味着我们不应该更新props。props就像保留在组件之外的函数的参数，而state是随时间改变而改变并在组件内定义的值

对 state 和 props 的更改是类似的，因为它们会导致它们所在的组件重新渲染

如何在 JSX 回调中绑定方法或事件处理程序

有三个选项可以做到这一点

在构造函数内部绑定this。JS 类中的方法并没有真正绑定this。对于声明为类方法的组件事件处理函数也是如此。所以，我们在构造函数中绑定它们

  class Foo extends React.Component {
    constructor(props) {
      super(props)
      this.handleClick = this.handleClick.bind(this)
    }
    handleClick () {
      console.log('click me')
    }
    render () {
      return <div onClick={this.handleClick}>click me</div>
    }
  }

如果您不想使用绑定方法，公共类字段语法糖将是一个不错的选择，可以帮助您适当地绑定回调

  class Foo extends React.Component {
    constructor(props) {
      super(props)
    }
    handleClick = ()  => {
      console.log('click me')
    }
    render () {
      return <button onClick={this.handleClick}>click me</button>
    }
  }

回调中直接使用箭头函数,也是一个不错的选择

  class Foo extends React.Component {
    constructor(props) {
      super(props)
    }
    handleClick () {
      console.log('click me')
    }
    render () {
      return <div onClick={(e) => this.handleClick(e)}>click me</div>
    }
  }

但是您必须考虑到，当回调作为props传递给子组件时，可能会导致额外的重新渲染。所以在这种情况下，为了避免一些性能问题，最好使用.bind()或公共类字段语法糖

React 中的 useState() 是什么

React 提供了两种组件：类组件和函数式组件。类组件是具有状态和生命周期方法的组件，而函数组件则没有。useState Hook 允许在函数组件中使用状态。因此，useState() 本质上是将本地状态封装在某些函数组件中提供可能性

useState() 钩子是一个自定义函数，它接受初始化状态作为参数并返回一个包含两个元素的数组。UseState() 仅封装来自状态的单个值，意味着你有许多状态，需要多次调用进行状态拆分

在下面的示例中，您可以看到它是如何应用的

  import React, { useState } from 'react'

  export default const App = (props) => {
    const [count, setCount] = useState(0)

    const handleClick = () => {
      setCount(count++)
    }

    return (
      <div>
        <p>{count}</p>
        <button onClick={handleClick}>click me</button>
      </div>
    )
  }

useEffect 钩子是做什么用

简而言之 useEffect 钩子对于 React 组件中副作用的性能是必要的。至于副作用，它们是在 React 应用程序上下文之外的操作

简单的两个需求，向外部 API 占点发送 GET 或 POST 请求，或调用浏览器 API window.navigator、document.getElementById()

这些操作不能直接在 React 组件的主体内执行，需要一个触发时机useEffect。useEffect()接受一个用于执行副作用的函数，以及一个标识该方法所依赖的任何外部值的依赖项数组。如果依赖数组中的任何值发生变化，将再次调用影响方法

评论:

评论昵称：评论内容：