この記事では、react でよくある質問の分析を主に紹介します。ここをクリックして、質問の 1 つがあなたの疑問を解決するのに役立つかどうかを確認してください。今すぐこの記事を一緒に読んでみましょう
1. Reactの要素とコンポーネントの違いは何ですか？
公式 Web サイトのドキュメントでは、Element について次のように説明されています:
Elements are the smallest building blocks of React apps. An element describes what you want to see on the screen:
公式 Web サイトでは、Compent について次のように説明されています:
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.
つまり、React Element は、画面に表示されるコンテンツを記述するデータ構造であり、UI のオブジェクト表現です。 。典型的な React Element は、JSX を使用して構築され、createElement 呼び出しの組み合わせに変換された宣言的なコード部分です。 React コンポーネントは、パラメーター入力を受け取り、React 要素を返すことができる関数またはクラスです。
2、JSX
React は、JSX を使用して通常の JavaScript を置き換えます。 JSX は、XML によく似た JavaScript 構文拡張機能です。必ずしも JSX を使用する必要はありませんが、次のような利点があります:
JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。 它是类型安全的，在编译过程中就能发现错误。 使用 JSX 编写模板更加简单快速。
3. setState を呼び出した後はどうなりますか?
コード内で setState 関数を呼び出した後、React は渡されたパラメーター オブジェクトをコンポーネントの現在の状態とマージし、いわゆる調整プロセス (Reconciliation) をトリガーします。調整プロセスの後、React は比較的効率的な方法で新しい状態に基づいて React 要素ツリーを構築し、UI インターフェイス全体の再レンダリングを開始します。 React が要素ツリーを取得した後、React は新しいツリーと古いツリーの間のノードの差を自動的に計算し、その差に基づいてインターフェイスを最小化し、再レンダリングします。差分計算アルゴリズムでは、React はどの位置が変更され、どのように変更されるべきかを比較的正確に知ることができるため、完全な再レンダリングではなくオンデマンドの更新が保証されます。
4. どのような状況で機能コンポーネントの代わりにクラスコンポーネントを使用したいですか?
コンポーネントに内部状態を含める必要がある場合、またはライフサイクル関数を使用する必要がある場合はクラス コンポーネントを使用し、それ以外の場合は機能コンポーネントを使用します。
5. ライフサイクルのどの段階で AJAX リクエストを開始する必要がありますか?
次の主な理由から、AJAX リクエストをcomponentDidMount 関数に入れる必要があります:
React の次世代調整アルゴリズム Fiber はレンダリングを開始または停止することでアプリケーションのパフォーマンスを最適化し、これは、componentWillMount のトリガーの数に影響します。 ComponentWillMount ライフサイクル関数の呼び出し回数は不確実になり、React は、componentWillMount を複数回、頻繁に呼び出す可能性があります。 AJAX リクエストをcomponentWillMount 関数に入れると、明らかに複数回トリガーされることになりますが、これは当然良い選択ではありません。
AJAX リクエストをライフサイクルの他の関数に配置した場合、リクエストがコンポーネントのマウント後にのみ応答を必要とするという保証はできません。コンポーネントがマウントされる前にデータ要求が完了し、コンポーネントの状態にデータを追加するために setState 関数が呼び出された場合、アンマウントされたコンポーネントについてエラーが報告されます。この問題は、componentDidMount 関数で AJAX リクエストを行うことで効果的に回避できます。 (さらに詳しく知りたい場合は、PHP 中国語 Web サイトReact Reference Manual のコラムにアクセスして学習してください)
6. 制御コンポーネントと非制御コンポーネントの違いは何ですか?
React のコアコンポーネントの 1 つは、内部状態を維持できる自律コンポーネントですが、ネイティブ HTML フォーム要素 (input、select、textarea など) を導入する場合、すべてのデータを React コンポーネントでホストする必要がありますか? DOM要素内に保持しますか?この質問に対する答えは、制御されたコンポーネントと制御されていないコンポーネントを定義上分離することです。制御コンポーネントとは、React によって制御され、すべてのフォーム データが均一に保存されるコンポーネントを指します。つまり、React.js の <input /> 、<textarea />、<select /> などの要素の値が React.js によって制御されている場合、それは制御コンポーネントです。たとえば、次のコードでは、ユーザー名変数値は DOM 要素には格納されませんが、コンポーネント ステータス データに格納されます。ユーザー名変数の値を変更する必要がある場合は、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 は、React コンポーネントではなく DOM にフォーム データを保存します。 refs を使用して DOM 要素を操作できます:
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 から直接データを取得できるようです。ただし、実際の開発では制御されていないコンポーネントの使用は推奨しません。実際の状況では、フォームの検証、ボタンのクリックの選択的なオン/オフ、入力形式の強制など、より機能的なサポートを考慮する必要があるためです。データを React にホストすると、これらの関数を宣言的な方法でより適切に完了できるようになります。 React やその他の MVVM フレームワークを導入する本来の理由は、DOM の大量の直接操作から解放されることです。
7. shouldComponentUpdate の機能とは何ですか?なぜそれほど重要ですか?
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使用手册栏目中学习），有问题的可以在下方留言提问。
以上が反応面接ではどのような質問が行われますか?反応面接でよくある質問に対する詳細な分析と回答の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
