React 使用优化，性能优化包含（ES6）-优快云博客

本文探讨了JavaScript中模块导出的最佳实践，包括多模块和多常量的合并输出技巧。此外，深入解析了React中的关键概念，如keys的作用与最佳使用场景，context的数据传递方式，fragments的使用及portals的渲染机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.输出多模块

//改写前
export let name = 'zbx';
export let age = '16';
export let sex = 'man';

//改写后
let name = 'zbx';
let age = '16';
let sex = 'man';
export = {name, age, sex}

//在引用时使用import  通过as 改名
import * as info from './info';
//可以这样输出
info.name/info.age/info.sex

2.多常量合并输出

// constants/db.js
export const db = {
  url: 'http://my.couchdbserver.local:5984',
  admin_username: 'admin',
  admin_password: 'admin password'
};

// constants/user.js
export const users = ['root', 'admin', 'staff', 'ceo', 'chief', 'moderator'];

//将常亮统一合并到index.js
// constants/index.js
export {db} from './db';
export {users} from './users';

// script.js
import {db, users} from './constants/index';

3.Keys

React的key属性，可以使节点树变换提高更新效率。
key是使用唯一的ID，有是会使用索引值，当元素没用重排列的时候是一个不错的方法，但是当元素有重排操作，那将导致更新缓慢。
原因，当元素重排后，当前元素已经对应的不是之前的索引值，将导致非受控组件状态的混淆和更新。

Keys应该是稳定的，可预测的，且唯一的。不稳定的key（类似由Math.random()生成的）将使得大量组件实例和DOM节点进行不必要的重建，使得性能下降并丢失子组件的状态。

4.context Context 通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递 props 属性。

不要仅仅为了避免在几个层级下的组件传递 props 而使用 context，它是被用于在多个层级的多个组件需要访问相同数据的情景。

5.Fragments Fragments 可以让你聚合一个子元素列表，并且不在DOM中增加额外节点。

//场景：当一个组件需要返回一个列表的时候，可以使用 <React.Fragment></React.Fragment>
render(){
  return(
  	<>
	  <td>tdList1</td>
	  <td>tdList2</td>
	  <td>tdList3</td>
	</>
  )
}

<></>是React.Fragment 的语法糖

6.Portals Portals 提供了一种很好的将子节点渲染到父组件以外的 DOM 节点的方式。 Portals 进行事件冒泡

转载于:https://my.oschina.net/zhubaoxin/blog/2989987