React开发深度指南

最新推荐文章于 2025-06-11 16:06:44 发布

当其无，

最新推荐文章于 2025-06-11 16:06:44 发布

阅读量440

点赞数 4

CC 4.0 BY-SA版权

文章标签： react.js 前端

本文链接：https://blog.csdn.net/qq_50708187/article/details/145672792

一、环境搭建与工程配置

1.1 现代脚手架选择

# 官方推荐方式
npx create-react-app my-app --template typescript

# Vite方案（推荐）
npm create vite@latest my-react-app -- --template react-ts

配置差异对比：

特性	CRA	Vite
启动速度	15-30s	<1s
热更新	全量刷新	按需HMR
构建输出	单一bundle	原生ESM
配置自由度	eject后修改	开箱即配置

1.2 必要依赖配置

// vite.config.ts 典型配置
export default defineConfig({
   
   
  plugins: [react()],
  resolve: {
   
   
    alias: {
   
   
      '@': path.resolve(__dirname, './src')
    }
  },
  build: {
   
   
    rollupOptions: {
   
   
      output: {
   
   
        manualChunks: {
   
   
          vendor: ['react', 'react-dom'],
          libs: ['lodash-es', 'dayjs']
        }
      }
    }
  }
})

1.3 代码规范体系

// .eslintrc 配置示例
{
   
   
  "extends": [
    "plugin:react/recommended",
    "airbnb",
    "airbnb-typescript"
  ],
  "rules": {
   
   
    "react/jsx-uses-react": "off",
    "react/react-in-jsx-scope": "off",
    "jsx-a11y/anchor-is-valid": "off"
  }
}

二、核心概念深度解析

2.1 JSX本质原理

// 编译前
const element = <h1 className="title">Hello</h1>;

// 编译后（React 17+）
const element = /*#__PURE__*/React.createElement(
  "h1",
  {
   
    className: "title" },
  "Hello"
);

设计原则：

语法糖：JavaScript的XML扩展
表达力：模板语法+编程能力结合
安全性：自动转义防XSS

2.2 组件设计模式

2.2.1 容器/展示组件模式

// 容器组件
const UserContainer = () => {
   
   
  const [users, setUsers] = useState<User[]>([]);
  
  useEffect(() => {
   
   
    fetchUsers().then(data => setUsers(data));
  }, []);

  return <UserList data={
   
   users} />;
}

// 展示组件
const UserList = ({
   
    data }: {
   
    data: User[] }) => (
  <ul>
    {
   
   data.map(user => (
      <li key={
   
   user.id}>{
   
   user.name