react笔记

可以将这些特性分为几个核心部分：

1. 革命性的特性：Hooks（React 16.8+）

2. 性能与并发：Concurrent Features（React 18+）

3. 服务端渲染革新：Server Components（Next.js 13+/React 18+）

---

1. 革命性的特性：Hooks（React 16.8+）

Hooks 允许你在函数组件中使用 state 和其他 React 特性，是近年来最重要的变革。

核心 Hooks

• •

  useState: 在函数组件中添加和管理状态。

  jsx

  --javascripttypescriptshellbashsqljsonhtmlcssccppjavarubypythongorustmarkdown

  const [count, setCount] = useState(0);
  

• •

  useEffect: 用于处理副作用（如数据获取、订阅、手动操作 DOM）。它取代了类组件中的 componentDidMount, componentDidUpdate, componentWillUnmount。

  jsx

  --javascripttypescriptshellbashsqljsonhtmlcssccppjavarubypythongorustmarkdown

  useEffect(() => {
    // 副作用逻辑
    document.title = `You clicked ${count} times`;
    // 清理函数 (可选)
    return () => { /* 清理逻辑 */ };
  }, [count]); // 依赖数组，只有 count 变化时才执行
  

• •

  useContext: 无需组件嵌套即可订阅 React 的 Context。

  jsx

  --javascripttypescriptshellbashsqljsonhtmlcssccppjavarubypythongorustmarkdown

  const theme = useContext(ThemeContext);
  

附加 Hooks

• •

  useReducer: 类似于 Redux 的 reducer，用于管理更复杂的状态逻辑。

• •

  useCallback & useMemo: 用于性能优化，缓存函数和计算结果，避免不必要的重渲染。

• •

  useRef: 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数。常用于直接访问 DOM 节点或存储任意可变值。

• •

  useLayoutEffect: 与 useEffect 类似，但会在所有 DOM 变更后同步触发。适用于需要直接读取 DOM 布局的场景。

---

2. 性能与并发：Concurrent Features（React 18+）

React 18 引入了“并发”概念，它不是一个特定功能，而是一种底层能力。React 可以准备多个版本的 UI 并在后台进行渲染，使应用更具响应性。

核心 API

• •

  createRoot: 新的根节点创建方式，是启用所有并发功能的前提。

  jsx

  --javascripttypescriptshellbashsqljsonhtmlcssccppjavarubypythongorustmarkdown

  // React 17 及之前
  import ReactDOM from 'react-dom';
  ReactDOM.render(<App />, document.getElementById('root'));
  
  // React 18
  import ReactDOM from 'react-dom/client';
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(<App />);
  

• •

  startTransition: 让你能将某些更新标记为“非紧急的”。这样，紧急更新（如输入框打字）可以立即响应，而非紧急更新（如搜索结果列表更新）可以被中断，不会阻塞界面。

  jsx

  --javascripttypescriptshellbashsqljsonhtmlcssccppjavarubypythongorustmarkdown

  import { startTransition, useState } from 'react';
  
  function SearchBox() {
    const [inputValue, setInputValue] = useState('');
    const [searchQuery, setSearchQuery] = useState('');
  
    function handleChange(e) {
      setInputValue(e.target.value); // 紧急更新：立即显示输入值
      startTransition(() => {
        setSearchQuery(e.target.value); // 非紧急更新：标记为 transition
      });
    }
    // ...
  }
  

• •

  useDeferredValue: 与 startTransition 类似，但用于延迟更新某个值本身。它返回一个延迟版本的值，该值会“滞后”于原始值。

  jsx

  --javascripttypescriptshellbashsqljsonhtmlcssccppjavarubypythongorustmarkdown

  const deferredQuery = useDeferredValue(searchQuery);
  // 你可以用 deferredQuery 来渲染列表，它会在处理完紧急更新后自动更新。
  

内置并发渲染器

• •

  <Suspense> 用于数据获取: 在 React 16 中，<Suspense> 主要用于配合 React.lazy 进行代码分割。在 React 18 及未来的愿景中，它可以与支持并发特性的数据获取库深度集成，在组件树中“等待”数据加载完成，并显示一个回退界面。

  jsx

  --javascripttypescriptshellbashsqljsonhtmlcssccppjavarubypythongorustmarkdown

  <Suspense fallback={<LoadingSpinner />}>
    <ProfilePage />
  </Suspense>
  

---

3. 服务端渲染革新：Server Components（React 18+）

这是一个渐进式采用的特性，目前主要通过框架（如 Next.js 13+ App Router, Remix）来使用。它代表了 React 架构的根本性变化。

核心理念

• •

  在服务器上运行：Server Components 的代码永远不会被发送到客户端，只在服务器上执行。

• •

  直接访问后端资源：可以直接连接数据库、调用内部 API，无需创建额外的 REST/GraphQL 接口。

• •

  减少客户端包体积：依赖的库（如大型工具库）留在服务器端，客户端无需下载。

• •

  自动代码分割：默认情况下，客户端只下载需要渲染 UI 所必需的 JavaScript。

组件类型

1. Server Component（服务端组件） : 默认行为。异步组件（可以使用 async/await）。

   jsx

   --javascripttypescriptshellbashsqljsonhtmlcssccppjavarubypythongorustmarkdown

   // 这是一个 Server Component
   async function ProductPage({ productId }) {
     const product = await db.products.get(productId); // 直接在服务器上查询数据库
   
     return (
       <>
         <h1>{product.name}</h1>
         <p>{product.description}</p>
         <ProductReviews productId={productId} /> {/* ProductReviews 是一个 Client Component */}
       </>
     );
   }
   

2. Client Component（客户端组件） : 需要在文件顶部使用 ‘use client’ 指令声明。用于包含交互性（如 useState, onClick）的组件。

   jsx

   --javascripttypescriptshellbashsqljsonhtmlcssccppjavarubypythongorustmarkdown

   'use client'; // 这是一个 Client Component 的标记
   
   import { useState } from 'react';
   
   export function ProductReviews({ productId }) {
     const [reviews, setReviews] = useState(null);
     // ... 交互逻辑
     return <div>...</div>;
   }
   

---

总结与学习建议

特性分类	核心概念	代表 API/功能	引入版本
Hooks	函数式组件拥有状态和生命周期	useState, useEffect, useContext	16.8+
并发特性	可中断的渲染，提升用户体验	createRoot, startTransition, useDeferredValue, <Suspense>	18+
服务端组件	组件在服务器端运行，减少客户端负担	Server/Client Components, ‘use client’	18+（通过框架）

学习路径建议：

1. 必须掌握：Hooks (useState, useEffect, useContext）是现代 React 开发的基石，务必先熟练掌握。

2. 升级理解：学习 React 18 的 createRoot 和并发特性（startTransition, useDeferredValue），理解如何构建更流畅的应用。

3. 展望未来：了解 Server Components 的概念和运作模式，这是在使用 Next.js App Router 等现代全栈框架时的核心知识。