React 19 更新内容
一、Actions 概念
- 待定状态:过渡异步函数执行的结果,状态在开始和结束时变更和回复。
- 乐观更新:提供了
useOptimistic
的 Hooks,在与提交时及时给用户反馈。
- 错误处理:Actions 提供错误处理,在请求失败时,可以先试错便捷,自动将乐观更新恢复到其原始值。
- 表单:react 表单支持 actions 或者 form-actions 接收函数,并在提交后自动重置表单。
二、四个新增的 actions 相关 hooks
- useActionsState:接收一个回调,回调里处理表单的异步提交过程。并且该函数返回一个数组,解构出【错误,提交钩子,等待状态】。
- useFormStatus:在 react 中我们经常想要不通过传递信息就能使内部组件访问外部变量,则使用 context,现在有这个 hooks,直接访问外层的 form。
- useOptimistic:作用是在调用时立即更新状态,在更新完成或错误时,自动切换回 hooks 接收值。(个人认为这里应该是自动帮忙做了
useEffect
受控更新这件事)
- use:接收一个 promise,将 React 挂起,直到 promise 解析完成。(这不就是 Nextjs 中 app 模式下的服务器组件 api 获取数据的方式么?)
注意:use 只能在渲染中调用,类似于 hooks 但可以有条件的被调用。
三、服务器组件概念
- 是否有破坏性:组件本身是稳定的,但是实现它的打包器和底层 api 是不符合 semver 规范的,这会在 19.x 中导致小的破坏。
- 如何构建支持:建议固定版本号,或使用 Canary 发行版。
- 就像 Nextjs 标注客户端组件一样,但是不需要在头部写'use serve'指令,只要将组件用 async await 语法糖包裹使用,就默认是服务端组件了。
四、forwardRef 将被移除
- 组件允许接收 ref 作为 props 来访问。
- 但在类组件中,不能使用 ref,因为它指向组件实例。若要使用就得用 React.forwardRef。
五、其它
- 消减了没有意义的水合错误。
- useContext 现在的实例自身就是 Provider,无需再用 Context.Provider。
- ref 支持接收一个回调,用来添加额外的执行逻辑。
- 由于 ref 支持接收清理函数,因此 ts 不支持它隐式返回了。
- 支持原生处理元数据标签,因为在过去,react决定接收元数据的组件与head相差甚远因此根本不渲染head。
- 支持脚本添加异步
- 支持渲染样式表