react 框架应用+总结+参考

文章目录

- [react 框架从零开始](#react 框架从零开始)
- - [1. 项目初始化](#1. 项目初始化)
  - [2. 项目结构](#2. 项目结构)
  - [3. 基础组件示例](#3. 基础组件示例)
  - [4. 页面示例](#4. 页面示例)
  - - HomePage.js
    - AboutPage.js
  - [5. 路由配置（App.js）](#5. 路由配置（App.js）)
  - [6. 数据状态管理（简单示例）](#6. 数据状态管理（简单示例）)
  - [7. 第三方库Cesium引用](#7. 第三方库Cesium引用)
  - 8.引用three.js
  - 9.引用openlayer
- scss应用安装
- 技术细节（基础组件应用封装-简单示例）
- api接口应用实例（以axios应用为例）
- - 注意事项
- [小结（react 项目开发中应该注意的事项）](#小结（react 项目开发中应该注意的事项）)

react 框架从零开始

本篇文章展示如何搭建一个基本的React项目并包含一些基础组件和第三方库的应用。你可以根据实际需求进一步扩展和完善。

1. 项目初始化

创建项目目录并进入该目录。
初始化npm项目：npm init -y
安装React相关依赖：npm install react react-dom
安装React Router（用于路由）：npm install react-router-dom
安装Redux（用于数据状态管理）：npm install redux react-redux

2. 项目结构

src/
  |- components/
  |   |- TableComponent.js
  |   |- TabComponent.js
  |   |- LoadingComponent.js
  |   |- Error404Component.js
  |- pages/
  |   |- HomePage.js
  |   |- AboutPage.js
  |- store/
  |   |- reducers.js
  |   |- actions.js
  |- App.js
  |- index.js

3. 基础组件示例

TableComponent.js

javascript 复制代码

import React from'react';

const TableComponent = ({ data }) => {
  return (
    <table>
      <thead>
        <tr>
          <th>Column 1</th>
          <th>Column 2</th>
        </tr>
      </thead>
      <tbody>
        {data.map((item, index) => (
          <tr key={index}>
            <td>{item.value1}</td>
            <td>{item.value2}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

export default TableComponent;

TabComponent.js

javascript 复制代码

import React from'react';

const TabComponent = ({ tabs, activeTab, onChangeTab }) => {
  return (
    <div>
      {tabs.map((tab, index) => (
        <button
          key={index}
          onClick={() => onChangeTab(index)}
          style={{ backgroundColor: activeTab === index? 'blue' : 'gray' }}
        >
          {tab.title}
        </button>
      ))}
      <div>{tabs[activeTab].content}</div>
    </div>
  );
};

export default TabComponent;

LoadingComponent.js

javascript 复制代码

import React from'react';

const LoadingComponent = () => {
  return <div>Loading...</div>;
};

export default LoadingComponent;

Error404Component.js

javascript 复制代码

import React from'react';

const Error404Component = () => {
  return <div>404 - Page Not Found</div>;
};

export default Error404Component;

4. 页面示例

HomePage.js

javascript 复制代码

import React from'react';
import TableComponent from '../components/TableComponent';

const HomePage = () => {
  const tableData = [
    { value1: 'Data 1', value2: 'Data 2' },
    { value1: 'Data 3', value2: 'Data 4' }
  ];

  return (
    <div>
      <h1>Home Page</h1>
      <TableComponent data={tableData} />
    </div>
  );
};

export default HomePage;

AboutPage.js

javascript 复制代码

import React from'react';
import TabComponent from '../components/TabComponent';

const tabs = [
  { title: 'Tab 1', content: 'Content of Tab 1' },
  { title: 'Tab 2', content: 'Content of Tab 2' }
];

const AboutPage = () => {
  const [activeTab, setActiveTab] = React.useState(0);

  const onChangeTab = (index) => {
    setActiveTab(index);
  };

  return (
    <div>
      <h1>About Page</h1>
      <TabComponent
        tabs={tabs}
        activeTab={activeTab}
        onChangeTab={onChangeTab}
      />
    </div>
  );
};

export default AboutPage;

5. 路由配置（App.js）

javascript 复制代码

import React from'react';
import { BrowserRouter as Router, Route, Switch } from'react-router-dom';
import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';
import Error404Component from './components/Error404Component';

const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={HomePage} />
        <Route path="/about" component={AboutPage} />
        <Route component={Error404Component} />
      </Switch>
    </Router>
  );
};

export default App;

6. 数据状态管理（简单示例）

reducers.js

javascript 复制代码

const initialState = {
  count: 0
};

const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

export default counterReducer;

actions.js

javascript 复制代码

export const increment = () => ({ type: 'INCREMENT' });
export const decrement = () => ({ type: 'DECREMENT' });

在组件中使用Redux（例如在HomePage.js中）

javascript 复制代码

import React from'react';
import { connect } from'react-redux';
import TableComponent from '../components/TableComponent';
import { increment, decrement } from '../store/actions';

const HomePage = ({ count, increment, decrement }) => {
  const tableData = [
    { value1: 'Data 1', value2: 'Data 2' },
    { value1: 'Data 3', value2: 'Data 4' }
  ];

  return (
    <div>
      <h1>Home Page</h1>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
      <TableComponent data={tableData} />
    </div>
  );
};

const mapStateToProps = (state) => ({
  count: state.count
});

const mapDispatchToProps = {
  increment,
  decrement
};

export default connect(mapStateToProps, mapDispatchToProps)(HomePage);

7. 第三方库Cesium引用

安装Cesium：npm install cesium
在需要使用的页面（例如一个新的MapPage.js）中引用Cesium：

javascript 复制代码

import React from'react';
import Cesium from 'cesium/Cesium';

const MapPage = () => {
  // 这里可以进行Cesium相关的初始化和操作
  const viewer = new Cesium.Viewer('cesiumContainer');

  return (
    <div>
      <h1>Cesium Map</h1>
      <div id="cesiumContainer"></div>
    </div>
  );
};

export default MapPage;

然后在路由中添加这个页面的路由：

javascript 复制代码

import { BrowserRouter as Router, Route, Switch } from'react-router-dom';
import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';
import Error404Component from './components/Error404Component';
import MapPage from './pages/MapPage'; // 导入MapPage

const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={HomePage} />
        <Route path="/about" component={AboutPage} />
        <Route path="/map" component={MapPage} /> // 添加MapPage的路由
        <Route component={Error404Component} />
      </Switch>
    </Router>
  );
};

export default App;

以下是在React项目中分别引用three.js和openlayer的示例步骤及相关代码演示：

8.引用three.js

步骤一：安装three.js

在项目目录下，通过npm安装three.js：

bash 复制代码

npm install three

步骤二：在React组件中使用three.js

创建一个新的React组件，例如 ThreeJSComponent.js，在其中引入并使用 three.js 来创建一个简单的3D场景，展示一个旋转的立方体：

javascript 复制代码

import React, { useEffect, useRef } from'react';
import * as THREE from 'three';

const ThreeJSComponent = () => {
    const canvasRef = useRef();

    useEffect(() => {
        // 创建场景
        const scene = new THREE.Scene();

        // 创建相机
        const camera = new THREE.PerspectiveCamera(
            75,
            window.innerWidth / window.innerHeight,
            0.1,
            1000
        );
        camera.position.z = 5;

        // 创建渲染器
        const renderer = new THREE.WebGLRenderer({
            canvas: canvasRef.current
        });
        renderer.setSize(window.innerWidth, window.innerHeight);

        // 创建一个立方体几何体
        const geometry = new THREE.BoxGeometry();

        // 创建一个基本材质
        const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

        // 创建一个网格（立方体）
        const cube = new THREE.Mesh(geometry, material);
        scene.add(cube);

        // 定义动画循环
        const animate = () => {
            requestAnimationFrame(animate);

            cube.rotateX(0.01);
            cube.rotateY(0.01);

            renderer.render(scene, camera);
        };

        animate();

        return () => {
            // 在组件卸载时清理资源
            renderer.dispose();
        };
    }, []);

    return (
        <div>
            <h1>Three.js Example</h1>
            <canvas ref={canvasRef}></canvas>
        </div>
    );
};

export default ThreeJSComponent;

在上述代码中：

首先通过 useRef 创建了一个对 canvas 元素的引用，用于 three.js 的渲染器绑定。
在 useEffect 钩子函数中：
- 初始化了 three.js 的场景、相机、渲染器等基本元素。
- 创建了一个立方体几何体并添加到场景中。
- 定义了动画循环，使立方体能够旋转，并通过渲染器将场景渲染到 canvas 上。
- 在 useEffect 的返回函数中，清理了渲染器资源，以避免内存泄漏。

9.引用openlayer

步骤一：安装openlayer

在项目目录下，通过npm安装 openlayer：

bash 复制代码

npm install ol

步骤二：在React组件中使用openlayer

创建一个新的React组件，例如 OpenLayerComponent.js，在其中引入并使用 openlayer 来展示一个简单的地图：

javascript 复制代码

import React, { useEffect, useRef } from'react';
import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/TileLayer';
import OSM from 'ol/source/OSM';

const OpenLayerComponent = () => {
    const mapRef = useRef();

    useEffect(() => {
        // 创建地图对象
        const map = new Map({
            target: mapRef.current,
            layers: [
                new TileLayer({
                    source: new OSM()
                })
            ],
            view: new View({
                center: [0, 0],
                zoom: 2
            })
        });

        return () => {
            // 在组件卸载时清理地图资源
            map.dispose();
        };
    }, []);

    return (
        <div>
            <h1>OpenLayer Example</h1>
            <div ref={mapRef} style={{ width: '100%', height: '400px' }}></div>
        </div>
    );
};

export default OpenLayerComponent;

在上述代码中：

首先通过 useRef 创建了一个对 div 元素的引用，用于 openlayer 的地图绑定。
在 useEffect 钩子函数中：
- 引入了 openlayer 相关的样式文件以及核心类（Map、View、TileLayer、OSM）。
- 创建了一个包含 OSM 瓦片图层的地图对象，并设置了初始视图的中心和缩放级别。
- 在 useEffect 的返回函数中，清理了地图资源，以避免内存泄漏。

scss应用安装

在React项目中安装SCSS
- 使用Create - React - App（CRA）
  - 安装：如果你的项目是通过Create - React - App创建的，从CRA v2.0开始，已经内置了对Sass（包括SCSS语法）的支持。你只需要将文件扩展名从.css改为.scss，就可以开始使用SCSS了。例如，将App.css改为App.scss，然后在App.js中导入App.scss即可，像import './App.scss';。
- 自定义Webpack配置（非CRA项目）
  - 安装依赖 ：需要安装node - sass和sass - loader。在项目目录下，通过终端运行npm install node - sass sass - loader - D（-D表示安装为开发依赖）。
  - 配置Webpack ：在Webpack配置文件（通常是webpack.config.js）中，找到module.rules部分，添加以下规则来处理.scss文件：
  javascript 复制代码
```
{
    test: /\.scss$/,
    use: [
        "style - loader",
        "css - loader",
        "sass - loader"
    ]
}
```
  - 这样，Webpack就能够识别并处理.scss文件了。
全局变量应用实例
- 创建全局变量文件 ：在src目录下创建一个styles文件夹，在其中创建一个名为_variables.scss的文件。在这个文件中定义全局变量，例如：
scss 复制代码
```
$primary - color: #007bff;
$secondary - color: #6c757d;
$font - family: Arial, sans - serif;
```
- 在其他SCSS文件中使用全局变量 ：在src/styles文件夹中创建一个App.scss文件。在App.scss文件的开头，使用@import来引入全局变量文件，像这样：@import 'variables';（注意，在Sass中，导入文件时可以省略文件扩展名.scss）。然后在App.scss中使用这些变量，例如：
scss 复制代码
```
body {
    font - family: $font - family;
    color: $secondary - color;
}
button {
    background - color: $primary - color;
    color: white;
    border: none;
    padding: 10px 20px;
    border - radius: 4px;
    &:hover {
        background - color: darken($primary - color, 10%);
    }
}
```
- 在React组件中应用样式 ：在App.js中导入App.scss，如import './styles/App.scss';。这样，整个App组件就会应用App.scss中定义的样式，并且可以使用全局变量来保持样式的一致性。
注意事项
- 变量命名冲突 ：在大型项目中，可能会有多个团队成员编写SCSS文件。为了避免全局变量命名冲突，建议使用有意义的命名空间或者前缀。例如，可以将所有与主题颜色相关的变量命名为$theme - primary - color、$theme - secondary - color等。
- 文件导入顺序 ：当使用@import导入多个SCSS文件时，要注意文件的导入顺序。因为Sass是按照导入顺序来解析和编译的，所以如果一个文件依赖于另一个文件中定义的变量、混合器或函数，那么被依赖的文件应该先被导入。
- 编译性能 ：在大型项目中，过多的嵌套规则和复杂的计算（如使用@function进行复杂的数学计算）可能会影响编译性能。尽量保持样式规则的简洁性，避免过度嵌套和复杂的逻辑。例如，避免多层嵌套的@media查询，尽量将@media查询提取到单独的规则中。
- 版本兼容性 ：确保node - sass和sass - loader的版本与项目中的其他依赖以及项目所使用的Node.js版本兼容。不同版本可能会导致编译错误或者样式不一致的问题。
大型项目中的常用场景
- 主题切换 ：通过定义一组与主题相关的全局变量（如颜色、字体等），可以很容易地实现主题切换功能。例如，有一个亮色主题和一个暗色主题，可以在不同的_variables.scss文件中定义两套变量，然后根据用户的选择或者系统设置来切换导入的变量文件。
- 样式复用：在大型项目中，会有很多重复的样式模式。使用全局变量可以方便地复用这些样式。例如，定义一个全局的按钮样式，包括颜色、大小、边框等，然后在各个组件中只需要引用这些变量就可以保持按钮样式的一致性。
- 组件库样式：如果项目中使用了自定义的组件库，通过全局变量可以为组件库提供统一的样式主题。例如，定义一组变量用于组件的背景颜色、文本颜色、边框样式等，这样可以确保组件在不同的页面和模块中都具有一致的外观。

技术细节（基础组件应用封装-简单示例）

以下是使用React封装的基础组件示例，包括表格组件、tab组件、loading组件和404错误组件：

表格组件（TableComponent）

jsx 复制代码

import React from 'react';

// 表格组件
const TableComponent = ({ columns, data }) => {
    return (
        <table>
            <thead>
                <tr>
                    {columns.map((column, index) => (
                        <th key={index}>{column.title}</th>
                    ))}
                </tr>
            </thead>
            <tbody>
                {data.map((row, rowIndex) => (
                    <tr key={rowIndex}>
                        {columns.map((column, colIndex) => (
                            <td key={colIndex}>{row[column.key]}</td>
                        ))}
                    </tr>
                ))}
            </tbody>
        </table>
    );
};

export default TableComponent;

使用示例：

jsx 复制代码

import React from 'react';
import TableComponent from './TableComponent';

const columns = [
    { title: '姓名', key: 'name' },
    { title: '年龄', key: 'age' },
    { title: '职业', key: 'job' }
];

const data = [
    { name: '张三', age: 25, job: '工程师' },
    { name: '李四', age: 30, job: '设计师' }
];

const App = () => {
    return (
        <div>
            <h1>表格示例</h1>
            <TableComponent columns={columns} data={data} />
        </div>
    );
};

export default App;

Tab组件（TabComponent）

jsx 复制代码

import React from 'react';

// Tab组件
const TabComponent = ({ tabs, activeTab, onTabChange }) => {
    return (
        <div>
            {tabs.map((tab, index) => (
                <button
                    key={index}
                    onClick={() => onTabChange(index)}
                    style={{ backgroundColor: activeTab === index? 'blue' : 'gray' }}
                >
                    {tab.title}
                </button>
            ))}
            <div>{tabs[activeTab].content}</div>
        </div>
    );
};

export default TabComponent;

使用示例：

jsx 复制代码

import React from 'react';
import TabComponent from './TabComponent';

const tabs = [
    { title: 'Tab1', content: '这是Tab1的内容' },
    { title: 'Tab2', content: '这是Tab2的内容' }
];

const App = () => {
    const [activeTab, setActiveTab] = React.useState(0);

    const handleTabChange = (index) => {
        setActiveTab(index);
    };

    return (
        <div>
            <h1>Tab示例</h1>
            <TabComponent tabs={tabs} activeTab={activeTab} onTabChange={handleTabChange} />
        </div>
    );
};

export default App;

Loading组件（LoadingComponent）

jsx 复制代码

import React from 'react';

// Loading组件
const LoadingComponent = () => {
    return <div>Loading...</div>;
};

export default LoadingComponent;

使用示例（假设在数据加载时显示loading）：

jsx 复制代码

import React, { useState, useEffect } from 'react';
import LoadingComponent from './LoadingComponent';

const App = () => {
    const [isLoading, setIsLoading] = useState(true);
    const [data, setData] = useState([]);

    useEffect(() => {
        // 模拟数据加载
        setTimeout(() => {
            setData([1, 2, 3, 4, 5]);
            setIsLoading(false);
        }, 2000);
    }, []);

    return (
        <div>
            <h1>加载示例</h1>
            {isLoading? <LoadingComponent /> : <div>{data.map((item) => <p key={item}>{item}</p>)}</div>}
        </div>
    );
};

export default App;

404错误组件（Error404Component）

jsx 复制代码

import React from 'react';

// 404错误组件
const Error404Component = () => {
    return <div>404 - Page Not Found</div>;
};

export default Error404Component;

使用示例（假设在路由未匹配时显示404页面）：

jsx 复制代码

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Error404Component from './Error404Component';
import OtherComponent from './OtherComponent'; // 假设其他正常的组件

const App = () => {
    return (
        <Router>
            <Switch>
                <Route exact path="/" component={OtherComponent} />
                <Route path="/other-page" component={OtherComponent} />
                <Route component={Error404Component} />
            </Switch>
        </Router>
    );
};

export default App;

在这些示例中，每个组件都被封装为可复用的模块。你可以根据实际需求进一步扩展和定制这些组件，例如为表格组件添加排序、分页功能，为Tab组件添加更多的交互效果等。同时，在实际项目中，你可能需要将这些组件放在合适的目录结构中，并进行适当的样式设置和优化。

api接口应用实例（以axios应用为例）

创建一个api.js文件用于封装接口调用

javascript 复制代码

import axios from 'axios';

const api = axios.create({
    baseURL: 'https://your-api-base-url.com', // 设置基础URL，根据你的实际API地址修改
    timeout: 5000, // 设置请求超时时间（毫秒）
});

// 添加请求拦截器
api.interceptors.request.use(
    (config) => {
        // 在这里可以添加请求头信息，例如身份验证令牌等
        const token = localStorage.getItem('your-auth-token');
        if (token) {
            config.headers.Authorization = `Bearer ${token}`;
        }
        return config;
    },
    (error) => {
        return Promise.reject(error);
    }
);

// 添加响应拦截器
api.interceptors.response.use(
    (response) => {
        // 在这里可以对响应数据进行预处理，例如统一的错误处理逻辑等
        if (response.status === 401) {
            // 处理未授权情况，例如跳转到登录页面
            window.location.href = '/login';
        } else if (response.status >= 400) {
            // 处理其他错误情况，例如显示错误消息给用户
            console.error('API Error:', response.data.error);
            return Promise.reject(response.data.error);
        }
        return response.data;
    },
    (error) => {
        // 处理网络错误等情况
        console.error('Network Error:', error);
        return Promise.reject(error);
    }
);

// 封装常用的GET请求方法
const get = (url, params = {}) => {
    return api.get(url, { params });
};

// 封装常用的POST请求方法
const post = (url, data = {}) => {
    return api.post(url, data);
};

// 封装常用的PUT请求方法
const put = (url, data = {}) => {
    return api.put(url, data);
};

// 封装常用的DELETE请求方法
const del = (url) => {
    return api.delete(url);
};

export default { get, post, put, del };

在React组件中使用封装的接口

jsx 复制代码

import React, { useState, useEffect } from 'react';
import { get } from './api'; // 假设api.js和该组件在同一目录下

const DataFetchingComponent = () => {
    const [data, setData] = useState([]);

    useEffect(() => {
        // 调用封装的GET请求获取数据
        get('/api/data-endpoint')
          .then((response) => {
               setData(response);
           })
          .catch((error) => {
               console.error('Error fetching data:', error);
           });
    }, []);

    return (
        <div>
            <h1>Data Fetching Example</h1>
            <ul>
                {data.map((item) => (
                    <li key={item.id}>{item.name}</li>
                ))}
            </ul>
        </div>
    );
};

export default DataFetchingComponent;

注意事项

错误处理
- 全面的错误处理逻辑：在接口封装中，要对各种可能的错误情况进行处理。不仅包括HTTP状态码错误（如400、401、404、500等），还要考虑网络错误（如请求超时、无法连接到服务器等）。在示例中，通过响应拦截器对不同的状态码进行了相应的处理，如未授权时跳转到登录页面，其他错误情况显示错误消息或拒绝Promise。对于网络错误，也在拦截器中进行了统一的日志记录和错误提示。
- 在组件中处理错误 ：在组件使用接口调用时，要正确处理Promise的reject情况。可以通过try/catch块或者在.then()和.catch()中处理错误。在示例中，使用了.catch()来捕获获取数据时的错误，并在控制台打印错误信息，以便在开发过程中进行调试。在实际应用中，还可以根据错误类型向用户显示更友好的错误提示信息。
安全性
- 身份验证和授权 ：如果API需要身份验证，要确保在请求拦截器中正确添加身份验证令牌。在示例中，从localStorage中获取令牌并添加到请求头的Authorization字段中。要注意令牌的存储和获取方式的安全性，避免令牌泄露。例如，localStorage在一些情况下可能不安全，可以考虑使用更安全的存储方式，如sessionStorage或加密存储。
- 防止跨站请求伪造（CSRF）：如果API易受CSRF攻击，需要采取相应的防范措施。常见的方法是在请求中添加CSRF令牌，可以在表单提交或AJAX请求时将令牌包含在请求头或数据中。服务器端需要验证令牌的有效性。
性能优化
- 缓存策略 ：根据API数据的更新频率和使用情况，可以考虑添加缓存策略。对于不经常变化的数据，可以在客户端进行缓存，以减少不必要的网络请求。可以使用React.memo或自定义的缓存机制来实现。例如，对于一些配置数据或用户信息等，在首次获取后，如果在一定时间内没有更新，可以直接从缓存中获取，而不是再次发送请求。
- 请求合并和节流：如果在一个页面中有多个相关的接口请求，可以考虑将它们合并为一个请求或者进行节流控制，以减少网络请求的次数和频率。例如，在一个表格组件中，当用户进行排序或筛选操作时，可以延迟一段时间再发送请求，避免频繁的请求对服务器造成压力。
可维护性
- 接口的统一管理：将所有的接口调用封装在一个文件或模块中，便于集中管理和维护。如果API地址发生变化或者需要添加新的请求方法，可以在封装文件中进行统一修改，而不需要在每个使用接口的组件中进行修改。同时，要保持接口方法的命名清晰和一致，便于其他开发人员理解和使用。
- 文档和注释：为封装的接口函数添加清晰的文档和注释，说明每个函数的用途、参数和返回值。这对于团队协作和后续的代码维护非常重要。在示例中，虽然函数比较简单，但在实际项目中，接口可能会有更复杂的参数和业务逻辑，良好的文档和注释可以提高代码的可读性和可维护性。
兼容性和测试
- 浏览器兼容性 ：确保使用的HTTP库（如axios）在不同的浏览器中都能正常工作。一些老旧的浏览器可能对某些HTTP特性或请求方式支持不完全，需要进行兼容性测试和处理。可以使用工具如polyfill来解决一些兼容性问题。
- 单元测试 ：为接口封装函数编写单元测试，确保它们的功能正确性。可以使用测试框架如Jest或Mocha来编写测试用例，模拟不同的请求情况和响应结果，验证函数的行为是否符合预期。这有助于在代码修改或升级时及时发现问题，保证接口调用的稳定性。

小结（react 项目开发中应该注意的事项）

状态管理方面
- 合理使用状态管理工具
  - 对于简单的组件状态，useState就足够了。但如果涉及复杂的状态逻辑，特别是多个子状态相互关联且更新逻辑复杂的情况，考虑使用useReducer或者Redux等状态管理库。
  - 例如，在一个购物车应用中，如果只是记录商品数量的简单状态变化，useState可以满足；但如果要处理添加商品、删除商品、计算总价、处理优惠券等多种操作和状态变化，useReducer或者Redux可能更合适。
- 避免过度更新状态
  - 不要在一个渲染周期内频繁地更新状态，这可能会导致组件的过度渲染，降低性能。例如，避免在循环中连续多次调用setState（在类组件中）或setXXX（在函数组件中使用useState）。
  - 如果需要批量更新状态，在类组件中可以使用this.setState((prevState) => {...})的回调形式；在函数组件中，可以合并多个状态更新到一个useEffect或者useReducer的操作中。
- 注意状态的初始化和默认值
  - 确保状态的初始化在合适的生命周期（如constructor或者useState的初始参数）中进行。并且要考虑状态的默认值是否合理，避免出现null或undefined导致的运行时错误。
  - 例如，在一个表单组件中，输入框的初始值状态应该与表单的初始状态或者用户输入的初始值相匹配。
组件设计与复用方面
- 组件的单一职责原则
  - 每个组件应该只负责一项功能。例如，一个组件不应该既负责数据获取又负责数据展示和编辑。这样可以使组件更易于理解、维护和测试。
  - 可以将数据获取的功能封装到专门的数据获取组件或者服务层，而将数据展示和编辑的功能放在单独的展示组件中。
- 组件的可复用性设计
  - 设计组件时要考虑其通用性，尽量使其可以在不同的场景下复用。这包括使用props来传递可变的数据和行为，而不是将数据和行为硬编码在组件内部。
  - 例如，一个按钮组件应该通过props接收按钮的文本、样式、点击事件等，而不是固定这些属性在组件内部。
- 避免过度嵌套组件
  - 虽然React允许深度嵌套组件，但过多的嵌套会使组件树变得复杂，难以理解和调试。如果发现组件嵌套过深，可以考虑使用React Context或者状态提升等方式来简化组件结构。
  - 例如，在一个多层级的菜单组件中，如果每个子菜单都嵌套很深，可能会导致性能问题和代码可读性差，可以考虑使用Context来共享菜单的状态。
性能优化方面
- 使用shouldComponentUpdate或React.memo优化渲染
  - 在类组件中，shouldComponentUpdate可以用来控制组件是否重新渲染。在函数组件中，React.memo可以对组件进行浅比较，避免不必要的重新渲染。
  - 但要注意，过度使用这些优化可能会导致隐藏的Bug，因为有时候组件确实需要重新渲染来更新状态或者获取最新的props。所以在使用时要谨慎考虑组件的更新逻辑。
- 避免不必要的计算和操作
  - 在render函数或者其他频繁执行的函数中，避免进行复杂的计算或者操作。例如，避免在render函数中进行大规模的数据排序、过滤等操作，可以将这些操作放在useEffect或者其他合适的生命周期中进行。
  - 如果有一些昂贵的计算，可以使用useMemo或者useCallback来缓存计算结果或者函数，避免在每次渲染时都重新计算。
- 合理使用虚拟DOM的Diff算法优势
  - React的虚拟DOM Diff算法会尽量减少真实DOM的操作，但如果组件的key属性使用不当，可能会导致性能下降。确保在列表渲染等场景下，为每个元素提供一个稳定的、唯一的key。
  - 例如，在渲染一个动态的任务列表时，使用任务的id作为key，而不是索引，这样当任务的顺序发生变化时，React可以更准确地更新DOM。
样式方面
- 选择合适的样式方案
  - 可以使用内联样式、CSS模块、CSS - in - JS（如styled - components）或者预处理器（如SCSS）等样式方案。根据项目的规模、团队的偏好和具体的需求来选择合适的方案。
  - 对于小型项目，内联样式可能足够简单；对于需要样式隔离和复用的项目，CSS模块或者CSS - in - JS可能更合适；对于喜欢传统CSS语法并且需要变量、混合器等功能的项目，SCSS是一个不错的选择。
- 注意样式的作用域和优先级
  - 在使用CSS模块或者CSS - in - JS时，要注意样式的作用域，避免样式泄漏或者意外的覆盖。在使用传统的CSS或者SCSS时，要注意样式的优先级，避免样式冲突。
  - 例如，在使用SCSS时，避免使用过于宽泛的选择器，以免影响其他组件的样式。
生命周期和副作用方面
- 正确使用生命周期方法和useEffect
  - 在类组件中，了解每个生命周期方法的执行时机和用途，避免使用已废弃的生命周期方法（如componentWillMount、componentWillReceiveProps等）。在函数组件中，正确使用useEffect，注意其依赖项数组的设置，避免产生无限循环或者遗漏更新的情况。
  - 例如，在useEffect中如果依赖项数组没有正确设置，可能会导致每次渲染都执行副作用函数，或者在依赖项变化时没有执行副作用函数。
- 清理副作用
  - 当组件卸载或者某些状态发生变化时，要记得清理副作用。例如，在useEffect中如果创建了定时器、订阅了事件或者进行了网络请求，要在组件卸载（通过返回清理函数）或者状态变化不再需要这些操作时进行清理。
  - 否则可能会导致内存泄漏、重复订阅等问题。
与后端交互方面（数据获取和API调用）
- 合理处理异步操作
  - 在进行网络请求等异步操作时，要正确处理Promise的状态（如pending、fulfilled、rejected）。可以使用async/await或者.then()等方式来处理异步操作的结果。
  - 在函数组件中，通常将异步操作放在useEffect中，并根据异步操作的结果更新状态。在类组件中，可以在componentDidMount、componentDidUpdate等生命周期中进行异步操作。
- 错误处理
  - 对于网络请求等可能出现错误的操作，要有完善的错误处理机制。例如，在fetch请求中，要处理response.ok为false的情况，以及网络错误等情况。
  - 可以在组件中显示错误信息给用户，或者记录错误日志以便排查问题。

react 框架应用+总结+参考

文章目录

react 框架 从零开始

1. 项目初始化

2. 项目结构

3. 基础组件示例

TableComponent.js

TabComponent.js

LoadingComponent.js

Error404Component.js

4. 页面示例

HomePage.js

AboutPage.js

5. 路由配置（App.js）

6. 数据状态管理（简单示例）

reducers.js

actions.js

在组件中使用Redux（例如在HomePage.js中）

7. 第三方库Cesium引用

8.引用three.js

9.引用openlayer

scss应用安装

技术细节（基础组件应用封装-简单示例）

表格组件（TableComponent）

Tab组件（TabComponent）

Loading组件（LoadingComponent）

404错误组件（Error404Component）

api接口应用实例（以axios应用为例）

注意事项

小结 （react 项目开发中应该注意的事项）

react 框架从零开始

小结（react 项目开发中应该注意的事项）