useEffect() 与 useState()、props 和回调、useEffect 的依赖类型介绍
useEffect() 与 useState()、props 和回调、useEffect 的依赖类型介绍
useEffect() 与 useState()
useState是一个 React 钩子函数，用于管理和更新功能组件中的状态。它是一种存储数据的方式，这些数据会随着时间的推移而变化，并根据任何变化导致重新呈现。它还允许您在组件中声明和更新一段本地状态。当您需要跟踪可能随时间变化的数据，并希望在状态发生变化时触发重新渲染时，这种方法就非常有用。
下面是一个使用 useState 的计数器的简单示例：
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
const increment = () => setCount(count + 1);
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
</div>
);
}其他用例包括管理输入值、切换 UI 元素或存储和更新组件的特定数据。
useEffect 是另一个 React 函数，用于在功能组件中执行副作用。副作用包括数据获取、DOM 操作、设置订阅等。它允许您在初始呈现后运行代码，并响应状态或道具的变化。
下面是一个示例：
import React, { useState, useEffect } from 'react';
function App() {
const [data, setData] = useState(null);
useEffect(() => {
fetchApi()
}, []); // Empty dependency array means this effect runs once after the initial render
const fetchAPI = () => {
// Fetch data from an API
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => setData(data));
}
return (
<div>
{data ? <p>Data: {data}</p> : <p>Loading...</p>}
</div>
);
}当需要与外界交互、处理异步操作或在组件卸载时执行清理任务时，UseEffect 非常有用。
**useState 用于管理组件特定的状态，而 useEffect 则用于处理与组件状态无直接关系但需要根据状态或道具变化触发的副作用或操作。这两个函数是构建 React 项目的基本组件。
props和回调
Props（属性的缩写）用于将数据从父组件传递到子组件。Props是只读的；子组件不能直接修改其 props。它们用于组件之间的通信和数据传输。props 在渲染组件时定义，并作为 JSX 元素中的属性传递。然后父组件设置并更新其子组件的 props。
例如，在我们的 PlayerCard.js 中，“player”是一个 prop 的示例，它是从 PayerList.js 传递下来的：
import React from 'react';
const PlayerItem = ({ player}) => {
const offensiveRating = ((player.PTS / player.minutes_played) * 100).toFixed(2);
const defensiveRating = (player.BLK * 0.6 + player.STL * 0.4).toFixed(2);
return (
<div className="card">
<div className="card-content">
<h2>{player.player_name}</h2>
<img src={player.image} alt={player.player_name} className="player-avatar" />
<p>Points: {player.PTS}</p>
<p>Offensive Rating: {offensiveRating}</p>
<p>Defensive Rating: {defensiveRating}</p>
<p>Assists: {player.AST}</p>
</div>
</div>
);
};
export default PlayerItem;
import React, { useState} from 'react';
import PlayerCard from './PlayerCard';
import NewPlayerForm from './NewPlayerForm';
// send props from App.js
const PlayerList = ({players, isDarkMode, toggleDarkMode, handleAddNewPlayer}) => {
return (
<div className={isDarkMode ? 'dark-mode' : 'light-mode'}>
<nav>
<button onClick={toggleDarkMode}>
{isDarkMode ? 'Light' : 'Dark'} Mode
</button>
</nav>
<div>
{players.map((player) => (
<PlayerCard key={player.id} player={player} />
))}
</div>
</div>
);
};
export default PlayerList;Playerlist 循环遍历从 App.js 传递下来的道具“players”地图：
<PlayerList
players={players}
toggleDarkMode={toggleDarkMode}
isDarkMode={isDarkMode}
/>****另一方面，回调涉及将函数作为 props 传递给子组件。 这允许子组件触发父组件中定义的功能，从而能够根据子组件中的事件或用户交互在父组件中启动通信和操作。
在我们的App.js中，我们有toggleDarkMode，它是回调函数的示例：
const toggleDarkMode = () => {
setIsDarkMode((prevIsDarkMode) => !prevIsDarkMode);
};
return (
<Router>
<div>
...
<Route
path="/"
element={
<PlayerList
players={players}
toggleDarkMode={toggleDarkMode}
isDarkMode={isDarkMode}
/>
}
/>
</div>
...我们还可以从 PlayerList.js 访问toggleDarkMode
const PlayerList = ({players, isDarkMode, toggleDarkMode, handleAddNewPlayer}) => {
return (
<div className={isDarkMode ? 'dark-mode' : 'light-mode'}>
<nav>
<button onClick={toggleDarkMode}>
{isDarkMode ? 'Light' : 'Dark'} Mode
</button>
</nav>useEffect() 的依赖类型
React 中的 useEffect 钩子接受一个可选的第二个参数，它是一个依赖项数组。依赖数组控制效果何时运行。依赖关系主要分为三种类型：
- 空依赖数组 ([])：当依赖数组为空时，如 useEffect(() => {...}, []) 中，效果仅运行一次，类似于类组件中的 componentDidMount。当任何 props 或状态变量发生变化时，它不会重新运行。这通常是为了在组件安装时从 API 获取数据。
- 特定道具或状态依赖项：您可以在依赖项数组中指定一个或多个道具或状态变量，例如 [players]。只要这些依赖项的值发生变化，效果就会运行。在这里，当“玩家”状态发生变化时，它会重新渲染。
useEffect(() => {
// ... (code)
}, [players]);回调作为依赖项：您还可以在依赖项数组中包含回调函数。只要这些回调发生变化，效果就会运行，这对于处理基于回调变化的副作用非常有用。
useEffect(() => {
// ... (code)
}, [someCallback]);上面，我们描述了 useState() 和 useEffect() 的用例、props 和回调之间的区别，以及描述了 useEffect() 依赖类型的三种场景。希望喜欢本文的内容，并能给您的实际开发中带来帮助!