Memo

関数コンポーネント

シンプルな関数コンポーネント。

import './App.css';

function App() {
  return (
    <div className="App">
      <h1>React</h1>
      <p>これはサンプルのコンポーネントです。</p>
    </div>
  );
}

export default App;
■ステート

以下はクリックしてもカウントアップされない。
関数コンポーネントは、「呼び出されたときだけ働き、描画し終えたら消えるもの」のため。

import './App.css';

function App() {
  var counter = 0;
  const doClick = ()=> {
    counter++;
  }
  return (
    <div className="App">
      <h1>React</h1>
      <p>これはサンプルのコンポーネントです。</p>
      <p onClick={doClick}>counter: {counter}</p>
    </div>
  );
}

export default App;


以下のように、ステートを使うと値を保持できる。
「import { useState } from 'react';」で関数を読み込み、「const [値を保持する変数名, 値を変更する関数名] = useState(値の初期値);」のように使用する。
値が更新されると、表示も自動で更新される。

import './App.css';
import { useState } from 'react';

function App() {
  const [counter, setCounter] = useState(0);
  const doClick = ()=> {
    setCounter(counter + 1);
  }
  return (
    <div className="App">
      <h1>React</h1>
      <p>これはサンプルのコンポーネントです。</p>
      <p onClick={doClick}>counter: {counter}</p>
    </div>
  );
}

export default App;


以下のようにして、フォームの値をもとに表示を更新できる。

import './App.css';
import { useState } from 'react';

function App() {
  const [name, setName] = useState('');
  const [message, setMessage] = useState('名前を入力してください。');
  const doInput = (e)=> {
    setName(e.target.value);
  }
  const doClick = (e)=> {
    e.preventDefault();
    setMessage('こんにちは、' + name + 'さん。');
  }
  return (
    <div className="App">
      <h1>React</h1>
      <p>{message}</p>
      <form>
        <input type="text" onChange={doInput} />
        <button onClick={doClick}>クリック</button>
      </form>
    </div>
  );
}

export default App;


以下のように、副作用フックを使うとコンポーネントの更新時に自動で処理を実行できる。
「import { useState, useEffect } from 'react';」で関数を読み込み、「useEffect(() => { 実行させたい処理 }, [更新を監視する変数]);」のように使用する。

import './App.css';
import { useState, useEffect } from 'react';

function App() {
  const [number, setNumber] = useState(0);
  const [message, setMessage] = useState('');
  const doInput = (e)=> {
    setNumber(e.target.value);
  }
  useEffect(() => {
    if (number < 2) {
      setMessage('1より大きい自然数を入力してください。');
    } else {
      var prime = true;
      for (var i = 2; i <= number / 2; i++) {
        if (number % i === 0) {
          prime = false;
          break;
        }
      }
      setMessage(prime ? '素数です。' : '素数ではありません。');
    }
  }, [number]);
  return (
    <div className="App">
      <h1>React</h1>
      <p>{message}</p>
      <form>
        <input type="text" onChange={doInput} />
      </form>
    </div>
  );
}

export default App;
Memo

Advertisement
