目录
扩展学习资料
React Fragments/Portals/StrictMode【糖果】
Fragments【并列元素外包裹一个伪元素】
Portals【改变组件挂载节点】
Strict Mode【严格模式,老工程中使用,提示即将失效方法】
React Concurrent Mode【大招】
不可阻断渲染/可中断的渲染
Concurrent Mode API 【react v16.13.1】不稳定
练习
探寻React新版本带来的新技能
名称 |
链接 |
concurrent-mode 文档 |
Introducing Concurrent Mode (Experimental) – React |
fragment 文档 |
Fragments – React |
Portal 文档 |
Portals – React |
新版带来的新功能,可以提高我们的开发体验,解决一下曾经让我们困扰的一些问题,有利于开发。
import React, {Component, Fragment} from 'react'
class AppWithFragment extends Component {
render() {
return (
// 简写<>
云
云1
云2
// 简写>
)
}
}
class AppReturnArray extends Component {
render() {
return [
云,
云1,
云2,
]
)
}
}
class AppWithoutFragment extends Component {
render() {
return (
云
云1
云2
)
}
}
React提供了一个能让改变挂载节点的API。通常的开发中,组件会挂载在其最近的父节点上。在某些特定的需求上,需要挂载在特定的节点上。
const mountDom = document.querySelector('#other-app');
class CustomComponent extends Component {
componentDidMount() {
// 伪代码
}
render() {
return createPortal(// 将 挂载到节点MountDom上
,
mountDom,
)
}
}
import React, { Component } from 'react';
import { createPortal } from 'react-dom';
export default class PortalComponent extends Component {
constructor(props) {
super(props);
const mount = document.createElement('div');
mount.id = 'mount';
this.mountNode = mount;
}
componentDidMount() {
// const mount = document.querySelector('#mount');
document.body.appendChild(this.mountNode);
}
render() {
return createPortal(
Portal Child
,
this.mountNode
);
}
};
Strict Mode提供一个可以显示潜在问题的组件。
class AppWithStrictMode extends Component {
constructor(props) {
super(props);
this.state = {
list: [],
};
}
render() {
return (
// render() 执行2次
提交
);
}
}
如果说Fiber是让应用更好的更新,那Concurrent就是让应用在体验上再上一个台阶。
Blocking Rendering
Interruptible Rendering
让用户得到更好的视觉、产品体验
Loading...}>
Loading...}>
Loading...}>
...
React 16.6之后Suspense配合React.lazy使用已经可以做客户端懒加载。服务端的懒加载,暂时还不能实现
React目前是在用Legacy Mode
Blocking Mode【预计是在v17.x】版本是可以使用部分Concurrent Mode 的API 【包括服务端渲染,包括一些批量处理】
【题目1】用 React Suspence API 与 React Lazy API 构建一个动态加载的单页面应用;