[React] useState

13428 ワード
React テキストリンク

useStateはカウンタの例です


App.js

import "./styles.css";
import Counter from "./counter";

function App() {
  return <Counter />;
}

export default App;

Counter.js

import React from "react";

function Counter() {
  return (
    <div>
      <h1>0</h1>
      <button>+1</button>
      <button>-1</button>
    </div>
  );
}

export default Counter;

今のボタンを押しても何の役にも立たない.
これをステータスに変換し、hooksのusStateを使用して変更して、ボタンを押すたびに現在表示されている値を変更します.
import React, { useState } from "react";

function Counter() {
  const [number, setNumber] = useState(0);

  const increase = () => {
    setNumber(number + 1);
  };
  const decrease = () => {
    setNumber(number - 1);
  };

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={increase}>+1</button>
      <button onClick={decrease}>-1</button>
    </div>
  );
}

export default Counter;
終わりました.
本当に簡単ですね...ステータスの初期値は、importで{ useState }を使用してconst [number, setNumber] = useState(0);によって決定され、関数でステータス値を更新することができる.

コンポーネントパフォーマンス最適化ロジック

import React, { useState } from "react";

function Counter() {
  const [number, setNumber] = useState(0);

  const increase = () => {
    setNumber((prevNumber) => prevNumber + 1);
  };
  const decrease = () => {
    setNumber((prevNumber) => prevNumber - 1);
  };

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={increase}>+1</button>
      <button onClick={decrease}>-1</button>
    </div>
  );
}

export default Counter;
最適化素子性能とは何かは不明であるが,関数で状態更新を行う場合,setNumber(number + 1)よりも上に書くのが有効である.
結果値は同じです.

orgmode html export
Ansible