React props と state 属性の使用方法の詳細な説明

今回は React の props と state 属性の使用方法について詳しく説明します。 React の props と state 属性を使用する際の 注意事項 とは何ですか。実際のケースを見てみましょう。

小道具

次のような XML タグの属性をまだ覚えているかどうかはわかりません:

<class id="1">
 <student id="1">John Kindem</student>
 <student id="2">Alick Ice</student>
</class>

このような XML ファイルの意味は、クラス 1 に 2 人の生徒がいて、その名前が学生番号 1 の学生は John Kindem、学生番号 2 の学生は Alick Ice という名前です。ここで、id は読み取り専用の定数と考えることができます。

html は xml を継承しており、JSX はある意味 html と js の拡張です。属性の概念は自然に継承されています。

React では、次のように props の概念を使用して読み取り専用の値を React コンポーネントに渡します:

// 假设我们已经自定义了一个叫Hello的组件
ReactDom.render(
  <Hello firstName={&#39;John&#39;} lastName={&#39;Kindem&#39;}/>,
  document.getElementById('root')
);

React コンポーネントを呼び出すとき、上記のようにコンポーネントにいくつかの定数を渡すことができます。コンポーネントは内部転送できます。呼び出しメソッドは次のとおりです。

class Hello extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <p>
        <h1>Hello, {this.props.firstName + ' ' + this.props.lastName}</h1>
      </p>
    );
  }
}
ReactDom.render(
  <Hello firstName={&#39;John&#39;} lastName={&#39;Kindem&#39;}/>,
  document.getElementById('root')
);

コンポーネント内で渡された props を取得するには、 this.props オブジェクトを使用するだけで済みますが、それを使用する前に、コンポーネントの

コンストラクター を上書きし、 を呼び出すための props 値を受け入れることを忘れないでください。親クラスのコンストラクター。

もちろん、以下に示すように、props にデフォルト値を設定することもできます:

class Hello extends React.Component {
  constructor(props) {
    super(props);
  }
  static defaultProps = {
    firstName: 'John',
    lastName: 'Kindem'
  };
  render() {
    return (
      <p>
        <h1>Hello, {this.props.firstName + ' ' + this.props.lastName}</h1>
      </p>
    );
  }
}
ReactDom.render(
  <Hello/>,
  document.getElementById('root')
);

ES6 クラスで静的な props のデフォルト値を宣言するだけで、実行時の効果は上記と同じです。

小道具は複雑ではないので、少し練習すれば習得できます。

状態、コンポーネントライフサイクル

Reactコンポーネントに動的なエフェクトを追加したい場合はどうすればよいでしょうか?私がこれまで学んだ知識ではこの問題を解決することはできないようです。

この問題は、React コンポーネントの状態を使用して解決する必要があります。React では、変更されるすべての制御変数が状態に置かれる必要があります。さらに、状態はコンポーネントの完全に内部にあり、状態を外部から内部に転送したり、状態の値を直接変更したりすることはできません。

まず例を挙げてみましょう:

import React from 'react';
import ReactDom from 'react-dom';
class Time extends React.Component {
  constructor(props) {
    super(props);
    // 初始化state
    this.state = {
      hour: 0,
      minute: 0,
      second: 0
    }
  }
  componentDidMount() {
    this.interval = setInterval(() => this.tick(), 1000);
  }
  componentWillUnmount() {
    clearInterval(this.interval);
  }
  tick() {
    // 计算新时间
    let newSecond, newMinute, newHour;
    let carryMinute = 0, carryHour = 0;
    newSecond = this.state.second + 1;
    if (newSecond > 59) {
      carryMinute = 1;
      newSecond -= 60;
    }
    newMinute = this.state.minute + carryMinute;
    if (newMinute > 59) {
      carryHour = 1;
      newMinute -= 60;
    }
    newHour = this.state.hour + carryHour;
    if (newHour > 59) newHour -= 60;
    // 设置新状态
    this.setState({
      hour: newHour,
      minute: newMinute,
      second: newSecond
    });
  }
  render() {
    return (
      <p>
        <h1>current time: {this.state.hour + ':' + this.state.minute + ':' + this.state.second}</h1>
      </p>
    );
  }
}
ReactDom.render(
  <Time/>,
  document.getElementById('root')
);

このようにして、値は 1 秒に 1 回変化します。コードを説明しましょう: まず、次のようにコンストラクターで状態が初期化されます。状態は変更されます。これは React コンポーネントの基本クラスの組み込み関数を使用します。

constructor(props) {
  super(props);
  // 在这初始化state
  this.state = {
    ...
  }
}

この関数を使用する前に、this のスコープに注意してください。一方、this は外部の this を指します。通常の関数は関数自体を指します。

さらに、ここでは 2 つの React コンポーネントのライフサイクル コールバックが使用されています:

this.setState({
  ...
});

したがって、React コンポーネントが dom にロードされるたびにタイマーを設定するのは難しくありません。状態が更新されると、コンポーネントがアンロードされるときに、

タイマー

をクリアする必要があります。これは非常に簡単です。

ただし、React には状態更新の頻度に上限があります。この上限を超えると、高頻度の関数で setState を使用しないように注意する必要があります。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

angular6.0はコンポーネントの遅延読み込み機能を実装します(コード付き)

AJAXを介したjQueryエンコード変換base64アップロード

以上がReact props と state 属性の使用方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。