\u563f，\u524d\u7aefer\u4eec！\u4f60\u4eec\u662f\u4e0d\u662f\u8fd8\u5728\u4e3aReact\u5e94\u7528\u7684\u6027\u80fd\u800c\u5934\u75bc？\u662f\u4e0d\u662f\u8fd8\u5728\u4e3a\u4ee3\u7801\u5305\u4f53\u79ef\u800c\u6293\u8033\u6320\u816e？\u662f\u4e0d\u662f\u8fd8\u5728\u4e3a\u670d\u52a1\u5668\u6e32\u67d3\u7684\u590d\u6742\u6027\u800c\u4e0d\u77e5\u6240\u63aa？\u9192\u9192\u5427！React \u670d\u52a1\u5668\u7ec4\u4ef6（RSC）\u6765\u4e86，\u5b83\u5e26\u7740\u670d\u52a1\u7aef\u6e32\u67d3\u548c\u96f6\u5305\u4f53\u79ef\u6765\u62ef\u6551\u4f60\u4eec\u4e86！<\/p>\n
\u4eca\u5929\u6211\u5c31\u6765\u6252\u4e00\u6252React \u670d\u52a1\u5668\u7ec4\u4ef6\u7684\u90a3\u4e9b\u4e8b，\u4ece\u6982\u5ff5\u5230\u5b9e\u8df5，\u8ba9\u4f60\u7684React\u5e94\u7528\u66f4\u9ad8\u6548！<\/p>\n
\u5728\u524d\u7aef\u5f00\u53d1\u4e2d，React \u670d\u52a1\u5668\u7ec4\u4ef6\u662f\u63d0\u5347\u5e94\u7528\u6027\u80fd\u548c\u5f00\u53d1\u4f53\u9a8c\u7684\u91cd\u8981\u624b\u6bb5：<\/p>\n
React \u670d\u52a1\u5668\u7ec4\u4ef6（RSC）\u662fReact 18\u5f15\u5165\u7684\u4e00\u79cd\u65b0\u7ec4\u4ef6\u7c7b\u578b，\u53ef\u4ee5\u5728\u670d\u52a1\u5668\u7aef\u6e32\u67d3，\u4e0d\u4f1a\u5305\u542b\u5728\u5ba2\u6237\u7aefbundle\u4e2d\u3002<\/p>\n
| \u6e32\u67d3\u4f4d\u7f6e<\/td>\n | \u670d\u52a1\u5668<\/td>\n | \u5ba2\u6237\u7aef<\/td>\n<\/tr>\n | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
| \u5305\u4f53\u79ef<\/td>\n | \u4e0d\u5305\u542b\u5728\u5ba2\u6237\u7aefbundle\u4e2d<\/td>\n | \u5305\u542b\u5728\u5ba2\u6237\u7aefbundle\u4e2d<\/td>\n<\/tr>\n | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
| \u6570\u636e\u83b7\u53d6<\/td>\n | \u76f4\u63a5\u5728\u670d\u52a1\u5668\u7aef\u83b7\u53d6<\/td>\n | \u9700\u8981\u901a\u8fc7\u7f51\u7edc\u8bf7\u6c42\u83b7\u53d6<\/td>\n<\/tr>\n | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
| \u751f\u547d\u5468\u671f<\/td>\n | \u65e0\u751f\u547d\u5468\u671f\u65b9\u6cd5<\/td>\n | \u6709\u5b8c\u6574\u7684\u751f\u547d\u5468\u671f<\/td>\n<\/tr>\n | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
| \u72b6\u6001\u7ba1\u7406<\/td>\n | \u65e0\u72b6\u6001（\u4e0d\u80fd\u4f7f\u7528useState\u7b49hooks）<\/td>\n | \u6709\u72b6\u6001（\u53ef\u4ee5\u4f7f\u7528\u6240\u6709hooks）<\/td>\n<\/tr>\n | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
| \u526f\u4f5c\u7528<\/td>\n | \u65e0\u526f\u4f5c\u7528（\u4e0d\u80fd\u4f7f\u7528useEffect\u7b49）<\/td>\n | \u6709\u526f\u4f5c\u7528（\u53ef\u4ee5\u4f7f\u7528\u6240\u6709hooks）<\/td>\n<\/tr>\n | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
| \u6d4f\u89c8\u5668API<\/td>\n | \u4e0d\u80fd\u4f7f\u7528<\/td>\n | \u53ef\u4ee5\u4f7f\u7528<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\u670d\u52a1\u5668\u7ec4\u4ef6\u7684\u4f18\u52bf<\/h4>\n2. React \u670d\u52a1\u5668\u7ec4\u4ef6\u7684\u6838\u5fc3\u7279\u6027<\/h3>\n |
\u96f6\u5305\u4f53\u79ef\u662f\u6307\u670d\u52a1\u5668\u7ec4\u4ef6\u4e0d\u4f1a\u5305\u542b\u5728\u5ba2\u6237\u7aefbundle\u4e2d，\u51cf\u5c11\u5ba2\u6237\u7aef\u4e0b\u8f7d\u7684\u4ee3\u7801\u91cf\u3002<\/p>\n
\u670d\u52a1\u5668\u7aef\u6e32\u67d3\u662f\u6307\u7ec4\u4ef6\u5728\u670d\u52a1\u5668\u7aef\u6e32\u67d3\u6210HTML，\u7136\u540e\u53d1\u9001\u7ed9\u5ba2\u6237\u7aef\u3002<\/p>\n
\u6570\u636e\u83b7\u53d6\u662f\u6307\u670d\u52a1\u5668\u7ec4\u4ef6\u53ef\u4ee5\u76f4\u63a5\u5728\u670d\u52a1\u5668\u7aef\u83b7\u53d6\u6570\u636e，\u4e0d\u9700\u8981\u901a\u8fc7\u5ba2\u6237\u7aef\u7f51\u7edc\u8bf7\u6c42\u3002<\/p>\n
\u4ee3\u7801\u5206\u79bb\u662f\u6307\u5c06\u670d\u52a1\u5668\u7aef\u548c\u5ba2\u6237\u7aef\u4ee3\u7801\u5206\u79bb，\u63d0\u9ad8\u5b89\u5168\u6027\u548c\u53ef\u7ef4\u62a4\u6027\u3002<\/p>\n
\u6e10\u8fdb\u5f0f\u589e\u5f3a\u662f\u6307\u670d\u52a1\u5668\u7ec4\u4ef6\u53ef\u4ee5\u4e0e\u5ba2\u6237\u7aef\u7ec4\u4ef6\u6df7\u5408\u4f7f\u7528，\u9010\u6b65\u589e\u5f3a\u5e94\u7528\u529f\u80fd\u3002<\/p>\n
\u9996\u5148，\u9700\u8981\u521b\u5efa\u4e00\u4e2a\u652f\u6301React \u670d\u52a1\u5668\u7ec4\u4ef6\u7684\u9879\u76ee\u3002\u76ee\u524d，React \u670d\u52a1\u5668\u7ec4\u4ef6\u4e3b\u8981\u5728Next.js 13+\u548cReact Server Components（RSC）\u4e2d\u652f\u6301\u3002<\/p>\n
# \u521b\u5efaNext.js 13+\u9879\u76ee
\nnpx create-next-app@latest my-app<\/p>\n
# \u8fdb\u5165\u9879\u76ee\u76ee\u5f55
\ncd my-app<\/p>\n
# \u542f\u52a8\u5f00\u53d1\u670d\u52a1\u5668
\nnpm run dev<\/p>\n
\u5728Next.js 13+\u4e2d，app\u76ee\u5f55\u4e0b\u7684\u7ec4\u4ef6\u9ed8\u8ba4\u662f\u670d\u52a1\u5668\u7ec4\u4ef6\u3002<\/p>\n
\/\/ app\/page.js – \u670d\u52a1\u5668\u7ec4\u4ef6
\nimport { getData } from '..\/lib\/data';<\/p>\n
export default async function Home() {
\n \/\/ \u5728\u670d\u52a1\u5668\u7aef\u76f4\u63a5\u83b7\u53d6\u6570\u636e
\n const data = await getData();<\/p>\n
return (
\n <div>
\n <h1>Hello, Server Components!<\/h1>
\n <ul>
\n {data.map(item => (
\n <li key={item.id}>{item.name}<\/li>
\n ))}
\n <\/ul>
\n <\/div>
\n );
\n}<\/p>\n
\u8981\u521b\u5efa\u5ba2\u6237\u7aef\u7ec4\u4ef6，\u9700\u8981\u5728\u7ec4\u4ef6\u6587\u4ef6\u9876\u90e8\u6dfb\u52a0'use client'\u6307\u4ee4\u3002<\/p>\n
\/\/ components\/ClientComponent.js – \u5ba2\u6237\u7aef\u7ec4\u4ef6
\n'use client';<\/p>\n
import { useState, useEffect } from 'react';<\/p>\n
export default function ClientComponent() {
\n const [count, setCount] = useState(0);<\/p>\n
useEffect(() => {
\n console.log('Client component mounted');
\n }, []);<\/p>\n
return (
\n <div>
\n <h2>Client Component<\/h2>
\n <p>Count: {count}<\/p>
\n <button onClick={() => setCount(count + 1)}>Increment<\/button>
\n <\/div>
\n );
\n}<\/p>\n
\u670d\u52a1\u5668\u7ec4\u4ef6\u53ef\u4ee5\u5305\u542b\u5ba2\u6237\u7aef\u7ec4\u4ef6，\u5ba2\u6237\u7aef\u7ec4\u4ef6\u4e5f\u53ef\u4ee5\u5305\u542b\u670d\u52a1\u5668\u7ec4\u4ef6\u3002<\/p>\n
\/\/ app\/page.js – \u670d\u52a1\u5668\u7ec4\u4ef6
\nimport ClientComponent from '..\/components\/ClientComponent';
\nimport { getData } from '..\/lib\/data';<\/p>\n
export default async function Home() {
\n const data = await getData();<\/p>\n
return (
\n <div>
\n <h1>Hello, Server Components!<\/h1>
\n <ul>
\n {data.map(item => (
\n <li key={item.id}>{item.name}<\/li>
\n ))}
\n <\/ul>
\n {\/* \u670d\u52a1\u5668\u7ec4\u4ef6\u5305\u542b\u5ba2\u6237\u7aef\u7ec4\u4ef6 *\/}
\n <ClientComponent \/>
\n <\/div>
\n );
\n}<\/p>\n
\u670d\u52a1\u5668\u7ec4\u4ef6\u53ef\u4ee5\u76f4\u63a5\u5728\u670d\u52a1\u5668\u7aef\u83b7\u53d6\u6570\u636e，\u4e0d\u9700\u8981\u901a\u8fc7\u5ba2\u6237\u7aef\u7f51\u7edc\u8bf7\u6c42\u3002<\/p>\n
\/\/ app\/page.js – \u670d\u52a1\u5668\u7ec4\u4ef6
\nimport { db } from '..\/lib\/db';<\/p>\n
export default async function Home() {
\n \/\/ \u76f4\u63a5\u5728\u670d\u52a1\u5668\u7aef\u67e5\u8be2\u6570\u636e\u5e93
\n const users = await db.users.findMany();<\/p>\n
return (
\n <div>
\n <h1>Users<\/h1>
\n <ul>
\n {users.map(user => (
\n <li key={user.id}>{user.name}<\/li>
\n ))}
\n <\/ul>
\n <\/div>
\n );
\n}<\/p>\n
\u6848\u4f8b：\u4f7f\u7528React \u670d\u52a1\u5668\u7ec4\u4ef6\u6784\u5efa\u535a\u5ba2\u5e94\u7528<\/p>\n
\u5b9e\u73b0：<\/p>\n
\/\/ app\/blog\/[id]\/page.js – \u670d\u52a1\u5668\u7ec4\u4ef6
\nimport { getPost, getComments } from '..\/..\/lib\/blog';<\/p>\n
export default async function Post({ params }) {
\n const post = await getPost(params.id);
\n const comments = await getComments(params.id);<\/p>\n
return (
\n <div>
\n <h1>{post.title}<\/h1>
\n <div dangerouslySetInnerHTML={{ __html: post.content }} \/>
\n <Comments comments={comments} postId={params.id} \/>
\n <\/div>
\n );
\n}<\/p>\n
\/\/ app\/blog\/[id]\/Comments.js – \u5ba2\u6237\u7aef\u7ec4\u4ef6
\n'use client';<\/p>\n
import { useState, useEffect } from 'react';<\/p>\n
export default function Comments({ comments, postId }) {
\n const [newComment, setNewComment] = useState('');
\n const [submittedComments, setSubmittedComments] = useState(comments);<\/p>\n
const handleSubmit = async (e) => {
\n e.preventDefault();
\n \/\/ \u63d0\u4ea4\u8bc4\u8bba
\n const response = await fetch('\/api\/comments', {
\n method: 'POST',
\n headers: {
\n 'Content-Type': 'application\/json'
\n },
\n body: JSON.stringify({ postId, content: newComment })
\n });
\n const comment = await response.json();
\n setSubmittedComments([…submittedComments, comment]);
\n setNewComment('');
\n };<\/p>\n
return (
\n <div>
\n <h2>Comments<\/h2>
\n <ul>
\n {submittedComments.map(comment => (
\n <li key={comment.id}>{comment.content}<\/li>
\n ))}
\n <\/ul>
\n <form onSubmit={handleSubmit}>
\n <textarea
\n value={newComment}
\n onChange={(e) => setNewComment(e.target.value)}
\n placeholder="Add a comment…"
\n \/>
\n <button type="submit">Submit<\/button>
\n <\/form>
\n <\/div>
\n );
\n}<\/p>\n
\u6848\u4f8b：\u4f7f\u7528React \u670d\u52a1\u5668\u7ec4\u4ef6\u6784\u5efa\u7535\u5546\u5e94\u7528<\/p>\n
\u5b9e\u73b0：<\/p>\n
\/\/ app\/products\/[id]\/page.js – \u670d\u52a1\u5668\u7ec4\u4ef6
\nimport { getProduct, getRelatedProducts } from '..\/..\/lib\/products';<\/p>\n
export default async function Product({ params }) {
\n const product = await getProduct(params.id);
\n const relatedProducts = await getRelatedProducts(params.id);<\/p>\n
return (
\n <div>
\n <h1>{product.name}<\/h1>
\n <img src={product.image} alt={product.name} \/>
\n <p>{product.description}<\/p>
\n <p>Price: ${product.price}<\/p>
\n <AddToCart product={product} \/>
\n <h2>Related Products<\/h2>
\n <div className="related-products">
\n {relatedProducts.map(item => (
\n <div key={item.id}>
\n <img src={item.image} alt={item.name} \/>
\n <h3>{item.name}<\/h3>
\n <p>${item.price}<\/p>
\n <\/div>
\n ))}
\n <\/div>
\n <\/div>
\n );
\n}<\/p>\n
\/\/ app\/products\/[id]\/AddToCart.js – \u5ba2\u6237\u7aef\u7ec4\u4ef6
\n'use client';<\/p>\n
import { useState } from 'react';<\/p>\n
export default function AddToCart({ product }) {
\n const [quantity, setQuantity] = useState(1);<\/p>\n
const handleAddToCart = () => {
\n \/\/ \u6dfb\u52a0\u5230\u8d2d\u7269\u8f66
\n const cartItem = { productId: product.id, quantity };
\n \/\/ \u8fd9\u91cc\u53ef\u4ee5\u4f7f\u7528Context\u6216Redux\u6765\u7ba1\u7406\u8d2d\u7269\u8f66\u72b6\u6001
\n console.log('Add to cart:', cartItem);
\n };<\/p>\n
return (
\n <div>
\n <input
\n type="number"
\n value={quantity}
\n onChange={(e) => setQuantity(Number(e.target.value))}
\n min="1"
\n \/>
\n <button onClick={handleAddToCart}>Add to Cart<\/button>
\n <\/div>
\n );
\n}<\/p>\n
\u6311\u6218：React \u670d\u52a1\u5668\u7ec4\u4ef6\u9700\u8981React 18+\u548c\u652f\u6301RSC\u7684\u6846\u67b6（\u5982Next.js 13+）<\/p>\n
\u89e3\u51b3\u65b9\u6848：\u4f7f\u7528\u652f\u6301RSC\u7684\u6846\u67b6，\u9010\u6b65\u8fc1\u79fb\u73b0\u6709\u9879\u76ee<\/p>\n
\u6311\u6218：\u670d\u52a1\u5668\u7ec4\u4ef6\u548c\u5ba2\u6237\u7aef\u7ec4\u4ef6\u7684\u6df7\u5408\u4f7f\u7528\u53ef\u80fd\u4f1a\u5bfc\u81f4\u5f00\u53d1\u4f53\u9a8c\u590d\u6742<\/p>\n
\u89e3\u51b3\u65b9\u6848：\u660e\u786e\u7ec4\u4ef6\u5206\u7c7b，\u5efa\u7acb\u6e05\u6670\u7684\u4ee3\u7801\u7ec4\u7ec7\u89c4\u8303<\/p>\n
\u6311\u6218：\u670d\u52a1\u5668\u7ec4\u4ef6\u7684\u8c03\u8bd5\u76f8\u5bf9\u56f0\u96be，\u56e0\u4e3a\u5b83\u4eec\u5728\u670d\u52a1\u5668\u7aef\u8fd0\u884c<\/p>\n
\u89e3\u51b3\u65b9\u6848：\u4f7f\u7528\u670d\u52a1\u5668\u7aef\u65e5\u5fd7，\u7ed3\u5408\u5ba2\u6237\u7aef\u8c03\u8bd5\u5de5\u5177<\/p>\n
\u6311\u6218：\u670d\u52a1\u5668\u7ec4\u4ef6\u65e0\u72b6\u6001，\u9700\u8981\u901a\u8fc7props\u4f20\u9012\u6570\u636e<\/p>\n
\u89e3\u51b3\u65b9\u6848：\u5408\u7406\u8bbe\u8ba1\u7ec4\u4ef6\u5c42\u6b21\u7ed3\u6784，\u4f7f\u7528\u5ba2\u6237\u7aef\u7ec4\u4ef6\u7ba1\u7406\u72b6\u6001<\/p>\n
\u6311\u6218：\u670d\u52a1\u5668\u7ec4\u4ef6\u7684\u6027\u80fd\u4f18\u5316\u9700\u8981\u8003\u8651\u670d\u52a1\u5668\u8d44\u6e90\u548c\u7f51\u7edc\u5ef6\u8fdf<\/p>\n
\u89e3\u51b3\u65b9\u6848：\u4f7f\u7528\u9002\u5f53\u7684\u7f13\u5b58\u7b56\u7565，\u4f18\u5316\u6570\u636e\u83b7\u53d6<\/p>\n
| \u6e32\u67d3\u4f4d\u7f6e<\/td>\n | \u670d\u52a1\u5668<\/td>\n | \u5ba2\u6237\u7aef<\/td>\n<\/tr>\n | ||||||||||||||||||||||||||||||||||||||||
| \u5305\u4f53\u79ef<\/td>\n | \u4e0d\u5305\u542b\u5728\u5ba2\u6237\u7aefbundle\u4e2d<\/td>\n | \u5305\u542b\u5728\u5ba2\u6237\u7aefbundle\u4e2d<\/td>\n<\/tr>\n | ||||||||||||||||||||||||||||||||||||||||
| \u6570\u636e\u83b7\u53d6<\/td>\n | \u76f4\u63a5\u5728\u670d\u52a1\u5668\u7aef\u83b7\u53d6<\/td>\n | \u9700\u8981\u901a\u8fc7\u7f51\u7edc\u8bf7\u6c42\u83b7\u53d6<\/td>\n<\/tr>\n | ||||||||||||||||||||||||||||||||||||||||
| \u751f\u547d\u5468\u671f<\/td>\n | \u65e0\u751f\u547d\u5468\u671f\u65b9\u6cd5<\/td>\n | \u6709\u5b8c\u6574\u7684\u751f\u547d\u5468\u671f<\/td>\n<\/tr>\n | ||||||||||||||||||||||||||||||||||||||||
| \u72b6\u6001\u7ba1\u7406<\/td>\n | \u65e0\u72b6\u6001<\/td>\n | \u6709\u72b6\u6001<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n2. \u670d\u52a1\u5668\u7ec4\u4ef6 vs \u670d\u52a1\u5668\u7aef\u6e32\u67d3（SSR）<\/h4>\n
|