Links

人人都能看懂的 React : https://learnreact.design/posts/what-is-react/zh

React 周邊

https://github.com/nfl/react-helmet 插入原生 head,比如 meta

React 16 -> 18(并發(fā))

React 中的事件機(jī)制. 批量渲染,不能跨事件,onClick,addEventListener, Concurrent Mode,Sync Render

React 19 English Blog

https://react.dev/blog/2024/04/25/react-19

Tips

React 19 存在新的呢? useActionState, useFormStatus, useOptimistic, use
React 19 存在升級呢? <ThemeContext; ref clean; useDeferredValue; initialValue; 文檔元數(shù)據(jù) 手動加載樣式表 支持異步腳本 資源預(yù)加載 錯誤處理(createRoot 存在三個錯誤處理選項)
React 19 我好奇的? React Compiler

Keywords

• JSX Transform

安裝

{
  "dependencies": {
    "@types/react": "npm:types-react@beta",
    "@types/react-dom": "npm:types-react-dom@beta"
  },
  "overrides": {
    "@types/react": "npm:types-react@beta",
    "@types/react-dom": "npm:types-react-dom@beta"
  }
}

破壞性變更

• Error in render 不會拋出兩次了
• 移除廢棄的 API
  • ReactDOM.render was deprecated in March 2022 (v18.0.0)
  • 19 Deprecated: element.ref
  • 19 Deprecated: react-test-renderer

值得關(guān)注的

• 支持ESM - based CDN

  <script type="module">
    import React from "https://esm.sh/react@19/?dev"
    import ReactDOMClient from "https://esm.sh/react-dom@19/client?dev"
  </script>

• Ref cleanups required
• useRef requires an argument
  之前會遇到以下這種情況,但是現(xiàn)在不會了

const ref = useRef < number > null;
// Can not assign to 'current' because it is a read-only property
ref.current = 1;

• The JSX namespace in TypeScript (scoped jsx)

  declare module "react"

New Features

actions

useTransition ; useOptimistic; use

const [isPending, startTransition] = useTransition( );

use API

• use hook is preferred over useContext hook, because it is more flexible.

const theme = use(ThemeContext);

ref as a prop

deprecate forwardRef

<Context /> as a provider

<ThemeContext value="dark"> {children} </ThemeContext>

Cleanup functions for refs

類似useEffect的使用

ref => {
  // ref created
  ...
  // NEW: return a cleanup function to reset
  // The ref when element is removed from DOM.
  return () => {
    // ref cleanup
  };
};

useDeferredValue

類比防抖和節(jié)流函數(shù), 只不過useDeferredValue更適合優(yōu)化渲染
是一個體驗優(yōu)化,可以延遲渲染UI的某一個部分,也就是里面包裹的是state
官方例子: searchBar + list: 可以將 list 的 result 使用useDeferredValue包裹一下

Additional

• If you have a lot of unsound access to xxx.
• Some of the removed have types been moved to more relevant packages.
• You will make an API request, and then handle the response. Then, we have to handle pending states, errors,optimistic updates, and sequential requests.
• The main difference between useDeferredValue and unoptimized re-rendering
• Let’s walk through an example to see when this is useful.

Magic

• Libraries depending on React internals may block upgrades?
• 為啥 ref 增加了默認(rèn)參數(shù)就可以更改 xxRef.current 了呢?
• useOptimistic 只能在 form 中使用嗎,解決了18中什么痛點問題? 感覺這個hook 很雞肋,對于前端能知道結(jié)果的異步請求, 可以優(yōu)化UI響應(yīng)速度. 適用于異步場景,由于網(wǎng)絡(luò)原因,異步數(shù)據(jù)獲取比較慢,可以使用這個hook來預(yù)測結(jié)果
• 為什么說瀏覽器的渲染非常耗時呢?
  https://peterchen1997.github.io/Frontend-Repo/nav.07.HTML/01-%E6%A0%87%E5%87%86/DOM%E6%93%8D%E4%BD%9C%E4%B8%BA%E4%BB%80%E4%B9%88%E8%80%97%E6%97%B6.html#dom%E6%93%8D%E4%BD%9C%E4%BC%98%E5%8C%96