自動再表示[react]

14700 ワード
React テキストリンク
前回のやり方とは異なります
自動レンダリングを発生させる方法を学びます.

🟢 state


:データを格納する場所

🖤 js


:jsでは変数に格納する方法が多く使用されています
<script>
    let counter = 0;
    const button = document.getElementById("btn");
    const span = document.querySelector("span");
    function handleClick() {
      counter = counter + 1;
      span.innerText = `Total clicks: ${counter}`;
    }
    button.addEventListener("click", handleClick);
  </script>
上のコードではstateはcounter(変数)

🖤 react


:reactではreactです.useState()の使用
React.useState(初期値)
const data = React.useState(0);
古い方法
let counter = 0;
function countUp() {
	counter = counter + 1;
    render();
}
これと同じ役割を果たしている

❗️React.useState()の特性


アレイ方式で格納、
配列の最初の値は初期値です.
2番目の値は、その値を変更する関数です.

したがって、初期値を適用する場合は、「配列のn番目の値」というように指定する必要があります.
ex. {data[0]}

気分が悪い!!!


だからjsの文法を利用します
const color = ["pink", "black"]
const [favColor, sosoColor] = color;
ではfavColorは「pink」、soColorは「black」です
この文法を使えば.
const [counter, modifier] = React.useState(0);
简単に言える

🟣 修飾子を使用してカウンタ値を変更する方法

function App() {
	const [counter, setCounter] = React.useState(0);
    const onClick = () => {
    	setCounter(counter + 1);
        };
    return (
    	<div>
            <h3>Total clicks: {counter}</h3>
            <button onClick={onClick}>Click me</button>
        </div>
        );
    }
初期値を0に設定します.
onClick()はsetCounter(再レンダリング)を実行します
ではcounterの値は1増加します
修飾子関数を使用してステータスを変更する場合
構成部品の再生(再レンダリング)

📌 反応の最大の特徴


データを変更するたびに
構成部品の再レンダリングとUIの更新

🟣 ステータスの設定方法

  • 直接値の設定
    (現在の状態に関係のない値を新しい状態に設定する場合)
    setState(state +1)
    • 伝達
  • 関数
    (現在の状態を変更して新しい状態にする場合)
    setState(state => state +1)
    :関数の最初のパラメータは現在の状態です.

    • 📌 コードに適用

    const onClick = () => {
	//setCounter(counter + 1);
    setCounter((current) => current + 1);
};
    setCounter((current) => current + 1);

    完全なコード

    <!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
    <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
    <script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/[email protected]/babel.min.js"></script>
    <script type="text/babel">
      const root = document.getElementById("root");
      function App() {
        const [counter, setCounter] = React.useState(0);
        const onClick = () => {
          setCounter((current) => current + 1);
        };
        return (
          <div>
            <h3>Total clicks: {counter}</h3>
            <button onClick={onClick}>Click me</button>
          </div>
        );
      }
      ReactDOM.render(<App />, root);
    </script>
  </body>
</html>
    React State/Props
    mongoEngineのdocumentオブジェクトの概要