React性能优化小技巧

Posted 2021-06-26 小姚同学要继续加油呀

REACT 优化性能

介绍一些项目中可用于改进 React 代码的有效技巧。

避免在渲染函数中使用内联函数定义

原因：如果在JSX属性中使用箭头函数，它将在每次渲染时创建新的函数实例。这可能会为垃圾收集器带来很多工作。

可以定义箭头函数，而不是为 props 定义内联函数。

避免在 map 方法中使用 Index 作为组件的 Key

原因：使用 index作为 key， 被用在React虚拟DOM元素的时候，会使你的应用可能出现错误的数据 。当您从列表中添加或删除元素时，如果该 key 与以前相同，则 React虚拟DOM元素表示相同的组件。

避免使用 props 来初始化 state （直接赋值）

我们经常需要将带有 props 的初始数据传递给 React组件 来设置初始状态值。

React 文档例子
避免将 props 的值复制给 state！这是一个常见的错误：

 constructor(props) {
  super(props);
  // 不要这样做
  this.state = { color: props.color };
 }

React.Fragments 用于避免额外的 html 元素包裹

<React.Fragment>
  <p>xx</p>
</React.Fragment>
// 更加简洁的语法代替 React.fragments 
<>
  <p>xx</p>
</>