反应钩子

我整理了在项目中使用的React hooks，以便作为简洁的备忘录。

使用useState

useState是由初始值和用于更新它的函数组成的。其形式可描述如下。在这种情况下，initialValue是空字符串的初始值。如果想要更新它，可以使用setInitialValue函数。

const [initialValue, setInitialValue] = ''

例如，以下描述将初始值设置为空字符串，当点击按钮时，将触发setInitialValue函数并更新值。

import React, { useState } from 'react';

const YourComponent = () => {
  const [initialValue, setInitialValue] = useState(''); // 初期値を空文字列として設定

  const handleClick = () => {
    setInitialValue('新しい値'); // ボタンがクリックされたら、initialValueを'新しい値'に更新
  };

  return (
    <div>
      <h1>{initialValue}</h1> {/* initialValueの値を表示 */}
      <button onClick={handleClick}>値を更新</button> {/* ボタンをクリックするとhandleClickが呼び出される */}
    </div>
  );
};

export default YourComponent;

使用useEffect

useEffect是指一种将函数执行时机延迟到React渲染之后的hook。
虽然易于使用，但需要注意许多细节，过度滥用会给人留下不好的印象。

以下就是组件渲染或部分重新渲染时useEffect被触发的情况：
如果监视值的数组为空，则只会在初次渲染时触发，如果填入id等值，则每当该值变化时都会触发。

然而，在使用时要保持对于是否真的应该用useEffect进行编写的疑问的重要性

useEffect( コールバック関数, [ 監視する値の配列 ] );

只需要一种选项：
https://zenn.dev/uhyo/articles/useeffect-taught-by-extremist
https://zenn.dev/fujiyama/articles/c26acc641c4e30
https://react.dev/learn/you-might-not-need-an-effect

请使用以下三个链接查看文章内容：
https://zenn.dev/uhyo/articles/useeffect-taught-by-extremist
https://zenn.dev/fujiyama/articles/c26acc641c4e30
https://react.dev/learn/you-might-not-need-an-effect

使用表单

這是一個非常方便的hooks之一。以前在創建表單時需要使用狀態管理的useState等，但現在不僅不需要這些描述，而且驗證等也可以非常輕鬆地簡單寫出來。

以下是可以编写登录表单的示例。非常方便。

在中国古人的生活记载中，描述了捕捉技巧。首先，我们要使用import引入useForm方法，然后通过解构赋值来定义所需的参数。以下示例中，我们使用register、handleSubmit和error这三个参数。

可以使用inputRef={register({ required: true })}来将其注册，以使其变为必需输入。还可以设置错误消息和输入模式。

在提交表单时，输入的值将存储在data中。其键值将由name设置。例如，若name=”email”，则值会存储在data中的{email: hoge@example.com}。因此，可通过data.email来提取该值。

import { useForm } from 'react-hook-form'
const { register, handleSubmit, errors } = useForm<LoginInputsProps>()
...
const onSubmit = async (data: LoginInputs) => {
  registerFunction({
    id: data.email,
    pass: data.password,
  })
}

return ( ...
import React from 'react';
import { useForm } from 'react-hook-form';
// その他のインポート

const YourComponent = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();
  
  const onSubmit = (data) => {
    // サブミット時の処理
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <TextField
        inputRef={register({ required: "このフィールドは必須です", pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/ })}
        name="email"
        label="メールアドレス"
        fullWidth
        margin="normal"
        InputLabelProps={{ shrink: true }}
        error={!!errors.email}
        helperText={errors.email}
      />
      <TextField
        inputRef={register({ required: "このフィールドは必須です" })}
        name="password"
        type="password"
        label="パスワード"
        fullWidth
        margin="normal"
        InputLabelProps={{ shrink: true }}
        error={!!errors.password}
        helperText={errors.password}
      />
      <div className="mt-3">
        <Button type="submit" variant="contained" color="primary" fullWidth>
          ログイン
        </Button>
      </div>
    </form>
  );
};

个人的笔记

以下是对本次未使用的hooks的评论：
当使用Redux或easy-peasy等状态管理工具时，似乎不太需要useContext。

我会在未来学习了解useReducer，因为它似乎在某些情况下是必要的。

useCallback/useMemo：起到缓存的作用？在使用重型处理等时似乎是必要的，所以我想要学习一下。

我对useRef的用法不太了解。我想在事件对象中可能会更好，但肯定不是这样的，所以我想要研究一下它们之间的区别。

尽管使用了useEffect，但由于还不了解在哪种情况下应该使用它，我也想要进行调查。