6月安卓手機性價比榜：Note 12 Turbo斷層式碾壓
6月份有一個618，雖然這是京東周年慶的日子，但別的電商也都不約而同的跟進了，反正促銷沒壞處，廠商和用戶都能滿意。618期間一些產品也出現了歷史低價，那么各個價位段的產品性價比
近日，React 團隊成員在社交平臺表示，團隊正在開發 React v19 版本，并且沒有計劃發布 v18.3 版本。
圖片
React 19 預計將推出 4 個全新 Hooks，這些 Hooks 主要關注 React 中的兩個痛點：數據獲取和表單。 這些 Hooks 目前在 React 預覽版本中作為實驗性 API 提供，預計會成為 React 19 的一部分，但是最終發布之前，API 可能會有所變化。
新的 Hooks 包括：
use 是一個實驗性 React Hook，它可以讓讀取類似于 Promise 或 context 的資源的值。
const value = use(resource);官方文檔：https://zh-hans.react.dev/reference/react/use
use 可以在客戶端進行“掛起”的 API。可以將一個 promise 傳遞給它，React 將會在該 promise 解決之前進行掛起。它的基本語法如下：
import { use } from 'react';function MessageComponent({ messagePromise }) { const message = use(messagePromise); // ...}下面來看一個簡單的例子：
import * as React from 'react';import { useState, use, Suspense } from 'react';import { faker } from '@faker-js/faker';export const App = () => { const [newsPromise, setNewsPromise] = useState(() => fetchNews()); const handleUpdate = () => { fetchNews().then((news) => { setNewsPromise(Promise.resolve(news)); }); }; return ( <> <h3> 新聞列表 <button onClick={handleUpdate}>刷新</button> </h3> <NewsContainer newsPromise={newsPromise} /> </> );};let news = [...new Array(4)].map(() => faker.lorem.sentence());const fetchNews = () => new Promise<string[]>((resolve) => // 使用 setTimeout 模擬數據獲取 setTimeout(() => { // 每次刷新時添加一個標題 news.unshift(faker.lorem.sentence()); resolve(news); }, 1000) );const NewsContainer = ({ newsPromise }) => ( <Suspense fallback={<p>請求中...</p>}> <News newsPromise={newsPromise} /> </Suspense>);const News = ({ newsPromise }) => { const news = use<string[]>(newsPromise); return ( <ul> {news.map((title, index) => ( <li key={index}>{title}</li> ))} </ul> );};在上面的例子中，每次刷新時，都會先顯示“請求中...”，請求到數據后進行展示：
圖片
官方文檔中，關于 <Suspense> 有一個警告：
目前尚不支持在不使用固定框架的情況下進行啟用 Suspense 的數據獲取。實現支持 Suspense 數據源的要求是不穩定的，也沒有文檔。React 將在未來的版本中發布官方 API，用于與 Suspense 集成數據源。
在新版本中，use 可能就是用于與 Suspense 集成數據源的官方 API。
這個全新的use hook 與其他 Hooks 不同，它可以在循環和條件語句中像 if 一樣被調用。這意味著我們可能不再需要依賴像 TanStack Query 這樣的第三方庫在客戶端進行數據獲取。然而，這仍需進一步觀察，因為 Tanstack Query 的功能遠不止解析 Promise 這么簡單。
這個 use hook 也可以用來讀取 React Context。它與 useContext 作用完全相同，只是可以在循環（如 for）和條件語句（如 if）中調用。
import { use } from 'react';function HorizontalRule({ show }) { if (show) { const theme = use(ThemeContext); return <hr className={theme} />; } return false;}這將簡化某些場景下的組件層級結構，因為在循環或條件語句中讀取 context，之前唯一的方法就是將組件一分為二。
在性能方面，這一改進也是巨大的進步，因為現在即使 context 發生變化，我們也可以有條件地跳過組件的重新渲染。
useOptimistic Hook 允許在進行提交動作的同時，能夠樂觀地更新用戶界面，提升用戶體驗。其語法如下：
import { useOptimistic } from 'react';function AppContainer() { const [optimisticState, addOptimistic] = useOptimistic( state, // 更新函數 (currentState, optimisticValue) => { // 合并并返回帶有樂觀值的新狀態 }, );}樂觀更新：一種更新應用程序中數據的策略。這種策略通常會先更改前端頁面，然后向服務器發送請求，如果請求成功，則結束操作；如果請求失敗，則頁面回滾到先前狀態。這種做法可以防止新舊數據之間的跳轉或閃爍，提供更快的用戶體驗。
下面來看一個添加購物車的例子：
import { useState, useOptimistic } from 'react';const AddToCartForm = ({ id, title, addToCart, optimisticAddToCart }) => { const formAction = async (formData) => { optimisticAddToCart({ id, title }); try { await addToCart(formData, title); } catch (e) { // 捕獲錯誤 } }; return ( <form action={formAction}> <h2>{title}</h2> <input type="hidden" name="itemID" value={id} /> <button type="submit">添加到購物車</button> </form> );};type Item = { id: string; title: string;};const Cart = ({ cart }: { cart: Item[] }) => { if (cart.length == 0) { return null; } return ( <> 購物車: <ul> {cart.map((item, index) => ( <li key={index}>{item.title}</li> ))} </ul> <hr /> </> );};export const App = () => { const [cart, setCart] = useState<Item[]>([]); const [optimisticCart, optimisticAddToCart] = useOptimistic<Item[], Item>( cart, (state, item) => [...state, item] ); const addToCart = async (formData: FormData, title) => { const id = String(formData.get('itemID')); await new Promise((resolve) => setTimeout(resolve, 1000)); setCart((cart: Item[]) => [...cart, { id, title }]); return { id }; }; return ( <> <Cart cart={optimisticCart} /> <AddToCartForm id="1" title="JavaScript權威指南" addToCart={addToCart} optimisticAddToCart={optimisticAddToCart} /> <AddToCartForm id="2" title="JavaScript高級程序設計" addToCart={addToCart} optimisticAddToCart={optimisticAddToCart} /> </> );};在上面的例子中，將商品添到購物車時，會先在購物車列表看到剛剛添加的商品，而不必等到數據請求完成。這樣，用戶可以更快地看到更新后的購物車內容，提供更加流暢的用戶體驗。
圖片
在介紹這個 Hook 之前，先來看以下這個 Hook 使用的背景。
React 將引入一個新組件：<form>，它是創建用于提交信息的交互式控件，可以將一個函數作為action的屬性值。當用戶提交表單時，React 將自動調用此函數，以執行相應的操作。
<form actinotallow={handleSubmit} />注意，如果在 React 18 中添加<form action>屬性，就會收到警告：
?? Warning: Invalid value for prop action on <form> tag. Either remove it from the element or pass a string or number value to keep it in the DOM.
這里的意思是，<form>標簽上的 prop action無效。要么從元素中刪除它，要么傳遞一個字符串或數字值以將其保留在 DOM 中。
而在新版本中，可以直接在<form>標簽上設置action屬性。例如，在上面的購物車例子中，：
const AddToCartForm = ({ id, title, addToCart }) => { const formAction = async (formData) => { try { await addToCart(formData, title); } catch (e) { // 捕獲錯誤 } }; return ( <form action={formAction}> <h2>{title}</h2> <input type="hidden" name="itemID" value={id} /> <button type="submit">添加到購物車</button> </form> );};addToCart 函數并不是在服務器端執行的，而是在客戶端（例如用戶的瀏覽器）上運行的。這個函數可以是一個異步函數，如網絡請求，而不阻止其他代碼的執行。通過使用addToCart函數，開發者可以更簡單地處理React中的AJAX表單，例如在搜索表單中。然而，這可能還不足以完全擺脫像 React Hook Form 這樣的第三方庫，因為它們不僅處理表單提交，還包括驗證、副作用等多種功能。
看完這個新功能，下面就來看看這一部分要介紹的新 Hook：useFormState。
useFormState 是一個可以根據某個表單動作的結果更新 state 的 Hook。
const [state, formAction] = useFormState(fn, initialState);只有在表單提交觸發 action 后才會被更新的值，如果該表單沒有被提交，該值會保持傳入的初始值不變。
例如，這可以用來顯示由表單操作返回的確認消息或錯誤消息。
import { useState } from 'react';import { useFormState } from 'react-dom';const AddToCartForm = ({ id, title, addToCart }) => { const addToCartAction = async (prevState, formData) => { try { await addToCart(formData, title); return '添加成功'; } catch (e) { return "添加失敗：賣完啦"; } }; const [message, formAction] = useFormState(addToCartAction, null); return ( <form action={formAction}> <h2>{title}</h2> <input type="hidden" name="itemID" value={id} /> <button type="submit">添加到購物車</button> {message} </form> );};type Item = { id: string; title: string;};export const App = () => { const [cart, setCart] = useState<Item[]>([]); const addToCart = async (formData: FormData, title) => { const id = String(formData.get('itemID')); await new Promise((resolve) => setTimeout(resolve, 1000)); if (id === '1') { setCart((cart: Item[]) => [...cart, { id, title }]); } else { throw new Error('Unavailable'); } return { id }; }; return ( <> <AddToCartForm id="1" title="JavaScript權威指南" addToCart={addToCart} /> <AddToCartForm id="2" title="JavaScript高級程序設計" addToCart={addToCart} /> </> );};效果如下：
圖片
注意：useFormState 需要從 react-dom 中導入，而不是從 react 中導入。
useFormStatus 用于獲取上次表單提交的狀態信息。
const { pending, data, method, action } = useFormStatus();它不接收任何參數，會返回一個包含以下屬性的 status 對象：
下面來繼續看購物車的例子，將商品添加到購物車成功前，禁用添加按鈕：
import { useState } from 'react';import { useFormStatus } from 'react-dom';const AddToCartForm = ({ id, title, addToCart }) => { const formAction = async (formData) => { try { await addToCart(formData, title); } catch (e) { // 捕獲錯誤 } }; return ( <form action={formAction}> <h2>{title}</h2> <input type="hidden" name="itemID" value={id} /> <SubmitButton /> </form> );};const SubmitButton = () => { const { pending } = useFormStatus(); return ( <button disabled={pending} type="submit"> 添加到購物車 </button> );};type Item = { id: string; title: string;};const Cart = ({ cart }: { cart: Item[] }) => { if (cart.length == 0) { return null; } return ( <> 購物車: <ul> {cart.map((item, index) => ( <li key={index}>{item.title}</li> ))} </ul> <hr /> </> );};export const App = () => { const [cart, setCart] = useState<Item[]>([]); const addToCart = async (formData: FormData, title) => { const id = String(formData.get('itemID')); await new Promise((resolve) => setTimeout(resolve, 1000)); setCart((cart: Item[]) => [...cart, { id, title }]); return { id }; }; return ( <> <Cart cart={cart} /> <AddToCartForm id="1" title="JavaScript權威指南" addToCart={addToCart} /> <AddToCartForm id="2" title="JavaScript高級程序設計" addToCart={addToCart} /> </> );};添加購物車時效果如下：
圖片
注意：useFormState 需要從 react-dom 中導入，而不是從 react 中導入。此外，它僅在父級表單使用 action 屬性時才有效。
本文鏈接：http://www.www897cc.com/showinfo-26-69007-0.htmlReact 19 即將推出的四個全新 Hooks，很實用！
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號