07. React核心原理和生态

// 1. 函数式组件的本质
function MyComponent(props) {
  // 这就是一个纯函数：相同输入 -> 相同输出
  return <div>{props.children}</div>;
}
 
// 2. JSX编译过程
// JSX语法糖
const element = <h1 className="greeting">Hello, world!</h1>;
 
// 编译后的真实代码
const element = React.createElement(
  'h1',
  { className: 'greeting' },
  'Hello, world!'
);
 
// 3. Virtual DOM结构
const virtualDOM = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  },
  key: null,
  ref: null
};

// 渲染流程示例
function Counter() {
  console.log("1. 组件函数执行"); // Render阶段
 
  const [count, setCount] = useState(0);
 
  useLayoutEffect(() => {
    console.log("3. useLayoutEffect执行"); // Commit阶段
  });
 
  useEffect(() => {
    console.log("4. useEffect执行"); // Passive Effects阶段
  });
 
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>
        增加
      </button>
    </div>
  );
}
 
// 执行顺序：
// 1. 组件函数执行 (Render)
// 2. DOM更新 (Commit)
// 3. useLayoutEffect执行 (Commit)
// 4. useEffect执行 (Passive Effects)

// Fiber节点的核心结构
const FiberNode = {
  // 节点信息
  type: null,          // 组件类型
  key: null,           // React key
  stateNode: null,     // DOM节点或组件实例
 
  // 树结构
  return: null,        // 父节点
  child: null,         // 第一个子节点
  sibling: null,       // 兄弟节点
 
  // 状态管理
  pendingProps: null,  // 新props
  memoizedProps: null, // 旧props
  memoizedState: null, // 旧state
  updateQueue: null,   // 更新队列
 
  // 调度相关
  lanes: NoLanes,      // 优先级
  flags: NoFlags,      // 副作用标记
  alternate: null      // 双缓存指针
};

// 时间切片示例
function workLoopConcurrent() {
  // 在有剩余时间时继续工作
  while (workInProgress !== null && !shouldYield()) {
    performUnitOfWork(workInProgress);
  }
}
 
function shouldYield() {
  // 检查是否应该让出控制权
  return getCurrentTime() >= deadline;
}

#### 优先级调度

| 优先级 | 值 | 使用场景 | 示例 |
|--------|----|---------|----- |
| **Immediate** | 1 | 立即执行 | 用户输入、focus事件 |
| **UserBlocking** | 2 | 用户阻塞 | 点击、滚动、拖拽 |
| **Normal** | 3 | 正常优先级 | 网络请求、数据更新 |
| **Low** | 4 | 低优先级 | 分析统计、日志 |
| **Idle** | 5 | 空闲时执行 | 预加载、缓存清理 |

## Hooks原理和最佳实践

### Hooks实现原理

<Callout type="warning">
Hooks的实现基于链表结构，这就是为什么Hooks必须在组件顶层调用，不能在条件语句中使用。
</Callout>

#### Hooks规则

| 规则 | 说明 | 原因 | 正确示例 |
|------|------|------|----------|
| **顶层调用** | 只在函数顶层调用Hooks | 保证调用顺序一致 | `const [state, setState] = useState()` |
| **React函数中调用** | 只在React函数组件或自定义Hook中调用 | 确保在React上下文中 | 函数组件、自定义Hook |
| **不在循环/条件中** | 不在循环、条件或嵌套函数中调用 | 保证每次渲染调用顺序相同 | 避免`if (condition) useState()` |

#### Hooks实现原理

```javascript
// useState简化实现
let hookIndex = 0;
let hooks = [];

function useState(initialValue) {
  const currentIndex = hookIndex;

  // 初始化hook
  if (hooks[currentIndex] === undefined) {
    hooks[currentIndex] = {
      state: initialValue,
      queue: []
    };
  }

  const hook = hooks[currentIndex];

  // 处理更新队列
  hook.queue.forEach(action => {
    hook.state = typeof action === 'function' ? action(hook.state) : action;
  });
  hook.queue = [];

  const setState = (action) => {
    hook.queue.push(action);
    rerender(); // 触发重新渲染
  };

  hookIndex++;
  return [hook.state, setState];
}

// useEffect简化实现
function useEffect(callback, deps) {
  const currentIndex = hookIndex;

  if (hooks[currentIndex] === undefined) {
    hooks[currentIndex] = { callback, deps, cleanup: null };
    hooks[currentIndex].cleanup = callback(); // 首次执行
  } else {
    const hook = hooks[currentIndex];

    // 检查依赖变化
    const depsChanged = deps ?
      !deps.every((dep, i) => dep === hook.deps[i]) : true;

    if (depsChanged) {
      if (hook.cleanup) hook.cleanup(); // 清理
      hook.cleanup = callback(); // 执行新副作用
      hook.deps = deps;
    }
  }

  hookIndex++;
}

// 1. useLocalStorage - 本地存储Hook
function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      return initialValue;
    }
  });
 
  const setValue = useCallback((value) => {
    try {
      const valueToStore = value instanceof Function ? value(storedValue) : value;
      setStoredValue(valueToStore);
      window.localStorage.setItem(key, JSON.stringify(valueToStore));
    } catch (error) {
      console.error(`Error setting localStorage:`, error);
    }
  }, [key, storedValue]);
 
  return [storedValue, setValue];
}
 
// 2. useDebounce - 防抖Hook
function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);
 
  useEffect(() => {
    const handler = setTimeout(() => setDebouncedValue(value), delay);
    return () => clearTimeout(handler);
  }, [value, delay]);
 
  return debouncedValue;
}
 
// 3. useAsync - 异步状态管理Hook
function useAsync(asyncFunction, dependencies = []) {
  const [state, setState] = useState({
    data: null,
    loading: false,
    error: null
  });
 
  useEffect(() => {
    let cancelled = false;
    setState({ data: null, loading: true, error: null });
 
    asyncFunction()
      .then(data => !cancelled && setState({ data, loading: false, error: null }))
      .catch(error => !cancelled && setState({ data: null, loading: false, error }));
 
    return () => { cancelled = true; };
  }, dependencies);
 
  return state;
}

// 1. Redux + Redux Toolkit
import { createSlice, configureStore } from '@reduxjs/toolkit';
 
const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    }
  }
});
 
const store = configureStore({
  reducer: {
    counter: counterSlice.reducer
  }
});
 
// 2. Zustand
import { create } from 'zustand';
 
const useCounterStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
  reset: () => set({ count: 0 })
}));
 
// 3. Jotai
import { atom, useAtom } from 'jotai';
 
const countAtom = atom(0);
const doubleCountAtom = atom((get) => get(countAtom) * 2);
 
function JotaiCounter() {
  const [count, setCount] = useAtom(countAtom);
  const [doubleCount] = useAtom(doubleCountAtom);
 
  return (
    <div>
      <span>Count: {count}</span>
      <span>Double: {doubleCount}</span>
      <button onClick={() => setCount(c => c + 1)}>+</button>
    </div>
  );
}

// 1. React.memo - 组件记忆化
const ExpensiveComponent = React.memo(({ data, onUpdate }) => {
  console.log('ExpensiveComponent 重新渲染');
  
  return (
    <div>
      {data.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}, (prevProps, nextProps) => {
  // 自定义比较函数
  return prevProps.data.length === nextProps.data.length &&
         prevProps.onUpdate === nextProps.onUpdate;
});
 
// 2. useMemo - 值记忆化
function DataProcessor({ items, filter }) {
  const expensiveValue = useMemo(() => {
    console.log('计算昂贵的值');
    return items
      .filter(item => item.category === filter)
      .reduce((sum, item) => sum + item.value, 0);
  }, [items, filter]);
 
  return <div>总计: {expensiveValue}</div>;
}
 
// 3. useCallback - 函数记忆化
function ParentComponent() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('');
 
  // 没有useCallback，每次渲染都会创建新函数
  const handleClick = useCallback(() => {
    console.log('按钮被点击');
  }, []); // 空依赖数组，函数永远不会改变
 
  const handleNameChange = useCallback((newName) => {
    setName(newName);
  }, []); // 使用函数式更新，避免依赖name
 
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(c => c + 1)}>增加</button>
      
      <ExpensiveChild 
        onClick={handleClick}
        onNameChange={handleNameChange}
      />
    </div>
  );
}
 
// 4. 代码分割和懒加载
const LazyComponent = React.lazy(() => import('./LazyComponent'));
 
function App() {
  return (
    <div>
      <Suspense fallback={<div>加载中...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}
 
// 5. 虚拟滚动
function VirtualList({ items, itemHeight = 50 }) {
  const [scrollTop, setScrollTop] = useState(0);
  const containerHeight = 400;
  const visibleCount = Math.ceil(containerHeight / itemHeight);
  const startIndex = Math.floor(scrollTop / itemHeight);
  const endIndex = Math.min(startIndex + visibleCount, items.length);
  
  const visibleItems = items.slice(startIndex, endIndex);
  
  return (
    <div 
      style={{ height: containerHeight, overflow: 'auto' }}
      onScroll={(e) => setScrollTop(e.target.scrollTop)}
    >
      <div style={{ height: items.length * itemHeight, position: 'relative' }}>
        {visibleItems.map((item, index) => (
          <div
            key={startIndex + index}
            style={{
              position: 'absolute',
              top: (startIndex + index) * itemHeight,
              height: itemHeight,
              width: '100%'
            }}
          >
            {item.name}
          </div>
        ))}
      </div>
    </div>
  );
}

# Create React App - 官方脚手架
npx create-react-app my-app
cd my-app
npm start
 
# Vite + React - 现代构建工具
npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev
 
# Next.js - 全栈React框架
npx create-next-app@latest my-next-app
cd my-next-app
npm run dev

// Redux Toolkit - 现代Redux
import { createSlice, configureStore } from '@reduxjs/toolkit';
 
const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    }
  }
});
 
export const { increment, decrement } = counterSlice.actions;
export const store = configureStore({
  reducer: {
    counter: counterSlice.reducer
  }
});
 
// Zustand - 轻量级状态管理
import { create } from 'zustand';
 
const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 }))
}));

// React Router v6
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
 
function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/contact">Contact</Link>
      </nav>
 
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
        <Route path="/users/:id" element={<UserProfile />} />
      </Routes>
    </BrowserRouter>
  );
}

// Ant Design
import { Button, Table, Form, Input } from 'antd';
 
function MyComponent() {
  return (
    <Form>
      <Form.Item label="用户名" name="username">
        <Input />
      </Form.Item>
      <Button type="primary" htmlType="submit">
        提交
      </Button>
    </Form>
  );
}
 
// Material-UI (MUI)
import { Button, TextField, Box } from '@mui/material';
 
function MyComponent() {
  return (
    <Box component="form">
      <TextField label="用户名" variant="outlined" />
      <Button variant="contained" color="primary">
        提交
      </Button>
    </Box>
  );
}

// Jest + React Testing Library
import { render, screen, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom';
import Counter from './Counter';
 
test('renders counter and increments', () => {
  render(<Counter />);
 
  const counter = screen.getByText(/count: 0/i);
  expect(counter).toBeInTheDocument();
 
  const button = screen.getByRole('button', { name: /increment/i });
  fireEvent.click(button);
 
  expect(screen.getByText(/count: 1/i)).toBeInTheDocument();
});
 
// Cypress E2E测试
describe('Counter App', () => {
  it('should increment counter', () => {
    cy.visit('/');
    cy.contains('Count: 0');
    cy.get('[data-testid="increment-button"]').click();
    cy.contains('Count: 1');
  });
});