Reactにおけるpropsとstate属性の使い方の詳しい説明（コード例）

この記事では、React での props と state 属性の使用法について詳しく説明します (コード例)。必要な方は参考にしていただければ幸いです。あなたは助けてくれました。

この記事では React の props と state 属性の具体的な使い方を中心に紹介しますので、必要な方は参考にしてください。不備がある場合は、批判や修正を歓迎します。

props

次のような 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>
    );//欢迎加入前端全栈开发交流圈一起学习交流：864305860
  }//面向1-3年前端人员
}//帮助突破技术瓶颈，提升思维能力
 
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 (
      <div>
        <h1>Hello, {this.props.firstName + ' ' + this.props.lastName}</h1>
      </div>
    );//欢迎加入前端全栈开发交流圈一起吹水聊天学习交流：864305860
  }//面向1-3年前端人员
}//帮助突破技术瓶颈，提升思维能力
 
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 (
      <div>
        <h1>current time: {this.state.hour + ':' + this.state.minute + ':' + this.state.second}</h1>
      </div>
    );
  }
}
ReactDom.render(
  <Time/>,
  document.getElementById('root')
);

これでカウンターが完成します。値は 1 秒に 1 回変化します。コードを説明しましょう: まず、次のように、コンストラクターで状態が初期化されます:

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

状態を変更するには、React コンポーネントの基本クラスの組み込み関数を使用します。

this.setState({
  ...
});

この関数を使用する前に、必ず this のスコープに注意してください。矢印関数の this は次のことを指します。通常の関数の外部 this は関数自体を指します。
さらに、ここでは 2 つの React コンポーネントのライフサイクル コールバックが使用されています: `

componentDidMount() {
  // React组件被加载到dom中的时候被调用
  ...
}
componentWillUnmount() {
  // React组件从dom中卸载的时候被调用
  ...
}

したがって、React コンポーネントが dom にロードされるときに、更新するタイマーを設定する場合、上記のタイマー コードは難しくありません。状態が更新されると、コンポーネントがアンロードされるときに、タイマーをクリアする必要があります。これは非常に簡単です。
ただし、React にはステートの更新頻度に上限があります。この上限を超えると、高頻度の関数で setState を使用しないように注意する必要があります。

以上がReactにおけるpropsとstate属性の使い方の詳しい説明（コード例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。