Links

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

React 周边

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

React 16 -> 18

React 中的事件机制. 批量渲染,不能跨事件,onClick,addEventListener, Concurrent Mode,Sync Render

React 需要支持的 Tasks

用户交互
宏任务
微任务
浏览器会在主线程空闲时,从任务队列中取出下一个异步任务并执行, 响应用户的操作.这和 exec task 有什么区别的呢?

React 19 English Doc

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

Tips

React 19 存在哪些破坏性变更呢? useActionState useFormStatus useOptimistic use
React 19 存在哪些更新变更呢? ref props ; <ThemeContext; ref clean; useDeferredValue initialValue; 文档元数据 手动加载样式表 支持一步脚本 资源预加载 错误处理(createRoot存在三个错误处理选项)

React 19 存在哪些值得关注的变更呢?

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

值得关注的

• 支持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
  之前会遇到以下这种情况,但是现在不会了

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

类比防抖和节流函数, 只不过useDeferredValue更适合优化渲染
是一个体验优化,可以延迟渲染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 增加了默认参数就可以更改 xxRef.current 了呢?
• useOptimistic 只能在 form 中使用吗,解决了18中什么痛点问题? 感觉这个hook 很鸡肋,对于前端能知道结果的异步请求, 可以优化UI响应速度. 适用于异步场景,由于网络原因,异步数据获取比较慢,可以使用这个hook来预测结果
• 为什么说浏览器的渲染非常耗时呢?
  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