有時候我們會想要在組件之間重用一些狀態邏輯。目前為止，有兩種主流方案來解決這個問題：高階組件和??render props。

但是這里我們講一種自定義hook的方式：

? ? ? ?首先，我們把公用邏輯抽取到一個叫做?useFriendStatus?的自定義 Hook 里：

? ? ?useFriendStatus組件

import React, { useState, useEffect } from 'react';function useFriendStatus(friendID) {const [isOnline, setIsOnline] = useState(null);function handleStatusChange(status) {setIsOnline(status.isOnline);}useEffect(() => {ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);return () => {ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);};});return isOnline; }

它將?friendID?作為參數，并返回該好友是否在線，現在我們可以在兩個組件中使用它：

? ? ? FriendStatus組件

function FriendStatus(props) {const isOnline = useFriendStatus(props.friend.id);if (isOnline === null) {return 'Loading...';}return isOnline ? 'Online' : 'Offline'; }

? ? ?FriendListItem組件

function FriendListItem(props) {const isOnline = useFriendStatus(props.friend.id);return (<li style={{ color: isOnline ? 'green' : 'black' }}>{props.friend.name}</li>); }

這兩個組件的 state 是完全獨立的。Hook 是一種復用狀態邏輯的方式，它不復用 state 本身。事實上 Hook 的每次調用都有一個完全獨立的 state —— 因此你可以在單個組件中多次調用同一個自定義 Hook。

總結

以上是生活随笔為你收集整理的react组件之间重用状态的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。