useState を簡単に説明 - 非開発者向けガイド (5)-jsチュートリアル-php.cn

useState を簡単に説明 - 非開発者向けガイド (5)

Patricia Arquette

リリース： 2025-01-06 00:37:39

オリジナル

817 人が閲覧しました

useState Explained Simply - A Guide for Non-Developers (5)

ねぇ？

私はマーケティングのバックグラウンドを持っていたので、最初は React フックがどれほど威圧的に感じられたかを覚えています。これらの専門用語や開発者の専門用語はすべて頭がくらくらするほどでした。多くのことを学び (そして多くの混乱) を経て、仕事を始めるときにあったらよかったと思うガイドを作成したいと思いました。

これまでに次のことを行ったことがある場合:

React ドキュメントで迷った?‍?
なぜ通常の変数を使用できないのかと疑問に思いました
useState を他の人に説明するのに苦労しました
実際に意味のある例を求めています

それなら、このガイドがあなたのためです! useState を一口サイズのわかりやすい部分に分割してみましょう。

React フックとは何ですか? ?

フックはスイスアーミーナイフのようなものだと考えてください - 各ツールには特定の目的があります:

useState: 魔法のメモ帳 (これについては詳しく説明します!)
useEffect: 変更を監視するあなたのパーソナルアシスタント
useContext: 全員が情報を共有するグループチャット
useReducer: 複雑なものに対する useState の兄のようなもの
useMemo: 解決策を覚えている賢い友達
useCallback: useMemo に似ていますが、関数を記憶するためのものです
useRef: 付箋を何かに貼って後で見つけられるようにするのと同じです

useStateとは何ですか? ?

何かを書いたり、消したり、新しいものを書き込んだりできる魔法のボードを覚えていますか? useState はあなたの Web サイトの useState とまったく同じです。これは、ウェブサイトが内容を記憶し、必要に応じて更新するのに役立ちます。

const [something, setSomething] = useState(startingValue);

ログイン後にコピー

次のように考えてください:

何か: 現在ボードに書かれていること
setSomething: 書かれた内容を変更するための特別な消しゴム/マーカー
startingValue: 最初にボードに書く内容

useState はどのように機能するのでしょうか? ?

これを料理レシピのように説明しましょう:

1. 調理の準備（初期化）

調理スペース (コンポーネント) をセットアップします
特別なレシピカード (React の状態空間) を作成します
各材料はカード上に独自の場所を割り当てられます

2. レシピの変更（アップデート）

材料の分量を変更したい場合

React は変更を付箋に書き込みます
そのメモを「To-Do」の山に入れます
近々レシピを更新する予定です
複数の変更をグループ化します (複数の材料を一度に変更するなど)

3. 変更を加える (レンダリング)

React はすべての付箋をレビューします
新しい金額を計算します
レシピカードを更新します
新しいレシピをみんなに見せます

4. 仕上げ（コミット）

React が変更を加えます
古い材料をクリーンアップします
新しい材料を設定します

現実世界の例 ?

1. シンプルなウェルカムメッセージ

const [something, setSomething] = useState(startingValue);

ログイン後にコピー

2. いいねボタンカウンター

function WelcomeMessage() {
  // Think of this like a greeting card where you can change the name
  const [name, setName] = useState("Guest")

  return (
    <div>
      <input 
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Type your name"
      />
      <p>Welcome to my website, {name}! ?</p>
    </div>
  )
}

ログイン後にコピー

3. ダークモードの切り替え

function LikeButton() {
  // Just like counting likes on Instagram
  const [likes, setLikes] = useState(0)

  return (
    <div>
      <p>This post has {likes} likes</p>
      <button onClick={() => setLikes(likes + 1)}>♥️ Like</button>
    </div>
  )
}

ログイン後にコピー

2. 以前の値に基づいて更新する

function DarkModeSwitch() {
  // Like a light switch for your website
  const [isDark, setIsDark] = useState(false)

  return (
    <div>



<h2>
  
  
  Common Mistakes (We All Make Them!) ?
</h2>

<h3>
  
  
  1. Trying to Change Things Directly
</h3>



<pre class="brush:php;toolbar:false">// ? Don't do this!
const [user, setUser] = useState({name: 'John'})
user.name = 'Jane'  // This is like trying to edit a photocopy

// ✅ Do this instead!
setUser({...user, name: 'Jane'})  // This is like making a new copy

ログイン後にコピー