開(kāi)發(fā)教程

環(huán)境搭建

1. 開(kāi)發(fā)環(huán)境要求

• Node.js 14.0+
• npm 6.0+ 或 yarn 1.0+
• Git 版本控制

2. 項目初始化

# 克隆項目
git clone <repository-url>
cd InvoicingDev

# 安裝依賴(lài)
npm install

# 或使用 yarn
yarn install

3. 開(kāi)發(fā)服務(wù)器啟動(dòng)

# 開(kāi)發(fā)模式
npm start
# 或
yarn start

# 訪(fǎng)問(wèn) http://localhost:3000

4. 構建和部署

# 生產(chǎn)構建
npm run build
# 或
yarn build

# 測試運行
npm test
# 或
yarn test

開(kāi)發(fā)規范

1. 代碼規范

// 組件命名 - PascalCase
class MyComponent extends Component {}

// 方法命名 - camelCase
handleButtonClick = () => {}

// 常量命名 - UPPER_CASE
const API_URL = '/api/data';

// 文件命名 - kebab-case
my-component.js

2. 組件開(kāi)發(fā)規范

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class MyComponent extends Component {
    // 1. 靜態(tài)屬性定義
    static propTypes = {
        data: PropTypes.array,
        loading: PropTypes.bool
    };

    static defaultProps = {
        data: [],
        loading: false
    };

    // 2. 構造函數
    constructor(props) {
        super(props);
        this.state = {
            // 初始化狀態(tài)
        };
    }

    // 3. 生命周期方法
    componentDidMount() {
        // 組件掛載后執行
    }

    componentWillUnmount() {
        // 組件卸載前清理
    }

    // 4. 業(yè)務(wù)方法（箭頭函數綁定this）
    handleSubmit = async (data) => {
        try {
            const result = await this.apiCall(data);
            this.setState({ result });
        } catch (error) {
            console.error('提交失敗:', error);
        }
    };

    // 5. 渲染方法
    render() {
        const { data, loading } = this.props;
        const { result } = this.state;

        return (
            <div className="my-component">
                {/* JSX內容 */}
            </div>
        );
    }
}

export default MyComponent;

3. 樣式開(kāi)發(fā)規范

// 組件樣式文件 my-component.less
.my-component {
    // 根樣式
    padding: 16px;
    
    // 子元素樣式
    &-header {
        font-size: 18px;
        margin-bottom: 16px;
    }
    
    // 狀態(tài)樣式
    &--loading {
        opacity: 0.6;
    }
}

開(kāi)發(fā)流程

1. 功能開(kāi)發(fā)流程

# 1. 創(chuàng  )建功能分支
git checkout -b feature/new-feature

# 2. 開(kāi)發(fā)代碼
# 3. 提交代碼
git add .
git commit -m "feat: 新增功能描述"

# 4. 推送到遠程
git push origin feature/new-feature

# 5. 創(chuàng  )建Pull Request

2. 組件開(kāi)發(fā)步驟

1. 分析需求 - 明確組件功能和接口
2. 設計組件結構 - 確定props和state
3. 編寫(xiě)組件代碼 - 實(shí)現業(yè)務(wù)邏輯
4. 編寫(xiě)樣式 - 設計界面樣式
5. 測試驗證 - 功能測試和邊界測試
6. 文檔編寫(xiě) - 使用說(shuō)明和API文檔

3. API集成步驟

// 1. 在 zjUrl.js 中添加接口配置
const allUrl = {
    myModule: {
        list: joint("api/my-module/list.do"),
        create: joint("api/my-module/create.do")
    }
};

// 2. 在組件中調用API
class MyComponent extends Component {
    fetchData = async () => {
        const res = await post(allUrl.myModule.list, {});
        if (res.msgKey) {
            this.setState({ data: res.result });
        }
    };
}

調試技巧

1. 瀏覽器調試

// 添加調試信息
console.log('當前狀態(tài):', this.state);
console.log('接收屬性:', this.props);

// 性能監控
console.time('操作耗時(shí)');
// 執行操作
console.timeEnd('操作耗時(shí)');

2. React DevTools

• 安裝React Developer Tools瀏覽器插件
• 查看組件樹(shù)和狀態(tài)變化
• 性能分析工具

3. Redux DevTools

• 安裝Redux DevTools瀏覽器插件
• 查看Action和State變化
• 時(shí)間旅行調試

常見(jiàn)問(wèn)題解決

1. 依賴(lài)安裝問(wèn)題

# 清除緩存重新安裝
npm cache clean --force
rm -rf node_modules
npm install

2. 樣式不生效

// 檢查樣式導入
import './my-component.less';

// 檢查類(lèi)名拼寫(xiě)
className="my-component"

3. API調用失敗

// 檢查接口配置
console.log('接口URL:', allUrl.myModule.list);

// 檢查請求參數
console.log('請求參數:', params);

// 檢查響應處理
console.log('響應數據:', res);

最佳實(shí)踐

1. 代碼組織

• 一個(gè)文件一個(gè)組件
• 相關(guān)文件放在同一目錄
• 公共組件提取到共享目錄

2. 性能優(yōu)化

• 避免不必要的重新渲染
• 使用shouldComponentUpdate
• 合理使用PureComponent

3. 錯誤處理

• 添加邊界錯誤處理
• 用戶(hù)友好的錯誤提示
• 日志記錄和監控