【React 】React 性能优化的手段有哪些？

1. 是什么

React凭借virtual DOM和diff算法拥有高效的性能，但是某些情况下，性能明显可以进一步提高
在前面文章中，我们了解到类组件通过调用setState方法，就会导致render ,父组件一旦发生render渲染，子组件一定也会执行render渲染

2. 如何做

在React中如何避免不必要的render中，我们了解到如何避免不必要的render来应付上面的问题，主要手段是通过shouldComponentUpdate、PureComponent 、React.memo ,这三种形式这里就不再复述
除此之外，常见性能优化常见的手段有如下：

• 避免使用内联函数
• 使用React Fragments避免额外标记
• 使用Immutable
• 懒加载组件
• 事件绑定方式
• 服务端渲染

2.1 避免使用内联函数

如果我们使用内联函数，则每次调用render函数时都会创建一个新的函数实例，如下：

import React from "react";
export default class InlineFunctionComponent extends React.Component {
   
    render() {
   
        return ( 
            <div> 
                <h1>Welcome RUI </h1> 
                <input type&