React Server Components与替代框架全解析
1. React Server Actions与Server Components概述
React Server Actions是一项强大的新特性,允许我们从客户端代码调用服务器端函数。以下是一个在表单中使用Server Actions的示例:
export default App() {
<form action={requestUsername}>
<input type="text" name="username" />
<button type="submit">Request</button>
</form>
}
在这个例子中, requestUsername
是传递给 <form>
的服务器操作。当用户提交表单时,会向服务器函数 requestUsername
发起网络请求。调用表单中的服务器操作时,React会将表单的 FormData
作为第一个参数提供给服务器操作。
通过将服务器操作传递给表单操作,React可以逐步增强表单,这意味着表单可以在JavaScript包加载之前提交。
在表单之外,服务器操作是暴露的服务器端点,可以在客户端代码的任何位置调用。以下是一个在表单外使用服务器操作的示例:
"us