React を知ってマスターする必要がある 35 の面接の質問-jsチュートリアル-php.cn

React を知ってマスターする必要がある 35 の面接の質問

青灯夜游

リリース： 2020-09-02 15:33:56

転載

21197 人が閲覧しました

React を知ってマスターする必要がある 35 の面接の質問

[関連トピックの推奨事項: 面接の質問に反応する (2020)]

質問 1: とは何ですか仮想DOM?

テーマ: React
難易度: ⭐

仮想 DOM (VDOM) は、実際の DOM のメモリ内表現です。 UI の表現はメモリ内に保持され、実際の DOM と同期されます。これは、呼び出されるレンダリング関数と画面に要素が表示されるまでの間に発生するステップであり、プロセス全体は調整と呼ばれます。

質問 2: クラスコンポーネントと関数コンポーネントの違いは何ですか?

テーマ: React
難易度: ⭐⭐

##クラスコンポーネントstatestate やライフサイクルフック。
props だけを受け取ってページにレンダリングする場合、それはステートレスコンポーネントであり、機能コンポーネントであり、ダムコンポーネントまたは表示コンポーネントとも呼ばれます。

関数コンポーネントとクラスコンポーネントにはもちろん違いがあり、関数コンポーネントは使用時にクラスコンポーネントをインスタンス化する必要があるのに対し、関数コンポーネントはクラスコンポーネントよりもパフォーマンスが高くなります。関数フェッチを実行し、結果を返すだけです。パフォーマンスを向上させるには、機能コンポーネントを使用してみてください。

#違いthisライフサイクルはありますか##状態はありますか状態はい

質問 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=&#39;text&#39;
          ref={(input) => this.input = input} />
        <button type=&#39;submit&#39;>Submit</button>
      </form>
    )
  }
}

ログイン後にコピー

input 要素には、値が関数である ref 属性があることに注意してください。この関数は、入力の実際の DOM 要素を受け取り、それをインスタンスに配置して、handleSubmit 関数内でアクセスできるようにします。

refs はクラスコンポーネント内でのみ使用できるとよく誤解されますが、refs は JS のクロージャを利用することで関数コンポーネントでも使用できます。

function CustomForm ({handleSubmit}) {
  let inputElement
  return (
    <form onSubmit={() => handleSubmit(inputElement.value)}>
      <input
        type=&#39;text&#39;
        ref={(input) => inputElement = input} />
      <button type=&#39;submit&#39;>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=&#39;text&#39;
          ref={(input) => this.input = input} /> // Access DOM input in handle submit
        <button type=&#39;submit&#39;>Submit</button>
      </form>
    )
  }
}

ログイン後にコピー

質問 7: 高次コンポーネントとは何ですか?

テーマ: React

難易度: ⭐⭐

Higher Order Component (HOC) は、コンポーネントを受け入れて新しいコンポーネントを返す関数です。基本的に、これは React の合成機能から派生したパターンであり、動的に提供されるサブコンポーネントを受け入れることができますが、入力コンポーネントの動作を変更またはコピーすることはできないため、Pure Components と呼ばれます。

const EnhancedComponent = higherOrderComponent(WrappedComponent);

ログイン後にコピー

HOC は、次の多くのユースケースに使用できます

質問 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: &#39;sudheer&#39;,age: 30 }
  }
}

ログイン後にコピー

小道具を渡さない

class MyComponent extends React.Component {
  constructor(props) {
    super();
    console.log(this.props); // undefined
    // 但是 Props 参数仍然可用
    console.log(props); // Prints { name: &#39;sudheer&#39;,age: 30 }
  }

  render() {
    // 构造函数外部不受影响
    console.log(this.props) // { name: &#39;sudheer&#39;,age: 30 }
  }
}

ログイン後にコピー

上の例から何かがわかります。

props の動作はコンストラクターの内部でのみ異なり、コンストラクターの外部では同じです。