React propsとstate属性の具体的な事例を詳しく解説

今回は、react props と state 属性の実戦ケースについて詳しく説明します。

前のセクションでは、React コンポーネントと、ES6 クラスを使用して React コンポーネントを作成し、それを他の場所で使用する方法について説明しました。このセクションでは、React コンポーネントの 2 つの魂、props と state について説明します。

小道具

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

<class>
 <student>John Kindem</student>
 <student>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></hello>,
  document.getElementById('root')
);

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

class Hello extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <p>
        </p><h1 id="Hello-this-props-firstName-this-props-lastName">Hello, {this.props.firstName + ' ' + this.props.lastName}</h1>
      
    );
  }
}
ReactDom.render(
  <hello></hello>,
  document.getElementById('root')
);

コンポーネント内で渡された props を取得するには、 this.props オブジェクトを使用するだけで済みますが、それを使用する前に、コンポーネントのコンストラクターをオーバーライドし、Call に props の値を受け入れることを忘れないでください。親クラスのコンストラクター。

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

class Hello extends React.Component {
  constructor(props) {
    super(props);
  }
  static defaultProps = {
    firstName: 'John',
    lastName: 'Kindem'
  };
  render() {
    return (
      <p>
        </p><h1 id="Hello-this-props-firstName-this-props-lastName">Hello, {this.props.firstName + ' ' + this.props.lastName}</h1>
      
    );
  }
}
ReactDom.render(
  <hello></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>
        </p><h1 id="current-time-this-state-hour-this-state-minute-this-state-second">current time: {this.state.hour + ':' + this.state.minute + ':' + this.state.second}</h1>
      
    );
  }
}
ReactDom.render(
  <time></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 サイトの他の関連記事に注目してください。

推奨読書:

Operation Angularjs クロスドメイン ホワイトリスト設定

webpack を使用してクロスドメイン リクエストを処理する方法

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