大家好，我是卡頌。

在貴定等地區(qū)，都構建了全面的區(qū)域性戰(zhàn)略布局，加強發(fā)展的系統(tǒng)性、市場前瞻性、產品創(chuàng)新能力，以專注、極致的服務理念，為客戶提供成都做網站、網站制作 網站設計制作按需開發(fā)網站,公司網站建設,企業(yè)網站建設,成都品牌網站建設,營銷型網站,外貿營銷網站建設,貴定網站建設費用合理。

都說Hooks是React的未來，但Hooks的最佳實踐是什么呢?

關于這塊知識，官方文檔一點兒都沒提及。

所以在實際項目中，常會出現(xiàn)類似下面的問題：

 
 
 
 

  
  
  
  
// ... 
  
  
  
  
useEffect(() => { 
  
  
  
  
  fetchData(a, b).then( 
  
  
  
  
    // ... 
  
  
  
  
  ) 
  
  
  
  
}, [a, b]) 
  
  
  
  
//... 
 
 
 
 

useEffect依賴了a b兩個狀態(tài)，當其中任意一個變化后會執(zhí)行fetchData請求數(shù)據(jù)。

當應用變得復雜，要追蹤a、b何時變化變得越來越難。

假以時日接口調整，fetchData還需要狀態(tài)c作為參數(shù)。那么追蹤狀態(tài)變化的難度又會進一步提高。

最終會導致：

• 輕則無意義的fetchData多次調用
• 重則邏輯出現(xiàn)難以追查的bug

有朋友會說：你可以封裝自定義Hook啊。

這只是將問題隱藏的更深了......

如何解決這個問題

以上問題的本質原因是：「副作用」實在太多，可以被當作「副作用」的東西也實在太多。這導致useEffect被濫用。

所以，要解決濫用問題，就需要為不同類型「副作用」提供官方解決方案。

這樣，具體問題有了具體解決方案，才不會useEffect一把梭。

從一個PR看到變化

最近React有個很不起眼的PR[1]：

大體意思是：

在之前，當你在一個已經卸載的組件(unmounted)中調用setState會觸發(fā)一個warning，這個PR將移除這個warning。

舉個例子，以下代碼在組件mount時注冊handleChange：

 
 
 
 

  
  
  
  
useEffect(() => { 
  
  
  
  
  function handleChange() { 
  
  
  
  
     setState(store.getState()) 
  
  
  
  
  } 
  
  
  
  
  store.subscribe(handleChange) 
  
  
  
  
   
  
  
  
  
  return () => store.unsubscribe(handleChange) 
  
  
  
  
}, []) 
 
 
 
 

如果你忘記寫這行解綁代碼：

 
 
 
 

  
  
  
  
return () => store.unsubscribe(handleChange) 
 
 
 
 

那么組件卸載后handleChange也可能被調用，進而調用setState。

這是潛在的內存泄漏。

在之前的React中，這種行為會報warning。

那為什么要移除這種行為下的warning呢?

PR的背后

一方面，這個warning有一定概率誤判，比如「點擊按鈕提交表單」：

 
 
 
 

  
  
  
  
async function handleSubmit() { 
  
  
  
  
  setPending(true) 
  
  
  
  
  await post('/someapi') 
  
  
  
  
  setPending(false) 
  
  
  
  
} 
 
 
 
 

點擊按鈕后調用setPending觸發(fā)loading圖標顯示，接著發(fā)起post請求。

有可能請求返回前組件就卸載了，此時會調用：

 
 
 
 

  
  
  
  
setPending(false) 
 
 
 
 

并不會有內存泄漏風險，但是會報warning。

不過warning移除還有另一個更本質的原因：

在第一個示例中，我們在useEffect中調用store.subscribe，這種行為可以歸類為：

在組件中訂閱外部源

什么是「外部源」呢?

任何「變化與否不受React控制的源」都是「外部源」。

比如：

• 各種第三方狀態(tài)管理庫
• 希望location.hash變化觸發(fā)組件更新

未來所有這類行為都會收斂到useMutableSource這個Hook中。

更多例子

再比如，對于I/O操作(比如「請求數(shù)據(jù)」)這種大家都會放在useEffect中的邏輯，未來使用resource結合Suspense可能是更好的選擇：

 
 
 
 

  
  
  
  
const resource = fetchDetail(); 
  
  
  
  
 
  
  
  
  
function Page() { 
  
  
  
  
  return ( 
  
  
  
  
    Loading...}> 
  
  
  
  
      
 
  
  
  
  
     
  
  
  
  
  ); 
  
  
  
  
} 
  
  
  
  
 
  
  
  
  
function Details() { 
  
  
  
  
  const data = resource.read(); 
  
  
  
  
  return 
{data.name}
; 
  
  
  
  
} 
 
 
 
 

 以上例子中，調用fetchDetail會發(fā)起數(shù)據(jù)請求。

Details組件調用resource.read直接消費數(shù)據(jù)即可。

如果數(shù)據(jù)還未返回，視圖會渲染最近的Suspense的fallback(即

Loading...

)。

總結

「副作用」是多種多樣的，以前沒得選，只能用useEffect。

隨著React18的穩(wěn)定，面對不同「副作用」場景，會有更明確的解決方案。

屆時，可能才最終迎來Hooks真香的時代......

當前名稱：從一個PR窺探React未來開發(fā)方式
URL地址：http://www.dlmjj.cn/article/dhghhcs.html