石頭智能洗地機A10 Plus體驗：雙向自清潔治好了我的懶癌
一、前言和介紹專為家庭請假懶人而生的石頭科技在近日又帶來了自己的全新旗艦新品，石頭智能洗地機A10 Plus。從這個產品名上就不難看出，這次石頭推出的并不是常見的掃地機器
接下來，我們將會以大量的實踐案例來展開 React 19 新 hook 的運用。
本文模擬的實踐案例為點擊按鈕更新數據。這在開發中是一個非常常見的場景。
案例完成之后的最終演示效果圖如下：
我們直接用 React 19 新的開發方式來完成這個需求。
首先創建一個方法用于請求數據。
const getApi = async () => { const res = await fetch('https://api.chucknorris.io/jokes/random') return res.json()}這里一個非常關鍵的地方就在于，當我們要更新的數據時，我們不再需要設計一個 loading 狀態去記錄數據是否正在發生請求行為，因為 Suspense 幫助我們解決了 Loading 組件的顯示問題。
與此同時，use() 又幫助我們解決了數據獲取的問題。那么問題就來了，這個就是，好像我們也不需要設計一個狀態去存儲數據。那么應該怎么辦呢？
這里有一個非常巧妙的方式，就是把創建的 promise 作為狀態值來觸發組件的重新執行。每次點擊，我們都需要創建新的 promise
代碼如下：
// 記住這個初始值const [api, setApi] = useState(null)這個時候，當我們點擊事件執行時，則只需要執行如下代碼去觸發組件的更新。
function __clickToGetMessage() { // 每次點擊，都會創建新的 promise setApi(getApi())}getApi() 執行，新的請求會發生。他的執行結果，又返回了一個新的 promise。
因此，點擊之后會創建的新 promise 值，api 此時就會作為狀態更改觸發組件的更新。
完整代碼如下：
export default function Index() { const [api, setApi] = useState(null) function __clickToGetMessage() { setApi(getApi()) } return ( <div> <div id='tips'>點擊按鈕獲取一條新的數據</div> <button onClick={__clickToGetMessage}>獲取數據</button> <div className="content"> <Suspense fallback={<div>loading...</div>}> <Item api={api} /> </Suspense> </div> </div> )}const Item = (props) => { if (!props.api) { return <div>nothing</div> } const joke = use(props.api) return ( <div className='a_value'>{joke.value}</div> )}案例寫完之后。我們基本上就能夠實現最開始截圖中的交互效果了。但是現別急，還沒有完。我們還需要進一步分析一下這個案例。
這里我們需要注意觀察兩個事情。
一個是觀察當前組件更新，更上層的父組件是否發生了變化。我們可以在 App 組件中執行一次打印。
此時可以發現，當我們重新請求時，當前組件更新，但是上層組件并不會重新執行。
我們可以出得結論：更簡潔的狀態設計，有利于命中 React 默認的性能優化規則。
具體的規則請在 React 知命境合集中查看。
更簡潔的狀態設計，也是 React 19 所倡導的開發思路。
另外一個事情，是我們要特別特別注意觀察子組件 Item 的實現。
首先因為我們初始化時，給 api 賦予的默認值是 null。
// 記住這個初始值const [api, setApi] = useState(null)之后，我們就將 api 傳給了子組件 Item。
<Item api={api} />然后在 Item 組件的內部實現中，因為我們直接把 api 傳給了 use，那么此時直接執行肯定會報錯。
const joke = use(props.api)要注意的是，我們剛才說，使用 Suspense 會捕獲子組件的異常，但是不是捕獲所有異常，它只能識別 promise 的異常。因此，這里的報錯會直接影響到整個頁面。
所以，為了處理好初始化時傳入 api 值為 null，我在內部實現代碼邏輯中，使用了 if 判斷該條件，然后執行了一次 return。我試圖讓 use(null) 得不到執行的時機。
const Item = (props) => { if (!props.api) { console.log('初始化時，api == null') return <div>nothing</div> } const joke = use(props.api) return ( <div className='a_value'>{joke.value}</div> )}那么，我的意圖是否能成功呢？
我們在 return 后面插入一個 console.log 來觀察代碼的執行情況，代碼如下：
const Item = (props) => { if (!props.api) { console.log('初始化時，api == null') return <div>nothing</div> } console.log('初始化時這里是否執行'); const joke = use(props.api) return ( <div className='a_value'>{joke.value}</div> )}演示效果如下圖所示：
我們發現，當我反復刷新頁面，讓初始化流程執行時，return 后面的代碼并不會執行。
再然后，我們新增一點內容，比如在 return 后面使用一個 useEffect。
const Item = (props) => { if (!props.api) { console.log('初始化時，api == null') return <div>nothing</div> } useEffect(() => { console.log('xxx') }, []) console.log('初始化時這里是否執行') const joke = use(props.api) return ( <div className='a_value'>{joke.value}</div> )}然后演示再看看。我們發現 effect 也不會執行。然后我們還可以搞點好玩的。
Item 代碼改造如下：
const Item = (props) => { if (!props.api) { const [count, setCount] = useState(0) console.log('初始化時，api == null') return <div onClick={() => setCount(count + 1)}>nothing, {count}</div> } console.log('初始化時這里是否執行') const joke = use(props.api) return ( <div className='a_value'>{joke.value}</div> )}注意看，我們在 if 條件判斷中，單獨創建了一個 useState，并在對應的元素上添加了一個讓 count 遞增的交互。
這段在之前版本的開發中一定會觸發語法錯誤提示的代碼。
最終也是能勉強運行，但是代碼會瘋狂報錯。
然后，我繼續一個騷操作，我在 if 中條件判斷中，使用 useEffect，代碼如下：
const Item = (props) => { if (!props.api) { useEffect(() => { console.log('useEffect 在 if 中執行') }, []) return <div>nothing</div> } console.log('初始化時這里是否執行') const joke = use(props.api) return ( <div className='a_value'>{joke.value}</div> )}也能正常執行。觀察一下演示效果：
結論：
很明顯，react 19 的 hook 在底層發生了一些優化更新，我們可以不用非得把所有的 hook 都放在函數組件的最前面去執行了。
在 React 19 中，我們可以把 hook 放到 return 之后，也可以放到條件判斷中去執行。
但是，我們一定要注意的是，并非表示我們可以隨便亂寫。當條件互斥時，狀態之間如果存在不合理的耦合關系，依然不能正常執行。我們列舉兩個案例來觀察這個事情。
第一個案例，我們依然在 if 中執行一個 useEffect，但是不同的是，我把在 if 之外的狀態 counter 作為依賴項傳入。
代碼如下。
const Item = (props) => { const [counter, setCounter] = useState(0) if (!props.api) { useEffect(() => { console.log('useEffect 在 if 中執行') }, [counter]) return <div>nothing</div> } console.log('初始化時這里是否執行') const joke = use(props.api) return ( <div className='a_value' onClick={() => setCounter(counter + 1)}>{joke.value}</div> )}此時一個很明顯的問題就是，if 內部在 UI 邏輯上本和外部是互斥的關系，但是我們在狀態邏輯上卻相互關聯。因此這個之后，代碼執行就會報錯，明確的告訴你這種寫法不合理。
非常的方便省事。
當然這樣寫會造成冗余的接口請求執行。因此我們可以稍作調整就可以了。
這里需要根據需求調整，案例只做演示。
const _initApi = getApi()function Index() { const [api, setApi] = useState(_initApi) ...}OK，今天的案例就介紹到這里，后續的章節我們還會繼續更多的實戰案例的分析。
本文鏈接：http://m.www897cc.com/showinfo-26-92464-0.html喔！React19 中的 Hook 可以寫在 If 條件判斷中了。Use 實踐：點擊按鈕更新數據
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號