React コンポーネント API

React コンポーネント API は、ライフサイクルメソッド、状態管理、プロパティの受け渡し、イベント処理など、いくつかの重要な側面を扱います。

以下は React コンポーネント API の詳細な説明です：

ライフサイクルメソッド

React コンポーネントのライフサイクルメソッドは、マウント、更新、アンマウントの3つの主要な段階に分けられます。詳細は以下を参照してください：React コンポーネントのライフサイクル 。

マウント段階

  • constructor(props): コンストラクター。状態の初期化やメソッドのバインドに使用します。
  • static getDerivedStateFromProps(props, state): render メソッドを呼び出す前に毎回呼び出され、状態の更新に使用します。
  • componentDidMount(): コンポーネントのマウント後に呼び出されます。この時点で DOM 操作やデータリクエストを行うことができます。

サンプル

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.reset) {
      return { count: 0 };
    }
    return null;
  }

  componentDidMount() {
    console.log('Component mounted');
  }

  render() {
    return <div>{this.state.count}</div>;
  }
}

更新段階

  • static getDerivedStateFromProps(props, state): マウント段階と同じで、状態の更新に使用します。
  • shouldComponentUpdate(nextProps, nextState): ブール値を返し、コンポーネントを再レンダリングするかどうかを決定します。
  • render(): コンポーネントのUIをレンダリングします。
  • getSnapshotBeforeUpdate(prevProps, prevState): DOMの更新前に呼び出され、スクロール位置などの情報を取得するために使用します。
  • componentDidUpdate(prevProps, prevState, snapshot): コンポーネントの更新後に呼び出されます。

サンプル

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    return nextState.count !== this.state.count;
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    return { scrollPosition: window.scrollY };
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    if (snapshot) {
      window.scrollTo(0, snapshot.scrollPosition);
    }
    console.log('Component updated');
  }

  render() {
    return <div>{this.state.count}</div>;
  }
}

アンマウント段階

  • componentWillUnmount(): コンポーネントがアンマウントされる直前に呼び出され、タイマーやイベントリスナーなどのリソースをクリーンアップするために使用します。

サンプル

class MyComponent extends React.Component {
  componentWillUnmount() {
    console.log('Component will unmount');
  }

  render() {
    return <div>{this.state.count}</div>;
  }
}

状態管理

状態はコンポーネント内部のデータであり、使用してthis.state定義および管理します。によってsetStateメソッドで状態を更新します。

サンプル

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState((prevState) => ({ count: prevState.count + 1 }));
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

プロパティの受け渡し

this.props を使用してコンポーネントに渡されたプロパティにアクセスし、PropTypes を使用して型チェックを行うことができます。

サンプル

import PropTypes from 'prop-types';

class MyComponent extends React.Component {
  render() {
    return <div>{this.props.title}</div>;
  }
}

MyComponent.propTypes = {
  title: PropTypes.string.isRequired,
};

// コンポーネントを使用してプロパティを渡す
<MyComponent title="Hello, World!" />

イベント処理

イベント処理関数を使用してユーザーの操作を処理します。this の指す先を正しくするために、.bind(this) またはアロー関数を使用する必要があります。

サンプル

class MyComponent extends React.Component {
  handleClick = () => {
    console.log('Button clicked');
  };

  render() {
    return <button onClick={this.handleClick}>Click me</button>;
  }
}

条件付きレンダリング

条件文を使用してコンポーネントのレンダリングを制御します。

サンプル

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isVisible: true };
  }

  toggleVisibility = () => {
    this.setState((prevState) => ({ isVisible: !prevState.isVisible }));
  };

  render() {
    return (
      <div>
        {this.state.isVisible && <p>This is visible</p>}
        <button onClick={this.toggleVisibility}>Toggle</button>
      </div>
    );
  }
}

リストレンダリング

配列の map メソッドを使用してリストをレンダリングします。

サンプル

class MyComponent extends React.Component {
  render() {
    const items = ['Item 1', 'Item 2', 'Item 3'];
    return (
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    );
  }
}

制御コンポーネント

状態を通じてフォーム要素の値を制御します。

サンプル

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: '' };
  }

  handleChange = (event) => {
    this.setState({ value: event.target.value });
  };

  handleSubmit = (event) => {
    event.preventDefault();
    console.log('Submitted value:', this.state.value);
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="text" value={this.state.value} onChange={this.handleChange} />
        <button type="submit">Submit</button>
      </form>
    );
  }
}

状態の設定:setState

setState は React においてコンポーネントの状態を更新するためのメソッドです。

構文形式は次のとおりです：

setState(object nextState[, function callback])

パラメータの説明

  • object nextState: 更新する状態のキーと値のペアを含むオブジェクトです。React はこのオブジェクトを現在の状態にマージします。
  • function callback: オプションのコールバック関数で、状態が更新され再レンダリングが完了した後に実行されます。

nextState と現在の state をマージし、コンポーネントを再レンダリングします。

setState は、React のイベント処理関数内やリクエストのコールバック関数内で UI の更新をトリガーする主要なメソッドです。

setStateについて

コンポーネント内部で this.state を直接変更して状態を変更することはできません。この状態は setState() の呼び出し後に置き換えられるためです。

setState() は this.state をすぐに変更するわけではなく、処理待ちの state を作成します。setState() は必ずしも同期的ではありません。パフォーマンスを向上させるため、React は state の更新とDOMレンダリングをバッチ処理します。

setState() は、shouldComponentUpdate() に何らかの条件付きレンダリングロジックを実装しない限り、常にコンポーネントの再描画をトリガーします。

setState を適切に使用することで、コンポーネントの状態を効率的に管理し、状態更新後に必要な操作を確実に実行できるため、アプリケーションの応答性と信頼性を高めることができます。

React サンプル

class Counter extends React.Component{ constructor(props) { super(props); this.state = {clickCount: 0}; this.handleClick = this.handleClick.bind(this); } handleClick() { this.setState(function(state) { return {clickCount: state.clickCount + 1}; }); } render () { return (<h2 onClick={this.handleClick}>クリックして！クリック回数は:{this.state.clickCount}</h2>); } } const root = ReactDOM.createRoot(document.getElementById("root")); root.render( <Counter /> );

試してみる »

この例では、h2 タグをクリックするとクリックカウンターが1増えます。

その他の拡張