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 进行事件冒泡