面试题：Node.js与React结合的性能优化

前端React性能优化

组件渲染优化
- 使用React.memo：对于函数式组件，若其props没有变化，React.memo可以避免不必要的重新渲染。例如：

const MyComponent = React.memo((props) => {
    return <div>{props.value}</div>;
});

- **shouldComponentUpdate**：对于类组件，可通过重写`shouldComponentUpdate`方法来控制组件是否更新。对比前后props和state，只有在有必要时才返回`true`进行更新。

class MyClassComponent extends React.Component {
    shouldComponentUpdate(nextProps, nextState) {
        return this.props.value!== nextProps.value || this.state.someValue!== nextState.someValue;
    }
    render() {
        return <div>{this.props.value}</div>;
    }
}

- **虚拟DOM Diff算法优化**：虽然React自身的Diff算法已经很高效，但合理的组件拆分与层次结构设计能进一步减少Diff的计算量。例如，将复杂组件拆分成多个小组件，每个小组件负责独立的功能部分，这样在数据变化时，Diff算法只需关注相关的小组件。
- **懒加载**：对于一些非首屏必要的组件，使用React.lazy和Suspense进行懒加载。比如图片组件或一些不常用的模态框组件。

const BigComponent = React.lazy(() => import('./BigComponent'));

function App() {
    return (
        <div>
            <React.Suspense fallback={<div>Loading...</div>}>
                <BigComponent />
            </React.Suspense>
        </div>
    );
}

状态管理优化
- 减少不必要的状态提升：仅将需要共享的状态提升到最近的共同祖先组件，避免过度提升状态导致不必要的重新渲染。例如，若只有两个子组件需要共享某个状态，将状态提升到它们的直接父组件即可。
- 使用Redux或MobX等状态管理库优化：
  - Redux：通过使用redux-thunk或redux-saga等中间件处理异步操作，避免在组件内直接处理复杂异步逻辑，保持组件的纯净性。同时，利用reselect库进行高效的状态选择，避免不必要的重新计算。
  - MobX：利用其响应式编程模型，通过observable和action来管理状态，使得只有依赖该状态的组件会在状态变化时重新渲染。例如：

import { observable, action } from'mobx';

class Store {
    @observable value = 0;
    @action increment = () => {
        this.value++;
    }
}

const myStore = new Store();

后端Node.js性能优化

异步处理
- 使用async/await：以同步的方式编写异步代码，使代码更易读且避免回调地狱。例如：

async function getData() {
    try {
        const result1 = await someAsyncFunction1();
        const result2 = await someAsyncFunction2(result1);
        return result2;
    } catch (error) {
        console.error(error);
    }
}

- **合理使用Promise.all**：当需要并行执行多个异步操作时，`Promise.all`可以提高效率。例如：

const promise1 = someAsyncFunction1();
const promise2 = someAsyncFunction2();
const promise3 = someAsyncFunction3();

Promise.all([promise1, promise2, promise3]).then(([result1, result2, result3]) => {
    // 处理结果
});

- **事件驱动架构**：利用Node.js的事件驱动特性，通过`EventEmitter`处理事件，避免阻塞I/O操作。例如，在文件读取完成或网络请求响应时触发相应事件进行处理。

const EventEmitter = require('events');
const myEmitter = new EventEmitter();

myEmitter.on('dataReceived', (data) => {
    console.log('Received data:', data);
});

// 模拟异步操作完成后触发事件
setTimeout(() => {
    myEmitter.emit('dataReceived', 'Some data');
}, 1000);

资源管理
- 内存管理：避免内存泄漏，及时释放不再使用的资源。例如，在处理数据库连接时，确保在使用完毕后关闭连接。

const mysql = require('mysql');
const connection = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: '',
    database: 'test'
});

connection.connect();

// 使用连接执行查询等操作

connection.end();

- **缓存**：对于频繁访问且不经常变化的数据，使用缓存。例如，使用`node-cache`库缓存数据库查询结果。

const NodeCache = require('node-cache');
const myCache = new NodeCache();

async function getCachedData() {
    let data = myCache.get('key');
    if (!data) {
        data = await someDatabaseQuery();
        myCache.set('key', data);
    }
    return data;
}

- **优化文件系统操作**：在进行文件读取或写入时，尽量使用异步方法，减少对主线程的阻塞。例如，使用`fs.readFile`的异步版本`fs.readFileAsync`。

const fs = require('fs').promises;

async function readFileContent() {
    try {
        const content = await fs.readFile('file.txt', 'utf8');
        return content;
    } catch (error) {
        console.error(error);
    }
}

星途面试题库

面试题：Node.js与React结合的性能优化

知识考点

面试题答案

前端React性能优化

后端Node.js性能优化