React的语法和useState的使用方法备忘录

首先

这是关于React useState的备忘录?
我是初学者?
我认为可能会有很多错误的地方。
如果你发现了，请指出来，我会非常感激?

内容

为了在以后回顾时能够自己整理React的useState部分，我将其记录下来。

为了理解这个语法，我将其比喻为家里的电灯开关。

React语法

基本上是「声明」→「函数组件」→「jsx」→「输出」。

按照这个流程写下来。

import React, { useState } from 'react';

const SwitchComponent = () => {
  // スイッチの状態を 'MIN', '真ん中', 'MAX' のいずれかで管理
  const [status, setStatus] = useState('MIN');

  const toggleStatus = () => {
    // 現在のstatusに基づいて次の状態を決定
    switch (status) {
      case 'MIN':
        setStatus('真ん中');
        break;
      case '真ん中':
        setStatus('MAX');
        break;
      case 'MAX':
        setStatus('MIN');
        break;
      default:
        setStatus('MIN');
    }
  };

  return (
    <div>
      <p>現在のステータス: {status}</p>
      <button onClick={toggleStatus}>Toggle Status</button>
    </div>
  );
}

export default SwitchComponent;

以这段代码作为例子，将其按照不同的部分进行总结。

声明

import React, { useState } from 'react';

这部分对应于它。
导入整个React库。
使用{ useState }导入useState hook。

在以下情境中使用useState

• ボタンを押して表示を切り替える

• カーソルやクリックすることで動きをつける

などこれらがあった際に使う。

函数组件

有两种类型分别为「箭头函数型」和「函数型」。
虽然它们只有一点点不同，但可以根据个人喜好选择使用。

箭头函数类型

const MyComponent = () => {
  // コンポーネントのロジック
  return (
    // JSX
  );
};

功能类型

function MyComponent() {
  // コンポーネントのロジック
  return (
    // JSX
  );
}

函数组件（默认值的定义）。

const SwitchComponent = () => {
  // スイッチの状態を 'MIN', '真ん中', 'MAX' のいずれかで管理
  const [status, setStatus] = useState('MIN');

在函数组件中，
使用Const来开头并“决定函数名”
→ “选择箭头函数或function”
→ “定义useState的初始值，改变状态（state），以及更新时的状态（setState）”
→ “定义切换状态的动作”

用这个步骤来创建。

const SwitchComponent = () => {
  // スイッチの状態を 'MIN', '真ん中', 'MAX' のいずれかで管理
  const [status, setStatus] = useState('MIN');

「状态」这就像是家里电灯泡的开关（调用它就会改变状态）

「useStatus」指的是开关打开时灯泡的状态
（指示更新后的新状态）

  const toggleStatus = () => {
    // 現在のstatusに基づいて次の状態を決定
    switch (status) {  // statusでスイッチを押す
      case 'MIN':  // 今の状態がMINのcaseなら
        setStatus('真ん中');  // 更新された状態は”真ん中”になる
        break;  // 処理を止める
      case '真ん中': // 今の状態が”真ん中”のcaseなら
        setStatus('MAX'); // 更新された状態は”MAX”になる
        break; // 処理を止める
      case 'MAX': // 今の状態が”MAX”のcaseなら
        setStatus('MIN'); // 更新された状態は”MIN”になる
        break; // 処理を止める
      default: // どのcaseにも当てはまらない場合は
        setStatus('MIN'); // 更新された状態は”MIN”になる

※‘toggle’这个词指的是切换某状态，尤其是在两种状态之间交替切换的行为。

jsx

  return (
    <div>
      <p>現在のステータス: {status}</p>
      <button onClick={toggleStatus}>Toggle Status</button>
    </div>
  );

这次这里没有特别的解释。（在其他地方已经输出了）

产出

export default SwitchComponent;

参考的网站。

#07 最易懂的React入门【基础篇】中使用频繁的useState的三个案例精选