In diesem Artikel werden hauptsächlich einige häufig gestellte Interviewfragen zu Reagieren vorgestellt. Schauen wir uns nun gemeinsam diesen Artikel an.
Wenn setState aufgerufen wird, führt React als Erstes das an setState übergebene Objekt mit dem aktuellen Status der Komponente zusammen. Dies startet einen Prozess namens Versöhnung. Das ultimative Ziel des Abgleichs besteht darin, die Benutzeroberfläche auf die effizienteste Weise basierend auf diesem neuen Status zu aktualisieren.
Zu diesem Zweck erstellt React einen neuen Baum aus React-Elementen (Sie können ihn sich als Objektdarstellung der Benutzeroberfläche vorstellen).
Sobald Sie diesen Baum haben, vergleicht React diesen neuen Baum mit dem vorherigen Elementbaum ( diff ), um herauszufinden, wie sich die Benutzeroberfläche als Reaktion auf den neuen Status ändert.
Auf diese Weise kennt React die genauen Änderungen, die stattgefunden haben, und indem es weiß, was sich geändert hat, kann es den Platzbedarf der Benutzeroberfläche minimieren, indem es nur dann aktualisiert, wenn es absolut notwendig ist.
Einfach ausgedrückt beschreibt ein React-Element, was Sie auf dem Bildschirm sehen möchten. Mit anderen Worten, ein React-Element ist eine Objektdarstellung einer Benutzeroberfläche.
Eine React-Komponente ist eine Funktion oder Klasse, die Eingaben entgegennimmt und ein React-Element t zurückgibt (normalerweise über JSX, das in einen createElement-Aufruf umgewandelt wird).
Weitere Informationen finden Sie unter React Elemente vs. Reaktionskomponenten
Wenn Ihre Komponente über Status- oder Lebenszyklusmethoden verfügt, verwenden Sie Klassenkomponenten. Andernfalls verwenden Sie Funktionskomponenten
Refs sind wie eine Notluke, die Ihnen den direkten Zugriff auf DOM-Elemente oder Komponenteninstanzen ermöglicht. Um sie zu verwenden, fügen Sie der Komponente ein ref-Attribut hinzu, dessen Wert eine Rückruffunktion ist, die das zugrunde liegende DOM-Element oder eine gemountete Instanz der Komponente als erstes Argument empfängt.
class UnControlledForm extends Component {
handleSubmit = () => {
console.log("Input Value: ", this.input.value)
}
render () { return (
<form onSubmit={this.handleSubmit}>
<input type='text'
ref={(input) => this.input = input} />
<button type='submit'>Submit</button>
</form>
)
}
} Beachten Sie oben, dass unser Eingabefeld ein ref-Attribut hat, dessen Wert eine Funktion ist. Diese Funktion empfängt das eigentliche DOM-Element, das wir dann auf der Instanz platzieren, um innerhalb der Funktion handleSubmit darauf zuzugreifen. Es wird oft missverstanden, dass Sie eine Klassenkomponente verwenden müssen, um ref zu verwenden, aber ref kann auch durch Nutzung des JavaScriptclosure in mit verwendet werden
Wird zusammen mit Funktionskomponenten verwendet.
function CustomForm ({handleSubmit}) { let inputElement return ( <form onSubmit={() => handleSubmit(inputElement.value)}> <input
type='text'
ref={(input) => inputElement = input} /> <button type='submit'>Submit</button>
</form>
)
}Schlüssel helfen React dabei, den Überblick darüber zu behalten, welche Elemente geändert, hinzugefügt oder aus einer Liste entfernt wurden.
return ( <ul>
{this.state.todoItems.map(({task, uid}) => {
return <li key={uid}>{task}</li>
})} </ul>
)
}Jeder Schlüssel ist zwischen Geschwisterelementen einzigartig. Wir haben ein paar Mal über den Abgleichsprozess gesprochen, und ein Teil dieses Abgleichprozesses besteht darin, den Unterschied zwischen einem neuen Elementbaum und dem vorherigen vorzunehmen. Schlüssel macht die Arbeit mit Listen effizienter, da React Schlüssel für untergeordnete Elemente verwenden kann, um beim Vergleichen des Baums schnell zu erkennen, ob ein Element neu ist oder verschoben wurde.
und Schlüssel machen diesen Prozess nicht nur effizienter, sondern ohne Schlüssel hat React auch keine Ahnung, welcher lokale Zustand welchem Artikel auf dem Weg entspricht. Ignorieren Sie beim Zuordnen also nicht Schlüssel . (Wenn Sie mehr erfahren möchten, besuchen Sie die Spalte React Reference Manual der PHP-Website für Chinesisch, um mehr zu erfahren)
<Twitter username='tylermcginnis33'>
{(user) => user === null
? <Loading />
: <Badge info={user} />}</Twitter>import React, { Component, PropTypes } from 'react'import fetchUser from 'twitter'// fetchUser接收用户名返回 promise// 当得到 用户的数据的时候 ，返回resolve 状态class Twitter extends Component { // 在这里写下你的代码}如果你不熟悉渲染回调模式（render callback pattern），这将看起来有点奇怪。在这种模式中，一个组件接收一个函数作为它的 child。注意上面包含在 标签内的内容。 Twitter 组件的 child 是一个函数，而不是你曾经习以为常的一个组件。 这意味着在实现 Twitter 组件时，我们需要将 props.children 作为一个函数来处理。
以下是我的答案。
import React, { Component, PropTypes } from 'react'import fetchUser from 'twitter'class Twitter extends Component {
state = {
user: null,
}
static propTypes = {
username: PropTypes.string.isRequired,
}
componentDidMount () {
fetchUser(this.props.username)
.then((user) => this.setState({user}))
}
render () { return this.props.children(this.state.user)
}
}值得注意的是，正如我上面提到的，我通过调用它并传递给 user 来把 props.children 处理为为一个函数。
这种模式的好处是我们已经将我们的父组件与我们的子组件分离了。父组件管理状态，父组件的消费者可以决定以何种方式将从父级接收的参数应用于他们的 UI。
为了演示这一点，我们假设在另一个文件中，我们要渲染一个 Profile 而不是一个 Badge, ，因为我们使用渲染回调模式，所以我们可以轻松地交换 UI ，而不用改变我们对父（Twitter）组件的实现。
<Twitter username='tylermcginnis33'>
{(user) => user === null
? <Loading />
: <Profile info={user} />}</Twitter>React 的很大一部分是这样的想法，即组件负责控制和管理自己的状态。
当我们将 native HTML 表单元素（ input, select, textarea 等）投入到组合中时会发生什么？我们是否应该使用 React 作为“单一的真理来源”，就像我们习惯使用React一样？ 或者我们是否允许表单数据存在 DOM 中，就像我们习惯使用HTML表单元素一样？ 这两个问题是受控（controlled） VS 不受控制（uncontrolled）组件的核心。
受控组件是React控制的组件，也是表单数据的唯一真理来源。
如下所示， username 不存在于 DOM 中，而是以我们的组件状态存在。每当我们想要更新 username 时，我们就像以前一样调用setState。
class ControlledForm extends Component {
state = {
username: ''
}
updateUsername = (e) => { this.setState({
username: e.target.value,
})
}
handleSubmit = () => {}
render () { return (
<form onSubmit={this.handleSubmit}>
<input type='text'
value={this.state.username}
onChange={this.updateUsername} />
<button type='submit'>Submit</button>
</form>
)
}
}不受控制( uncontrolled component )的组件是您的表单数据由 DOM 处理，而不是您的 React 组件。
我们使用 refs 来完成这个。
class UnControlledForm extends Component {
handleSubmit = () => {
console.log("Input Value: ", this.input.value)
}
render () { return (
<form onSubmit={this.handleSubmit}>
<input type='text'
ref={(input) => this.input = input} />
<button type='submit'>Submit</button>
</form>
)
}
}虽然不受控制的组件通常更容易实现，因为您只需使用引用从DOM获取值，但是通常建议您通过不受控制的组件来支持受控组件。
主要原因是受控组件 支持即时字段验证 ，允许您有条件地禁用/启用按钮，强制输入格式，并且更多的是 『the React way』。
AJAX 请求应该在 componentDidMount 生命周期事件中。 有几个原因:
Fiber，是下一次实施React的和解算法，将有能力根据需要启动和停止渲染，以获得性能优势。其中一个取舍之一是 componentWillMount ，而在其他的生命周期事件中出发
AJAX 请求，将是具有 “非确定性的”。 这意味着 React 可以在需要时感觉到不同的时间开始调用 componentWillMount。这显然是AJAX请求的不好的方式。
-您不能保证在组件挂载之前，AJAX请求将无法 resolve。如果这样做，那意味着你会尝试在一个未挂载的组件上设置 StState，这不仅不会起作用，反而会对你大喊大叫。 在 componentDidMount 中执行
AJAX 将保证至少有一个要更新的组件。
上面我们讨论了 reconciliation ，什么是 React 在 setState 被调用时所做的。在生命周期方法 shouldComponentUpdate 中，允许我们选择退出某些组件（和他们的子组件）的 reconciliation 过程。
我们为什么要这样做？
如上所述，“和解（ reconciliation ）的最终目标是以最有效的方式，根据新的状态更新用户界面”。如果我们知道我们的用户界面（UI）的某一部分不会改变，那么没有理由让 React 很麻烦地试图去弄清楚它是否应该渲染。通过从 shouldComponentUpdate 返回 false，React 将假定当前组件及其所有子组件将保持与当前组件相同。
通常，您将使用Webpack的 DefinePlugin 方法将 NODE_ENV 设置为 production。这将剥离像 propType 验证和额外的警告。除此之外，还有一个好主意，可以减少你的代码，因为React使用 Uglify 的 dead-code 来消除开发代码和注释，这将大大减少你的包的大小。
为什么要使用 React.Children.map（props.children，（）=>） 而不是 props.children.map（（）=>）
因为不能保证props.children将是一个数组。
以此代码为例，
<Parent> <h1>Welcome.</h1></Parent>
在父组件内部，如果我们尝试使用 props.children.map 映射孩子，则会抛出错误，因为 props.children 是一个对象，而不是一个数组。
如果有多个子元素，React 只会使props.children成为一个数组。就像下面这样：
<Parent> <h1>Welcome.</h1> <h2>props.children will now be an array</h2></Parent>
这就是为什么你喜欢 React.Children.map ，因为它的实现考虑到 props.children 可能是一个数组或一个对象。
为了解决跨浏览器兼容性问题，您的 React 中的事件处理程序将传递 SyntheticEvent 的实例，它是 React 的浏览器本机事件的跨浏览器包装器。
这些 SyntheticEvent 与您习惯的原生事件具有相同的接口，除了它们在所有浏览器中都兼容。有趣的是，React 实际上并没有将事件附加到子节点本身。React
将使用单个事件监听器监听顶层的所有事件。这对于性能是有好处的，这也意味着在更新DOM时，React 不需要担心跟踪事件监听器。
createElement 是 JSX 被转载到的，是 React 用来创建 React Elements 的内容(一些 UI 的对象表示)cloneElement用于克隆元素并传递新的 props。他们钉住了这两个��的命名。
一个回调函数，当setState结束并 re-rendered 该组件时将被调用。一些没有说出来的东西是 setState 是 异步 的，这就是为什么它需要一个第二个回调函数。通常最好使用另一个生命周期方法，而不是依赖这个回调函数，但是很高兴知道它存在。
this.setState(
{ username: 'tylermcginnis33' }, () => console.log('setState has finished and the component has re-rendered.')
)this.setState((prevState, props) => { return {
streak: prevState.streak + props.count
}
})没毛病。但是这种写法很少被使用，并不是众所周知的，就是你也可以传递一个函数给setState，它接收到先前的状态和道具并返回一个新的状态，正如我们在上面所做的那样。它不仅没有什么问题，而且如果您根据以前的状态（state）设置状态，推荐使用这种写法。
Dieser Artikel endet hier (wenn Sie mehr lesen möchten, besuchen Sie die Spalte „React User Manual“ der PHP-Website, um mehr zu erfahren. Wenn Sie Fragen haben, können Sie unten eine Nachricht hinterlassen).
Das obige ist der detaillierte Inhalt vonWas sind die Fragen im React2018-Interview? Analyse von Standardantworten zur Reaktion auf Interviewfragen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Wie viel entspricht Snapdragon 8gen2 Apple?
Warum das Deaktivieren automatischer Updates in Windows 11 ungültig ist
Was ist Leerverkauf?
Welche Suchseiten gibt es?
GameProtectNet-Lösung
Was bedeutet Klasse in der C-Sprache?
Was bedeutet Win11-Aktivierungsstatusaktivität?
So stellen Sie den PPT-Breitbildmodus ein
