React 未来趋势 —— 18.x 新特性与演进方向

2013: React 开源 - 虚拟 DOM 改变前端
2015: React Native - 跨平台之路
2016: Redux 生态繁荣 - 状态管理标准化
2019: Hooks 革命 - 函数组件取代类组件
2020: Concurrent Mode - 并发模式预览
2022: React 18 正式版 - 自动批处理、Suspense、Server Components
2024-2025: React Compiler - 编译时优化

// React 18 之前：需要手动批处理或等待函数结束
function handleClick() {
  setCount(c => c + 1);
  setFlag(f => !f);
  // 只有在函数结束后才触发一次重渲染（React 18）
  // React 18 之前会触发两次
}

//  Suspense 组件：等待子组件加载完成
function App() {
  return (
    <Suspense fallback={<Loading />}>
      <Comments />
    </Suspense>
  );
}

function Comments() {
  // 数据准备好前显示 Loading
  const comments = useFetchComments();
  return comments.map(c => <Comment key={c.id} {...c} />);
}

// 错误边界：捕获子组件错误
class ErrorBoundary extends React.Component {
  state = { hasError: false };
  
  static getDerivedStateFromError(error) {
    return { hasError: true };
  }
  
  render() {
    if (this.state.hasError) {
      return <SomethingWrong />;
    }
    return this.props.children;
  }
}

function SearchResults() {
  const [query, setQuery] = useState('');
  const [isPending, startTransition] = useTransition();
  
  const handleChange = (e) => {
    const value = e.target.value;
    // 标记为低优先级，不阻塞用户输入
    startTransition(() => {
      setQuery(value);
    });
  };
  
  return (
    <div>
      <input value={query} onChange={handleChange} />
      {isPending ? <Spinner /> : <Results query={query} />}
    </div>
  );
}

function SearchInput({ value }) {
  // 延迟版本，让紧急更新先完成
  const deferredValue = useDeferredValue(value);
  
  return <ExpensiveList filter={deferredValue} />;
}

// 表单直接调用服务端 action
function AddPost() {
  async function createPost(formData) {
    'use server';
    await db.posts.create({
      title: formData.get('title')
    });
  }
  
  return (
    <form action={createPost}>
      <input name="title" />
      <button type="submit">提交</button>
    </form>
  );
}

// useActionState：处理表单状态
import { useActionState } from 'react';

function AddPost() {
  const [state, formAction, isPending] = useActionState(
    async (prevState, formData) => {
      // 处理表单提交
      const result = await createPostAction(formData);
      return result;
    },
    null
  );
  
  return (
    <form action={formAction}>
      <input name="title" />
      <button type="submit" disabled={isPending}>
        {isPending ? '提交中...' : '提交'}
      </button>
    </form>
  );
}

import { useOptimistic } from 'react';

function LikeButton({ likes, onLike }) {
  const [optimisticLikes, addOptimisticLike] = useOptimistic(
    likes,
    (state, newLike) => state + newLike
  );
  
  return (
    <button onClick={async () => {
      addOptimisticLike(1); // 立即更新 UI
      await onLike(); // 异步更新服务器
    }}>
      👍 {optimisticLikes}
    </button>
  );
}

import { use } from 'react';

function UserProfile({ userPromise }) {
  // 直接 await Promise
  const user = use(userPromise);
  
  return <div>{user.name}</div>;
}

// 结合 Suspense
<Suspense fallback={<Loading />}>
  <UserProfile userPromise={fetchUser(id)} />
</Suspense>

import { use } from 'react';

// 使用 Web Component
function MyComponent() {
  return (
    <my-component>
      <span>Hello</span>
    </my-component>
  );
}

// React 19+ 支持更好的互操作
const MyWebComponent = forwardRef((props, ref) => {
  return <my-custom-element ref={ref} {...props} />;
});

未来应用结构：
├── 服务端组件（默认）：数据获取、渲染
├── 客户端组件：交互、状态
└── 边界明确：use client 标记

// React 18
Warning: Each child in a list should have a unique "key" prop.

// React 19+
Warning: Each child in a list should have a unique "key" prop.
See https://react.dev/w/key-warning for more information.