【React】对于React初学者，我总结了关于useState和useEffect的内容

2 年 ago
新, 韵
2 minutes

首先

1.jpg
由于我是编程初学者，所以内容可能存在错误。
如果有错误的话，希望你能指出来。

反应钩子

这次学到的useState和useEffect是React Hooks的其中一个。

React Hooks是什么？

这是来自于2017年9月发布的React16.8的功能。
以前，只能在类组件中处理的State和生命周期的功能现在可以通过使用Hooks来附加到函数组件上。

使用状态

在函数组件中，有一个特别常用的钩子函数叫做useState。
使用useState可以在函数组件内部维护状态(state)。

用法

import { useState } from 'react';

通过在顶层导入`useState`，您可以在使用中使用它。

    • 状態（state）とその状態を更新する関数（setState）を定義します。

 

    初期値を設定します。
const [state, setState] = useState(false);
記述名備考state現在の値setStatestateの状態を変更する関数false初期値

 

“State是什么意思？”

React的组件可以在内部拥有”状态”。

情况

状态是指应用程序或组件的当前信息，并被称为”状态”。

国家的趋势

    1. 保存组件状态

 

    当状态改变时，自动更新组件（重新渲染）。

点击一次，数字将会增加1的计数器组件

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Current Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

export default Counter;
Image from Gyazo
<button onClick={() => setCount(count + 1)}>+1</button>

在按钮上添加一个 onClick 事件处理程序，当点击时调用 setCount 函数以递增 count 的值。

更新函数（带有“set”的函数）将通过将当前的 count 值加1来更新 count。

setCount(count + 1)

然后、

<p>Current Count: {count}</p>

在这个部分，当前的count值被展示为JavaScript变量。(在JSX结构内，可以使用JavaScript表达式，用{ }表示。)

通过使用useState，你可以在组件内进行动态处理。

使用useEffect

useEffect 是在 React 组件中用于执行副作用的钩子。

副作用- 附带效果

指的是与UI的渲染无直接关系的操作。
这包括以下几个方面。

    • API からデータを取得する

 

    • タイマーをセットする

 

    DOM ノードを直接操作する など。

数组依存

在React中，可以将”依赖数组”作为第二个参数传递给useEffect函数。

useEffect(() => {
  // 副作用を実行する処理を記述する
}, [依存配列]);
記述名備考副作用第1引数依存配列第2引数
    依存配列が指定されている場合

只有当数组中的值发生更改时，副作用才会重新执行。
以下代码中，当userId改变时，将执行副作用处理，从API获取用户数据。

import React, { useState, useEffect } from 'react'; //useEffectの定義

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    async function fetchUserData() {
      const response = await fetch(`https://api.example.com/users/${userId}`);
      const userData = await response.json();
      setUser(userData);
    }

    fetchUserData();
  }, [userId]);    // userIdが変更されたときのみこの副作用を実行

  return (
    <div>
      {/* ユーザーデータの表示 */}
      {user && <div>{user.name}</div>}
    </div>
  );
}

export default UserProfile
    依存配列が空の場合（[]）

useEffect在组件挂载后仅执行一次。
之后，即使props或state发生变化导致UI重新渲染，副作用也不会被再次执行。

将以下内容以中文原生方式改写，只需一个选项：

揶揄

在创建组件时，我们会生成一个与其对应的DOM节点，并将其插入到现有的DOM树中，在组件首次渲染到网页上时。卸载则指的是当DOM节点从现有的DOM树中移除。

在下面的代码中，当组件被挂载时设置一个定时器，并在组件被卸载时清除它。

import React, { useState, useEffect } from 'react';

function TimerComponent() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      setSeconds(prevSeconds => prevSeconds + 1);
    }, 1000);

    return () => clearInterval(intervalId); // コンポーネントのアンマウント時にインターバルをクリア
  }, []); // 依存配列が空なので、マウント時にのみ実行される

  return <div>経過秒数: {seconds}</div>;
}
export default TimerComponent
Image from Gyazo
    依存配列が指定されていない場合：

副作用将在组件第一次挂载时执行，以及随后的所有更新（重新渲染）后执行。它将对state和props的任何更改做出响应并执行副作用。
在state或props更新后，UI将重新绘制，然后执行处理，这样组件在显示在屏幕上或更新时就可以执行特定的代码。

总结

随着对useState和useEffect的进一步了解，我也稍微了解到了React的基本概念，如状态，副作用和挂载。为了能够正确地使用钩子进行实践，我将继续学习并深入了解React！

请参考以下文献。

书籍 (shū jí)

    • 基礎から学ぶReact Hooks

 

    • Reactハンズオンラーニング 第2版 ―Webアプリケーション開発のベストプラクティス

 

    TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発

文章

 

✖
广告
将在 10 秒后关闭
bannerAds