いいえ | はい |
|
質問 3: React ではなぜ ref が使用されるのですか?
テーマ: React
難易度: ⭐⭐
Refs render メソッドで作成された DOM にアクセスする方法を提供します。ノードまたは React 要素のメソッド。一般的なデータ フローでは、props が親コンポーネントと子コンポーネントが対話する唯一の方法です。子コンポーネントを変更したい場合は、新しい pros を使用して再レンダリングする必要があります。 。すべてに例外があります。場合によっては、典型的なデータ フローの外で子の変更を強制する必要があります。この場合、Refs を使用できます。
使用するコンポーネントに ref 属性を追加できます。この属性の値は、基礎となる 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>
)
}
}input 要素には、値が関数である ref 属性があることに注意してください。この関数は、入力の実際の DOM 要素を受け取り、それをインスタンスに配置して、handleSubmit 関数内でアクセスできるようにします。
refs はクラス コンポーネント内でのみ使用できるとよく誤解されますが、refs は JS のクロージャを利用することで関数コンポーネントでも使用できます。
function CustomForm ({handleSubmit}) {
let inputElement
return (
<form onSubmit={() => handleSubmit(inputElement.value)}>
<input
type='text'
ref={(input) => inputElement = input} />
<button type='submit'>Submit</button>
</form>
)
}質問 4: React でイベントを処理する方法
トピック: React
難易度: ⭐⭐
クロスを解決するには、ブラウザの問題 互換性の問題、SyntheticEvent インスタンスはイベント ハンドラー関数に渡されます、SyntheticEvent は React のクロスブラウザ ブラウザ ネイティブ イベント ラッパーであり、ブラウザ ネイティブ イベントも備えています 同じインターフェイスstopPropagation() と preventDefault()。
興味深いのは、React は実際には子ノード自体にイベントをアタッチしないことです。 React は単一のイベント リスナーを使用して、トップレベルのすべてのイベントをリッスンします。これはパフォーマンスに優れており、DOM を更新するときに React がイベント リスナーを追跡する必要がないことを意味します。
質問 5: state と props の違いは何ですか?
テーマ: React
難易度: ⭐⭐
props と state は通常の JS オブジェクトです。どちらもレンダリング出力に影響する情報を含んでいますが、コンポーネントの観点から見ると機能が異なります。つまり、
-
state はコンポーネント自身のデータ管理、自身の状態の制御であり、変数です。
-
props は、コンポーネント自身のデータ管理、自身の状態の制御です。外部から渡されるデータ。パラメータ、不変。
-
state のないものはステートレス コンポーネントと呼ばれ、state のあるものはステートフル コンポーネントと呼ばれます。 -
props をより多く使用し、 を使用し、state を少なくします。つまり、より多くのステートレス コンポーネントを作成します。
質問 6: ref の作成方法
テーマ: React
難易度: ⭐⭐
Ref は ## を使用して作成されます#React .createRef() 作成され、ref 属性を介して React 要素にアタッチされます。コンポーネントを構築するときは、通常、コンポーネント全体で参照できるように、インスタンス プロパティに Refs を割り当てます。
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
render() {
return <p ref={this.myRef} />;
}
}または次のように使用します: class UserForm extends Component {
handleSubmit = () => {
console.log("Input Value is: ", this.input.value)
}
render () {
return (
<form onSubmit={this.handleSubmit}>
<input
type='text'
ref={(input) => this.input = input} /> // Access DOM input in handle submit
<button type='submit'>Submit</button>
</form>
)
}
}
質問 7: 高次コンポーネントとは何ですか?
テーマ: React難易度: ⭐⭐
Higher Order Component (HOC) は、コンポーネントを受け入れて新しいコンポーネントを返す関数です。基本的に、これは React の合成機能から派生したパターンであり、動的に提供されるサブコンポーネントを受け入れることができますが、入力コンポーネントの動作を変更またはコピーすることはできないため、Pure Components と呼ばれます。
const EnhancedComponent = higherOrderComponent(WrappedComponent);
HOC は、次の多くのユースケースに使用できます
コードの再利用、ロジック、およびブートストラップの抽象化- レンダリング ハイジャック
- 状態の抽象化および操作
- props 処理
-
質問 8: コンストラクターで super を呼び出し、props を渡す役割は何ですか?パラメータとして?
トピック: React難易度: ⭐⭐
サブクラス コンストラクターは、super() メソッドが呼び出されるまで使用できませんthis 引用符。ES6 サブクラスにも同じことが当てはまります。 props パラメータを super() 呼び出しに渡す主な理由は、子の this.props を通じて受信する props を取得できるようにするためです。コンストラクター 。
小道具を渡す
class MyComponent extends React.Component {
constructor(props) {
super(props);
console.log(this.props); // { name: 'sudheer',age: 30 }
}
}
小道具を渡さない
class MyComponent extends React.Component {
constructor(props) {
super();
console.log(this.props); // undefined
// 但是 Props 参数仍然可用
console.log(props); // Prints { name: 'sudheer',age: 30 }
}
render() {
// 构造函数外部不受影响
console.log(this.props) // { name: 'sudheer',age: 30 }
}
}上の例から何かがわかります。 props の動作はコンストラクターの内部でのみ異なり、コンストラクターの外部では同じです。
質問 9: 制御コンポーネントとは何ですか?
テーマ: React難易度: ⭐⭐⭐
HTML では、、
