如何优化 React 应用的性能？

保持 DOM 更新所涉及的操作成本很高，但 react 使用了几种技术来最小化没有。在许多情况下，这些操作会导致本机更快的 UI。不过，我们可以使用几种技术来加速应用程序：

1. 在构造函数中使用绑定函数：通过在类中添加箭头函数，我们将其添加为对象，而不是作为类的原型属性。如果我们多次使用组件，组件的每个对象中都会有这些函数的各种实例。使用函数最可靠的方法是将它们与构造函数绑定。

2.避免内联样式属性：当样式隐含内联时，浏览器通常会投入大量时间渲染。编写脚本和渲染需要时间，因为浏览器必须为 CSS 属性规划所有 React 样式规则。创建一个单独的 style.js 文件并将其导入到组件中是一种更快的方法。

示例：创建一个单独的style.js文件并在组件中导入，而不是使用内联样式属性：

index.js

import React from “react”;
import styles from "./styles.css"
  
export default class StyleExample extends React.Component {
    render() {
        return (
            <>
                

                    GeeksforGeeks
                
            
        );
    }
}

样式.css

.head1 {
    color: green;
    margin: 50;
}

输出：

3. 使用 React Fragment 避免额外的标签：使用 React Fragment 可以减少标签数量。附加标签并满足在组件中具有单个父元素的必要性。

示例：使用反应片段

应用程序.js

import React from "react";
const App = () => {
    return (
        

            

                GeeksforGeeks: react fragments as root element
            
        
    );
};
export default App;

输出：

4、避免在render方法中使用内联函数：如果我们使用内联函数，该函数会在每次渲染时生成一个对象的新实例，并且这些函数会有多个实例，这会导致垃圾回收消耗更多的时间。为了优化这一点，我们可以在 render 方法之外定义函数并在需要的地方调用它们。

示例：在 render 方法之外创建函数

应用程序.js

import React, { useState } from "react";
const App = () => {
    const [isClicked, setIsclicked] = useState(false);
    const handleClicked = () => {
        setIsclicked(true);
        console.log(`clicked ${isClicked}`);
    };
    return (
        

            

                GeeksforGeeks: function outside render example
            
            Click me!
        
    );
};
export default App;

输出：

5. 避免将所有前端代码捆绑在一个文件中：通过将文件拆分为资源文件和按需代码文件，我们可以减少将捆绑文件呈现给浏览器转换器所消耗的时间。