React框架

介绍

React是由Facebook开发的开源JavaScript库，用于构建用户界面。它基于组件化和虚拟DOM的概念，使开发者能够创建高效、可复用的UI组件。React适用于构建单页应用(SPA)和复杂的交互式Web界面。

原理

React的核心原理：

• 组件化：将UI拆分为独立、可复用的组件，每个组件管理自己的状态和渲染
• 虚拟DOM：通过内存中的虚拟DOM树来优化DOM操作，减少重排和重绘
• 单向数据流：数据从父组件流向子组件，使状态变化可预测
• 状态管理：通过setState或hooks管理组件状态
• JSX：JavaScript XML语法扩展，允许在JavaScript中编写HTML-like代码
• 生命周期：组件从创建到销毁的一系列阶段，可在不同阶段执行代码

图示

// React组件示例
import React, { useState, useEffect } from 'react';

function Counter() {
  // 状态管理
  const [count, setCount] = useState(0);
  const [isVisible, setIsVisible] = useState(true);

  // 生命周期钩子
  useEffect(() => {
    console.log('组件已挂载');
    return () => console.log('组件将卸载');
  }, []);

  useEffect(() => {
    document.title = `计数: ${count}`;
  }, [count]);

  return (
    <div>
      {isVisible && (
        <div>
          <h1>计数: {count}</h1>
          <button onClick={() => setCount(count + 1)}>增加</button>
          <button onClick={() => setCount(count - 1)}>减少</button>
        </div>
      )}
      <button onClick={() => setIsVisible(!isVisible)}>
        {isVisible ? '隐藏' : '显示'}
      </button>
    </div>
  );
}

实例

React组件通信示例

import React, { useState } from 'react';
import ReactDOM from 'react-dom/client';

// 子组件
function ChildComponent({ message, onMessageChange }) {
  return (
    <div style={{ border: '1px solid #ccc', padding: '10px', margin: '10px' }}>
      <h3>子组件</h3>
      <p>收到的消息: {message}</p>
      <input
        type="text"
        placeholder="输入消息"
        onChange={(e) => onMessageChange(e.target.value)}
      />
    </div>
  );
}

// 父组件
function ParentComponent() {
  const [message, setMessage] = useState('Hello from parent');

  return (
    <div style={{ border: '1px solid blue', padding: '20px' }}>
      <h2>父组件</h2>
      <p>发送的消息: {message}</p>
      <ChildComponent message={message} onMessageChange={setMessage} />
    </div>
  );
}

// 渲染应用
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<ParentComponent />);

React Hooks示例

import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';

function HooksExample() {
  const [count, setCount] = useState(0);
  const [input, setInput] = useState('');
  const countRef = useRef(0);

  // 模拟 componentDidMount 和 componentWillUnmount
  useEffect(() => {
    console.log('组件已挂载');
    return () => console.log('组件将卸载');
  }, []);

  // 监听 count 变化
  useEffect(() => {
    console.log(`count 变化为: ${count}`);
  }, [count]);

  // 使用 useMemo 缓存计算结果
  const doubledCount = useMemo(() => {
    console.log('计算 doubledCount');
    return count * 2;
  }, [count]);

  // 使用 useCallback 缓存函数
  const handleIncrement = useCallback(() => {
    setCount(prevCount => prevCount + 1);
  }, []);

  // 手动更新 ref
  const handleClick = () => {
    countRef.current += 1;
    console.log('ref count:', countRef.current);
  };

  return (
    <div style={{ padding: '20px' }}>
      <h1>Hooks 示例</h1>
      <p>count: {count}</p>
      <p>doubledCount: {doubledCount}</p>
      <p>ref count: {countRef.current}</p>
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="输入任意内容"
      />
      <button onClick={handleIncrement} style={{ margin: '0 10px' }}>增加 count</button>
      <button onClick={handleClick}>增加 ref count</button>
    </div>
  );
}

专业解决方案

React核心概念

• 组件：函数组件和类组件
• Props：组件间通信的方式
• State：组件内部状态
• Hooks：React 16.8引入的特性，使函数组件能够使用状态和生命周期
• Context：跨组件状态共享
• 虚拟DOM：优化渲染性能
• 单向数据流：数据从父组件流向子组件

React生态系统

• React Router：路由管理
• Redux：状态管理
• Axios：HTTP客户端
• React Query：数据获取和缓存
• Material-UI/Ant Design：UI组件库
• Styled-components：CSS-in-JS解决方案
• Next.js：React服务端渲染框架
• Gatsby：静态网站生成器

性能优化

• 使用React.memo避免不必要的重渲染
• 使用useMemo缓存计算结果
• 使用useCallback缓存函数引用
• 合理使用React.lazy和Suspense进行代码拆分
• 避免在渲染过程中创建新函数
• 使用虚拟列表处理大量数据渲染
• 优化组件结构，避免过度渲染

最佳实践

• 优先使用函数组件和Hooks
• 保持组件小而专注
• 遵循单一责任原则
• 避免在组件中使用setState进行复杂计算
• 合理使用自定义Hooks提取可复用逻辑
• 为组件编写单元测试
• 使用TypeScript增强类型安全性
• 遵循React官方文档的建议

工具推荐

• Create React App：React应用脚手架
• Vite：快速的前端构建工具
• React DevTools：浏览器扩展，用于调试React应用
• Jest：测试框架
• React Testing Library：组件测试库
• ESLint：代码检查工具
• Prettier：代码格式化工具
• Storybook：UI组件开发环境