Welche Fragen werden im React-Interview gestellt? Detaillierte Analyse und Antworten auf häufig gestellte Fragen im React-Interview

In diesem Artikel wird hauptsächlich die Analyse häufiger Probleme in React vorgestellt. Klicken Sie hier, um zu sehen, ob eine der Fragen Ihnen bei der Lösung Ihrer Zweifel helfen kann. Lesen wir jetzt diesen Artikel

1 Was ist der Unterschied zwischen Element und Komponente in React?

Die offizielle Website-Dokumentation erklärt Element wie folgt:

Elements are the smallest building blocks of React apps.
An element describes what you want to see on the screen:

Die offizielle Website erklärt Compent wie folgt:

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.
Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called "props") and return React elements describing what should appear on the screen.

Mit anderen Worten: React Element beschreibt, was auf dem zu sehen ist Bildschirm. Die Datenstruktur des Inhalts ist die Objektdarstellung der Benutzeroberfläche. Ein typisches React-Element ist ein deklaratives Codestück, das mit JSX erstellt und dann in eine Kombination von createElement-Aufrufen konvertiert wird. React Component ist eine Funktion oder Klasse, die Parametereingaben empfangen und ein React Element zurückgeben kann.

2. JSX

React verwendet JSX, um reguläres JavaScript zu ersetzen. JSX ist eine JavaScript-Syntaxerweiterung, die XML sehr ähnelt. Wir müssen nicht unbedingt JSX verwenden, aber es hat die folgenden Vorteile:

JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
它是类型安全的，在编译过程中就能发现错误。
使用 JSX 编写模板更加简单快速。

3 Was passiert nach dem Aufruf von setState?

Nach dem Aufruf der setState-Funktion im Code führt React das übergebene Parameterobjekt mit dem aktuellen Status der Komponente zusammen und löst dann den sogenannten Abstimmungsprozess (Reconciliation) aus. Nach dem Abgleichsprozess erstellt React auf relativ effiziente Weise den React-Elementbaum basierend auf dem neuen Status und rendert die gesamte Benutzeroberfläche neu. Nachdem React den Elementbaum erhalten hat, berechnet React automatisch die Knotendifferenz zwischen dem neuen Baum und dem alten Baum und minimiert und rendert dann die Schnittstelle basierend auf der Differenz neu. Im Differenzberechnungsalgorithmus kann React relativ genau erkennen, welche Positionen sich geändert haben und wie sie geändert werden sollten, was Aktualisierungen bei Bedarf anstelle eines vollständigen Neu-Renderings gewährleistet.

4. Unter welchen Umständen würden Sie lieber eine Klassenkomponente anstelle einer Funktionskomponente verwenden?

Verwenden Sie Klassenkomponente, wenn die Komponente einen internen Status enthalten oder Lebenszyklusfunktionen verwenden muss, andernfalls verwenden Sie Funktionskomponenten.

5. In welchem ​​Schritt im Lebenszyklus sollten Sie eine AJAX-Anfrage initiieren?

Wir sollten die AJAX-Anfrage aus folgenden Gründen in die Funktion „componentDidMount“ einfügen:

Reacts Abstimmungsalgorithmus Fiber der nächsten Generation optimiert die Anwendungsleistung, indem er das Rendern startet oder stoppt Anzahl der Trigger von ComponentWillMount. Die Anzahl der Aufrufe der Lebenszyklusfunktion „componentWillMount“ wird unsicher und React ruft „componentWillMount“ möglicherweise mehrmals und häufig auf. Wenn wir die AJAX-Anfrage in die Funktion „componentWillMount“ einfügen, wird sie offensichtlich mehrmals ausgelöst, was natürlich keine gute Wahl ist.

Wenn wir die AJAX-Anfrage in anderen Funktionen des Lebenszyklus platzieren, können wir nicht garantieren, dass die Anfrage erst nach dem Mounten der Komponente eine Antwort erfordert. Wenn unsere Datenanforderung abgeschlossen ist, bevor die Komponente gemountet ist, und die Funktion setState aufgerufen wird, um Daten zum Komponentenstatus hinzuzufügen, wird ein Fehler für die nicht gemountete Komponente gemeldet. Durch AJAX-Anfragen in der Funktion „componentDidMount“ kann dieses Problem effektiv vermieden werden. (Wenn Sie mehr erfahren möchten, besuchen Sie die Spalte React Reference Manual der chinesischen PHP-Website, um mehr zu erfahren)

6. Was ist der Unterschied zwischen kontrollierter Komponente und unkontrollierter Komponente?

Eine der Kernkomponenten von React sind autonome Komponenten, die den internen Status beibehalten können. Wenn wir jedoch native HTML-Formularelemente (Eingabe, Auswahl, Textbereich usw.) einführen, sollten wir alle einfügen Daten in einer React-Komponente hosten oder in einem DOM-Element behalten? Die Antwort auf diese Frage ist die definitorische Trennung von kontrollierten und unkontrollierten Anteilen. Unter Controlled Component versteht man Komponenten, die von React gesteuert werden und bei denen alle Formulardaten einheitlich gespeichert werden. Mit anderen Worten: Wenn der Wert von Elementen wie <input /> 、<textarea />、<select /> in React.js von React.js gesteuert wird, handelt es sich um eine kontrollierte Komponente. Im folgenden Code wird beispielsweise der Wert der Benutzernamenvariablen nicht im DOM-Element, sondern in den Komponentenstatusdaten gespeichert. Jedes Mal, wenn wir den Wert der Benutzernamenvariablen ändern müssen, sollten wir die Funktion setState aufrufen, um ihn zu ändern.

class ControlledForm extends Component {
  state = {
    username: ''
  }
  updateUsername = (e) => {    this.setState({
      username: e.target.value,
    })
  }
  handleSubmit = () => {}
  render () {    return (
      <form onSubmit={this.handleSubmit}>
        <input          type=&#39;text&#39;
          value={this.state.username}
          onChange={this.updateUsername} />
        <button type=&#39;submit&#39;>Submit</button>
      </form>
    )
  }
}

Die unkontrollierte Komponente speichert Formulardaten im DOM, nicht in der React-Komponente. Wir können Refs verwenden, um DOM-Elemente zu manipulieren:

class UnControlledForm extends Component {
  handleSubmit = () => {
    console.log("Input Value: ", this.input.value)
  }
  render () {    return (
      <form onSubmit={this.handleSubmit}>
        <input          type=&#39;text&#39;
          ref={(input) => this.input = input} />
        <button type=&#39;submit&#39;>Submit</button>
      </form>
    )
  }
}

Unerwartet lassen sich unkontrollierte Komponenten besser implementieren. Wir können Daten direkt aus dem DOM abrufen, ohne zusätzlichen Code hinzuzufügen. Wir befürworten jedoch nicht die Verwendung unkontrollierter Komponenten in der tatsächlichen Entwicklung, da wir in tatsächlichen Situationen mehr funktionale Unterstützung wie Formularvalidierung, selektives Aktivieren oder Deaktivieren von Schaltflächenklicks und erzwungene Eingabeformate in Betracht ziehen müssen Das Hosten der Daten in React hilft uns, diese Funktionen deklarativ besser zu vervollständigen. Der ursprüngliche Grund für die Einführung von React oder anderen MVVM-Frameworks besteht darin, uns von der starken direkten Manipulation des DOM zu befreien.

7. Welche Funktion hat ShouldComponentUpdate und warum ist es so wichtig?

shouldComponentUpdate 允许我们手动地判断是否要进行组件更新，根据组件的应用场景设置函数的合理返回值能够帮我们避免不必要的更新。

8、概述下 React 中的事件处理逻辑

为了解决跨浏览器兼容性问题，React 会将浏览器原生事件（Browser Native Event）封装为合成事件（SyntheticEvent）传入设置的事件处理器中。这里的合成事件提供了与原生事件相同的接口，不过它们屏蔽了底层浏览器的细节差异，保证了行为的一致性。另外有意思的是，React 并没有直接将事件附着到子元素上，而是以单一事件监听器的方式将所有的事件发送到顶层进行处理。这样 React 在更新 DOM 的时候就不需要考虑如何去处理附着在 DOM 上的事件监听器，最终达到优化性能的目的。

9、传入 setState 函数的第二个参数的作用是什么？

该函数会在setState函数调用完成并且组件开始重渲染的时候被调用，我们可以用该函数来监听渲染是否完成：

this.setState(
  { username: 'tylermcginnis33' },  () => console.log('setState has finished and the component has re-rendered.')
)

10、组件的生命周期

组件的生命周期分成三个状态：

Mounting：已插入真实 DOM
Updating：正在被重新渲染
Unmounting：已移出真实 DOM

React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。

componentWillMount()componentDidMount()componentWillUpdate(object nextProps, object nextState)componentDidUpdate(object prevProps, object prevState)componentWillUnmount()

此外，React 还提供两种特殊状态的处理函数。

componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用

本篇文章到这就结束了（想看更多就到PHP中文网React使用手册栏目中学习），有问题的可以在下方留言提问。

Das obige ist der detaillierte Inhalt vonWelche Fragen werden im React-Interview gestellt? Detaillierte Analyse und Antworten auf häufig gestellte Fragen im React-Interview. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!