一加Ace2 Pro官宣：普及16G內存 引領24G
一加官方今天繼續為本月發布的新機一加Ace2 Pro帶來預熱，公布了內存方面的信息。“淘汰 8GB ，12GB 起步，16GB 普及，24GB 引領，還有呢？#一加Ace2Pro#，2023 年 8 月，敬請期待。”同時
許多人在學習 React 時會有這樣一個疑問，不斷看到 React 官方團隊言論，或者說各路大佬都是在說 React 是函數式編程，我們寫組件確實寫的是組件，但問題就在于，我們寫的組件是有內部狀態，這樣的函數就不是純函數了，這怎么能算是函數式編程呢？
想不通。
今天這篇文章，就來跟大家解釋一下，為什么 React 的函數式組件，其實就是純函數。
UI = f(state)我們在聲明一個函數式組件時，常常會使用到 hook 來聲明一些狀態或者方法，但是我們在使用 hook 時，你會發現 hook 會有一些奇怪的規則，那么就是不能把 hook 放到條件判斷中去。
if (a === 1) { const [count, setCount] = useState(0)}然后有的人就很不理解這個現象。于是把這個情況定性為 React 的設計缺陷。但這真的是設計缺陷嗎？
我們只需要換個思路，你就能對這個現象豁然開朗。
在初學階段，我們會很自然的認為，當我們使用 useState 在函數內部定義了一個狀態時，那么這個狀態一定是保存在這個函數內部的。
function Demo() { const [count, setCount] = useState(0) ...}然后理解得多了，才發現并不是這樣。每一個函數的狀態都被存在了另外一個模塊里（Fiber tree）。也就是說，只要 React 允許，我們甚至可以在別的組件訪問到任意一個組件里的狀態。當然 React 對這種情況做了限制，只允許通過特定的語法來做到這個事情。
函數組件中的所有的 hook 都是從外部傳入的。
我們再來看一下這個公式。
UI = f(state)這個時候我們會恍然發現，雖然 state 在函數內部定義/獲取了，但是很明顯，React 是期望大家把他當成外部傳入的參數來理解的。
例如我們有這樣一個函數。
function Counter({x}) { const [count, setCount] = useState(0) return ( <div>{x + count}</div> )}他可以等價于。
function Counter({x}, [count = 0, setCount]) { return ( <div>{x + count}</div> )}這個時候我們就明朗了，函數，原來還是純函數。但是為什么語法不這樣設計呢，不是更好理解嗎？當然是因為參數太多了寫不下了呀，因此 React 把傳參的行為，下放到了函數內部，通過 hook 的方式來實現。
如果 state 是外部傳入的參數，那么此時我們就要重新審視一下為什么不能把 hook 放到條件判斷中去了。
例如：
function Counter({x}) { if (a === 0) { const [loading, setLoading] = useState(false) } const [count, setCount] = useState(0) return ( <div>{x + count}</div> )}所以，useState 是外部傳參，那么參數本來就應該有嚴格的順序要求，這個時候如果第一個參數因為不符合條件而在代碼邏輯里消失了，那第二個參數，不就變成第一個參數了嗎？
這個時候代碼邏輯中，就會把第二個參數當成第一個參數去使用，這不就亂了嗎？
當我們調用 setState 時，表示入參正在發生變化，函數自然也會重新執行。
hook 存放在函數外部，因此不屬于函數內部的狀態。我們在理解函數式組件是純函數時，應該把 hook 當成參數去看待，這樣很多現象就非常自然了。
函數式編程更加側重于把邏輯解耦拆分成不同的函數，然后通過函數組合的形式去構建一個完整的邏輯，例如我們非常常見的 map 方法
function func(item) { return item + 1}var newArr = arr.map(func)所以理解函數式編程，會對邏輯封裝解耦的能力要求比較高，在這種情況下，理解函數式編程確實會存在一定的門檻。所以最后思考一個問題，為什么 state 一定要是不可變數據？
本文鏈接：http://www.tebozhan.com/showinfo-26-87257-0.htmlReact 函數組件不是有狀態嗎，為什么還要說他是純函數
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： HTMX：重回前端的原始時代？
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號