-
【React】React学习：从初级到高级（四）
React学习[四]
4 应急方案
4.1 使用ref引用值
当希望组件“记住”某些信息，但又不想让这些信息触发新的渲染时，可以使用
ref。4.1.1 给组件添加
ref导入
useRef()import { useRef } from 'react';- 1
调用
useRefconst ref = useRef(0);- 1
可以用
ref.current属性访问该 ref 的当前值，例如：ref.current = ref.current + 1;- 1
设置 state 会重新渲染组件，更改 ref 不会！当一条信息用于渲染时，将它保存在 state 中。当一条信息仅被事件处理器需要，并且更改它不需要重新渲染时，使用 ref 可能会更高效。
4.1.2 ref和state的不同之处
ref state useRef(initialValue)返回{ current: initialValue }useRef(initialValue)返回{ current: initialValue }更改时不会触发重新渲染 更改时触发重新渲染。 可变 —— 可以在渲染过程之外修改和更新 current的值“不可变” —— 必须使用 state设置函数来修改state变量，从而排队重新渲染。不应在渲染期间读取（或写入） current值。可以随时读取 state。但是，每次渲染都有自己不变的state快照。4.1.3 何时使用ref
- 存储
timeout Id - 存储和操作
DOM元素 - 存储不需要被用来计算
JSX的其他对象
4.2 使用ref操作DOM
有时可能需要访问由 React 管理的 DOM 元素 —— 例如，让一个组件获得焦点、滚动到它或测量它的尺寸和位置。在 React 中没有内置的方法来做这些事情，所以需要一个指向 DOM 节点的 ref 来实现。
4.2.1 获取指向节点的ref
// 第一步，引入Ref import { useRef } from 'react'; // 第二步，声明一个ref const myRef = useRef(null); // 第三步，将ref传入html标签内，比如 <div ref={myRef}>- 1
- 2
- 3
- 4
- 5
- 6
4.2.3 使用 ref 回调管理 ref 列表
如果需要为列表中的每一项都绑定
ref，而又不知道会有多少项。那么可以将函数传递给ref属性，称为ref回调。import { useRef } from 'react'; export default function CatFriends() { const itemsRef = useRef(null); function scrollToId(itemId) { const map = getMap(); const node = map.get(itemId); node.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' }); } function getMap() { if (!itemsRef.current) { // 首次运行时初始化 Map。 itemsRef.current = new Map(); } return itemsRef.current; } return ( <> <nav> <button onClick={() => scrollToId(0)}> Tom </button> <button onClick={() => scrollToId(5)}> Maru </button> <button onClick={() => scrollToId(9)}> Jellylorum </button> </nav> <div> <ul> {catList.map(cat => ( <li key={cat.id} ref={(node) => { const map = getMap(); if (node) { // 添加到 Map map.set(cat.id, node); } else { // 从 Map 删除 map.delete(cat.id); } }} > <img src={cat.imageUrl} alt={'Cat #' + cat.id} /> </li> ))} </ul> </div> </> ); } const catList = []; for (let i = 0; i < 10; i++) { catList.push({ id: i, imageUrl: 'https://placekitten.com/250/200?image=' + i }); }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
4.2.4 访问另一个组件的DOM节点
const MyInput = forwardRef((props, ref) => { return <input {...props} ref={ref} />; });- 1
- 2
- 3
inputRef.current中。但是，这取决于MyInput组件是否允许这种行为， 默认情况下是不允许的。MyInput组件是使用forwardRef声明的。 这让从上面接收的inputRef作为第二个参数ref传入组件，第一个参数是props。MyInput组件将自己接收到的ref传递给它内部的。
限制暴露的功能:
useImperativeHandle。const MyInput = forwardRef((props, ref) => { const realInputRef = useRef(null); useImperativeHandle(ref, () => ({ // 只暴露 focus，没有别的 focus() { realInputRef.current.focus(); }, })); return <input {...props} ref={realInputRef} />; });- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
4.2.5 用 flushSync 同步更新 state
如果需要强制 React 同步更新（“刷新”）DOM。从
react-dom导入flushSync并将 state 更新包裹 到flushSync调用中：import { flushSync } from 'react-dom'; function handleAdd() { const newTodo = { id: nextId++, text: text }; flushSync(() => { setText(''); setTodos([ ...todos, newTodo]); }); listRef.current.lastChild.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
Refs 是一个应急方案。应该只在必须“跳出 React”时使用它们。这方面的常见示例包括管理焦点、滚动位置或调用 React 未暴露的浏览器 API。
4.3 使用Effect同步
Effects会在渲染后运行一些代码，以便可以将组件与 React 之外的某些系统同步。不要随意在你的组件中使用 Effect。三个步骤：
-
声明
Effectimport { useEffect } from 'react'; function MyComponent() { useEffect(() => { // 每次渲染后都会执行此处的代码 }); return ; }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
-
指定
Effect依赖。大多数 Effect 应该按需执行，而不是在每次渲染后都执行。useEffect(() => { if (isPlaying) { // isPlaying 在此处使用…… // ... } else { // ... } }, [isPlaying]); // ……所以它必须在此处声明！- 1
- 2
- 3
- 4
- 5
- 6
- 7
-
必要时添加清理(
cleanUp)函数。有时 Effect 需要指定如何停止、撤销，或者清除它的效果。空的依赖数组（
[]）对应于组件“挂载”，即添加到屏幕上。useEffect(() => { const connection = createConnection(); // 开启连接 connection.connect(); return () => { connection.disconnect(); // 断开连接 }; }, []);- 1
- 2
- 3
- 4
- 5
- 6
- 7
控制非React组件
useEffect(() => { const dialog = dialogRef.current; dialog.showModal(); return () => dialog.close(); }, []);- 1
- 2
- 3
- 4
- 5
- 6
订阅事件
如果 Effect 订阅了某些事件，清理函数应该退订这些事件：
useEffect(() => { function handleScroll(e) { console.log(window.scrollX, window.scrollY); } window.addEventListener('scroll', handleScroll); return () => window.removeEventListener('scroll', handleScroll); }, []);- 1
- 2
- 3
- 4
- 5
- 6
- 7
触发动画
如果 Effect 对某些内容加入了动画，清理函数应将动画重置
useEffect(() => { const node = ref.current; node.style.opacity = 1; // 触发动画 return () => { node.style.opacity = 0; // 重置为初始值 }; }, []);- 1
- 2
- 3
- 4
- 5
- 6
- 7
获取数据
如果 Effect 将会获取数据，清理函数应该要么 中止该数据获取操作，要么忽略其结果
useEffect(() => { let ignore = false; async function startFetching() { const json = await fetchTodos(userId); if (!ignore) { setTodos(json); } } startFetching(); return () => { ignore = true; }; }, [userId]);- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
为了防止条件竞争，每个 Effect 都可以在里面设置一个
ignore标记变量。在最开始，ignore被设置为false。然而，当 Effect 执行清理函数后（就像你选中了列表中不同的人时），ignore就会被设置为true。- 仅在严格模式下的开发环境中，React 会挂载两次组件，以对 Effect 进行压力测试。
- React 将在下次 Effect 运行之前以及卸载期间这两个时候调用清理函数。
4.4 不需要Effect的情况
-
根据
props或state来更新state -
使用
useMemo缓存耗时的计算比如：
import { useMemo, useState } from 'react'; function TodoList({ todos, filter }) { const [newTodo, setNewTodo] = useState(''); // ✅ 除非 todos 或 filter 发生变化，否则不会重新执行 getFilteredTodos() const visibleTodos = useMemo(() => getFilteredTodos(todos, filter), [todos, filter]); // ... }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
会告诉 React，除非
todos或filter发生变化，否则不要重新执行传入的函数。 -
当
props变化时重置所有state。可以使用key属性来标识。 -
当prop变化时调整部分state
// 虽然下面这种方式比 Effect 更高效，但大多数组件也不需要它 function List({ items }) { const [isReverse, setIsReverse] = useState(false); const [selection, setSelection] = useState(null); // 好一些：在渲染期间调整 state const [prevItems, setPrevItems] = useState(items); if (items !== prevItems) { setPrevItems(items); setSelection(null); } // ... } /* -----------优化：在渲染期间计算内容---------- */ function List({ items }) { const [isReverse, setIsReverse] = useState(false); const [selectedId, setSelectedId] = useState(null); // ✅ 非常好：在渲染期间计算所需内容 const selection = items.find(item => item.id === selectedId) ?? null; // ... }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
检查是否可以通过添加 key 来重置所有 state，或者 在渲染期间计算所需内容。
-
在事件处理函数中共享逻辑
如果有组件用到了共同的函数调用，尝试把这个函数抽离出来成为一个独立函数
function ProductPage({ product, addToCart }) { // ✅ 非常好：事件特定的逻辑在事件处理函数中处理 function buyProduct() { addToCart(product); showNotification(`已添加 ${product.name} 进购物车！`); } function handleBuyClick() { buyProduct(); } function handleCheckoutClick() { buyProduct(); navigateTo('/checkout'); } // ... }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
-
发送
Post请求当用户按下按钮发送
post请求，只在特定交互中发生 -
链式计算
-
初始化应用
每次应用加载时执行一次。可以添加一个顶层变量来记录它是否已经被执行过了。
let didInit = false; function App() { useEffect(() => { if (!didInit) { didInit = true; // ✅ 只在每次应用加载时执行一次 loadDataFromLocalStorage(); checkAuthToken(); } }, []); // ... }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
或者在模块初始化和应用渲染之前执行：
if (typeof window !== 'undefined') { // 检测我们是否在浏览器环境 // ✅ 只在每次应用加载时执行一次 checkAuthToken(); loadDataFromLocalStorage(); } function App() { // ... }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
为了避免在导入任意组件时降低性能或产生意外行为，请不要过度使用这种方法。将应用级别的初始化逻辑保留在像
App.js这样的根组件模块或你的应用入口中。 -
通知父组件有关
state变化的信息可以试试状态提升，由父组件控制state
-
将数据传递给父组件
可以让父组件获取数据，并传递给子组件
-
订阅外部
store利用
react的Hook函数useSyncExternalStorefunction subscribe(callback) { window.addEventListener('online', callback); window.addEventListener('offline', callback); return () => { window.removeEventListener('online', callback); window.removeEventListener('offline', callback); }; } function useOnlineStatus() { // ✅ 非常好：用内置的 Hook 订阅外部 store return useSyncExternalStore( subscribe, // 只要传递的是同一个函数，React 不会重新订阅 () => navigator.onLine, // 如何在客户端获取值 () => true // 如何在服务端获取值 ); } function ChatIndicator() { const isOnline = useOnlineStatus(); // ... }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
-
获取数据
为了避免条件竞争情况的出现，需要在effect中添加清理函数来忽略较早的返回结果.
function SearchResults({ query }) { const [results, setResults] = useState([]); const [page, setPage] = useState(1); useEffect(() => { let ignore = false; fetchResults(query, page).then(json => { if (!ignore) { setResults(json); } }); return () => { ignore = true; }; }, [query, page]); function handleNextPageClick() { setPage(page + 1); } // ... }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
比使用effect更好的办法是使用框架的内置数据获取机制
4.5 响应式Effect的生命周期
4.5.1 effect的生命周期
每个react组件都经历相同的生命周期
- 组件挂载
- 组件更新
- 组件卸载
但是effect不一样，Effect 能够在需要时始终具备启动和停止的弹性。
React会通过在开发环境中立即强制 Effect 重新进行同步来验证其是否能够重新同步。而之所以知道需要重新同步，是因为
effect的依赖项发生了变化。**代码中的每个 Effect 应该代表一个独立的同步过程。**也就是说删除一个 Effect 不会影响另一个 Effect 的逻辑。
4.5.2 Effect只应该依赖变量
Effect的依赖项是变量，变量发生改变后，effect会重新响应。如果
effect没有依赖项，就表明这个effect仅在组件挂载时执行一次，并在组件卸载时清理。组件内部的所有值（包括 props、state 和组件体内的变量）都是响应式的。任何响应式值都可以在重新渲染时发生变化，所以需要将响应式值包括在 Effect 的依赖项中。
全局变量或可变值不可以作为依赖。应该使用
useSyncExternalStore来读取和订阅外部可变值。如果出现无限循环的问题，或者 Effect 过于频繁地重新进行同步，可以尝试以下解决方案：
- 检查
Effect是否表示了独立的同步过程。 - 如果想读取 props 或 state 的最新值，但又不想对其做出反应并重新同步 Effect，可以将 Effect 拆分为具有反应性的部分（保留在 Effect 中）和非反应性的部分（提取为名为 “Effect Event” 的内容）
- 避免将对象和函数作为依赖项
挑战：一个下拉框允许用户选择一个行星，而另一个下拉框应该显示该选定行星上的地点。然而，目前这两个下拉框都还没有正常工作。你的任务是添加一些额外的代码，使得选择一个行星时，
placeList状态变量被填充为"/planets/" + planetId + "/places"API 调用的结果。App.js
import { useState, useEffect } from 'react'; import { fetchData } from './api.js'; export default function Page() { const [planetList, setPlanetList] = useState([]) const [planetId, setPlanetId] = useState(''); const [placeList, setPlaceList] = useState([]); const [placeId, setPlaceId] = useState(''); useEffect(() => { let ignore = false; fetchData('/planets').then(result => { if (!ignore) { console.log('获取了一个行星列表。'); setPlanetList(result); setPlanetId(result[0].id); // 选择第一个行星 } }); return () => { ignore = true; } }, []); useEffect(() => { if (planetId === '') { return; } let ignore = false; fetchData('/planets/' + planetId + '/places').then(result => { if (!ignore) { console.log('获取了该行星的地点列表'); setPlaceList(result); setPlaceId(result[0].id); } }); return () => { ignore = true; } }, [planetId]) return ( <> <label> 选择一个行星：{' '} <select value={planetId} onChange={e => { setPlanetId(e.target.value); }}> {planetList?.map(planet => <option key={planet.id} value={planet.id}>{planet.name}</option> )} </select> </label> <label> 选择一个地点：{' '} <select value={placeId} onChange={e => { setPlaceId(e.target.value); }}> {placeList?.map(place => <option key={place.id} value={place.id}>{place.name}</option> )} </select> </label> <hr /> <p>你将要前往：{planetId || '...'} 的 {placeId || '...'} </p> </> ); }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
理想情况下，应用程序中的大多数
Effect最终都应该由自定义Hook替代，无论是由你自己编写还是由社区提供。为了减少一些重复，可以把一些逻辑提取到自定义Hook中。App.js
import { useState } from 'react'; import { useSelectOptions } from './useSelectOptions.js'; export default function Page() { const [ planetList, planetId, setPlanetId ] = useSelectOptions('/planets'); const [ placeList, placeId, setPlaceId ] = useSelectOptions(planetId ? `/planets/${planetId}/places` : null); return ( <> <label> 选择一个行星：{' '} <select value={planetId} onChange={e => { setPlanetId(e.target.value); }}> {planetList?.map(planet => <option key={planet.id} value={planet.id}>{planet.name}</option> )} </select> </label> <label> 选择一个地点：{' '} <select value={placeId} onChange={e => { setPlaceId(e.target.value); }}> {placeList?.map(place => <option key={place.id} value={place.id}>{place.name}</option> )} </select> </label> <hr /> <p>你将要前往：{planetId || '...'} 的 {placeId || '...'} </p> </> ); }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
useSelectOptions.js
import { useState, useEffect } from 'react'; import { fetchData } from './api.js'; export function useSelectOptions(url) { const [list, setList] = useState(null); const [selectedId, setSelectedId] = useState(''); useEffect(() => { if (url === null) { return; } let ignore = false; fetchData(url).then(result => { if (!ignore) { setList(result); setSelectedId(result[0].id); } }); return () => { ignore = true; } }, [url]); return [list, selectedId, setSelectedId]; }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
4.6 将事件从Effect中分开
4.6.1 在事件处理函数和Effect中做选择
事件处理函数：
- 只在响应特定的交互操作时运行
- 事件处理函数内部的逻辑是非响应式的
Effect：
- 需要同步时，比如保持服务器连接
- Effect内部的逻辑是响应式的
组件内部声明的 state 和 props 变量被称为响应式值。这些响应式值参与组件的渲染数据流。
4.6.2 从Effect中提取非响应式逻辑
声明一个
Effect Event：尚未发布到React正式版中（截至2023.8.15）。import { useEffect, useEffectEvent } from 'react'; function ChatRoom({ roomId, theme }) { const onConnected = useEffectEvent(() => { showNotification('Connected!', theme); });- 1
- 2
- 3
- 4
- 5
- 6
之后可以在
Effect内部调用onConnected:function ChatRoom({ roomId, theme }) { const onConnected = useEffectEvent(() => { showNotification('Connected!', theme); }); useEffect(() => { const connection = createConnection(serverUrl, roomId); connection.on('connected', () => { onConnected(); }); connection.connect(); return () => connection.disconnect(); }, [roomId]); // ✅ 声明所有依赖项- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
4.6.3 使用Effect Event 读取最新的props和state
尚未发布到React正式版中（截至2023.8.15）。
function Page({ url }) { const { items } = useContext(ShoppingCartContext); const numberOfItems = items.length; const onVisit = useEffectEvent(visitedUrl => { logVisit(visitedUrl, numberOfItems); }); useEffect(() => { onVisit(url); }, [url]); // ✅ 声明所有依赖项 // ... }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
这里的
onVisit是一个 Effect Event。里面的代码不是响应式的。另一方面，Effect 本身仍然是响应式的。其内部的代码使用了urlprops，所以每次因为不同的url重新渲染后 Effect 都会重新运行。这会依次调用onVisit这个 Effect Event。Effect Event 的局限性在于你如何使用他们：
- 只在 Effect 内部调用他们。
- 永远不要把他们传给其他的组件或者 Hook。
4.7 移除Effect依赖
4.7.1 依赖应该和代码保持一致
- 编写 Effect 时，无论这个 Effect 要做什么，首先要明确其生命周期，什么时候同步，什么时候需要清理。
- 确保Effect的依赖项与函数代码里的变量一致。每个被Effect使用的响应值必须在依赖中声明。
- 要移除一个依赖，需要向linter证明其不需要这个依赖。
- 要改变依赖，也要考虑代码需不需要改变。
**建议将依赖性 lint 错误作为一个编译错误来处理。**不然有可能会遇到你并不知道是什么的bug。
4.7.2 移除非必须的依赖
需要考虑的问题：
-
这段代码应该移到事件处理程序中吗？
避免
Effect中有特定的事件处理逻辑代码。 -
Effect是否在做几件不相关的事情？
每个
effect应该代表一个独立的同步过程。如果担心代码重复，可以提取相同逻辑到自定义Hook来提升代码质量。 -
是否在读取一些状态来计算下一个状态？
-
将非响应式逻辑移至
Effect Event中（正式版未发布） -
用
Effect Event包装来自props的事件处理程序 -
尽可能避免将对象和函数作为 Effect 的依赖
-
将静态对象和函数移除组件
-
将动态对象和函数移动到effect中
-
从对象中读取原始值
从 Effect 外部 读取对象信息，并避免依赖对象和函数类型：
function ChatRoom({ options }) { const [message, setMessage] = useState(''); const { roomId, serverUrl } = options; useEffect(() => { const connection = createConnection({ roomId: roomId, serverUrl: serverUrl }); connection.connect(); return () => connection.disconnect(); }, [roomId, serverUrl]); // ✅ 所有依赖已声明 // ...- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
-
从函数中计算原始值
假设父组件传了一个函数：
<ChatRoom roomId={roomId} getOptions={() => { return { serverUrl: serverUrl, roomId: roomId }; }} />- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
为避免使其成为依赖（并导致它在重新渲染时重新连接），需要在 Effect 外部调用它：
function ChatRoom({ getOptions }) { const [message, setMessage] = useState(''); const { roomId, serverUrl } = getOptions(); useEffect(() => { const connection = createConnection({ roomId: roomId, serverUrl: serverUrl }); connection.connect(); return () => connection.disconnect(); }, [roomId, serverUrl]); // ✅ 所有依赖已声明 // ...- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
这仅适用于 纯函数，因为它们在渲染期间可以安全调用。如果函数是一个事件处理程序，但你不希望它的更改重新同步 Effect，将它包装到 Effect Event 中。
4.8 使用自定义Hook复用逻辑
4.8.1 从组件中提取自定义Hook
如果一个Effect中的逻辑有多个组件用到了，就可以考虑将重复逻辑部分提取出来。
Hook的名称必须以’use’开头！
自定义Hook共享的是状态逻辑，而不是状态本身。对同一个 Hook 的每个调用是各自完全独立的。
4.8.2 把事件处理函数传到自定义Hook中
使用了
useEffectimport { useEffect, useEffectEvent } from 'react'; // ... export function useChatRoom({ serverUrl, roomId, onReceiveMessage }) { const onMessage = useEffectEvent(onReceiveMessage); useEffect(() => { const options = { serverUrl: serverUrl, roomId: roomId }; const connection = createConnection(options); connection.connect(); connection.on('message', (msg) => { onMessage(msg); }); return () => connection.disconnect(); }, [roomId, serverUrl]); // ✅ 声明所有依赖 }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
4.8.3 什么时候使用自定义Hook
首先明白一件事，就是如果你需要写Effect就意味着需要"走出React"和某些外部系统同步，或者需要做一些react中没有对应内置API的事。
使用自定义Hook时需要专注于高级用例，避免使用react生命周期，比如
useMount，每个自定义Hook应该专注于实现一个功能。把Effect包裹进自定义Hook有益的另一些原因：
- 让进出 Effect 的数据流非常清晰。
- 让组件专注于目标，而不是 Effect 的准确实现。
- 当 React 增加新特性时，可以在不修改任何组件的情况下移除这些 Effect。
-
相关阅读:
Python3，9行代码，对比两个Excel数据差异，并把差异结果重新保存。
【UVM基础】7、寄存器模型
【23真题】碰瓷重邮成电，题目Mini版本！
pdf怎么转换成jpg图片？
对亚马逊云科技云原生课程容器的基本学习笔记
＜Linux系统复习＞文件系统的理解
JS面向对象---原型链继承
【Detectron2】代码库学习-2. 环境搭建和demo
R语言使用ggpubr包的desc_statby函数计算不同分组的描述性统计信息、分组样本数、最小值、最大值、中位数、均值、IQR、mad、sd等
数据模型设计方法概述
- 原文地址：https://blog.csdn.net/qq_41488033/article/details/132730492
