react19 Beta更新了些什么?Cloudprg2024/07/07 16:31:40阅读2分钟

React 19 更新内容

一、Actions 概念

  1. 待定状态:过渡异步函数执行的结果,状态在开始和结束时变更和回复。
  2. 乐观更新:提供了useOptimistic的 Hooks,在与提交时及时给用户反馈。
  3. 错误处理:Actions 提供错误处理,在请求失败时,可以先试错便捷,自动将乐观更新恢复到其原始值。
  4. 表单:react 表单支持 actions 或者 form-actions 接收函数,并在提交后自动重置表单。

二、四个新增的 actions 相关 hooks

  1. useActionsState:接收一个回调,回调里处理表单的异步提交过程。并且该函数返回一个数组,解构出【错误,提交钩子,等待状态】。
  2. useFormStatus:在 react 中我们经常想要不通过传递信息就能使内部组件访问外部变量,则使用 context,现在有这个 hooks,直接访问外层的 form。
  3. useOptimistic:作用是在调用时立即更新状态,在更新完成或错误时,自动切换回 hooks 接收值。(个人认为这里应该是自动帮忙做了useEffect受控更新这件事)
  4. use:接收一个 promise,将 React 挂起,直到 promise 解析完成。(这不就是 Nextjs 中 app 模式下的服务器组件 api 获取数据的方式么?)

注意:use 只能在渲染中调用,类似于 hooks 但可以有条件的被调用。

三、服务器组件概念

  1. 是否有破坏性:组件本身是稳定的,但是实现它的打包器和底层 api 是不符合 semver 规范的,这会在 19.x 中导致小的破坏。
  2. 如何构建支持:建议固定版本号,或使用 Canary 发行版。
  3. 就像 Nextjs 标注客户端组件一样,但是不需要在头部写'use serve'指令,只要将组件用 async await 语法糖包裹使用,就默认是服务端组件了。

四、forwardRef 将被移除

  1. 组件允许接收 ref 作为 props 来访问
  2. 但在类组件中,不能使用 ref,因为它指向组件实例。若要使用就得用 React.forwardRef

五、其它

  1. 消减了没有意义的水合错误
  2. useContext 现在的实例自身就是 Provider,无需再用 Context.Provider
  3. ref 支持接收一个回调,用来添加额外的执行逻辑
  4. 由于 ref 支持接收清理函数,因此 ts 不支持它隐式返回了
  5. 支持原生处理元数据标签,因为在过去,react决定接收元数据的组件与head相差甚远因此根本不渲染head
  6. 支持脚本添加异步
  7. 支持渲染样式表
标签:
评论(1)
Random Avataruid:33
Dan2024/07/07 16:42:50
Pretty useful paper回复
留言板