盧偉冰長文解析K60至尊版 對Redmi有著里程碑式的意義
在今天的Redmi后性能時代戰略發布會結束之后，Redmi總經理盧偉冰又帶來了一篇長文，詳解了為什么 Redmi 要開啟后性能時代？為什么選擇和 MediaTek、Pixelworks 深度合作？以及后性
接下來，我們將會以大量的實踐案例來展開 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://www.tebozhan.com/showinfo-26-92464-0.html喔！React19 中的 Hook 可以寫在 If 條件判斷中了。Use 實踐：點擊按鈕更新數據
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號