看完 React Donf 2021 回放视频，最大的感触就是震撼！！
那么本次会议的重点是什么呢？
- 🤙 Suspense
- 🤙 并发特性
- 🤙 服务器组件
- 🤙 自动批处理
🤘 Suspense 功能
首先为什么需要这个功能？官方在数以万计的组件当中寻找到了一些代码的共同点，如下：
function Test() {
const [ data, isLading ] = useData("xxxxxxxxxxx");
if (isLading) {
return <>Lading....</>;
}
return (
<div>
{data}
{/* TODO */}
</div>
);
}
那这样看来在如此情况下的代码，必然可以抽离出来，如此就有了 Suspense 这个功能！ 例如：
const Lading = lazy(() => import("./Lading"));
function App() {
return (
<div>
<Suspense fallback={<Lading />}>
<Test />
</Suspense>
</div>
);
}
那在这种情况下，当Test 组件中的数据还没有加载完毕时，就会显示 Lading 组件。
如果你觉得Suspense 就这么点功能！那这次的大会就白开了！其实关于它用法很多，例如：
- 🤙 动态的加载代码拆分的 JS 包！或者加载别的异步资源，提高客户端的渲染能力！
- 🤙 构建服务端渲染的组件，就是基于Suspense功能的！
**注意：本质上，Suspense 功能可以极大的改善数据的加载过程。 **
🤘 并发特性
起因：由于在移动端是存在多线程的，RN 的团队就提出了并发特性这个概念并引进了 React中。以此来实现两个平台的统一！
涉及API：
- 🤙 starTransition
- 🤙 useTransition
- 🤙 useDeferredValue
咱们直接废话不多说直接上对比图：
同步模式：
并发：
偷偷告诉你，我在看的时候没有把演示的 demo 录上，所以就使用了 react-18 讨论中的图。
注意： 目前的并发特性是 React 18 的最重要的基础，以后就不存在 并发模式了，只有并发特性！（不会自动开启并发特性，需要使用API手动开启！）
🤘 服务器组件
服务器组件是基于 Suspense 功能实现的。可以极大的提高 服务端渲染时首页的加载速度！
例如：在服务端渲染页面时，如果页面有的部分内容太大，就可以使用 Suspense 先渲染 Lading(如图一)。之后再渲染内容较多的部分（如图二）。
图一：
代码：
<Suspense fallback={<Spinner />}>
<Comments />
</Suspense>;
图二：
注意： 服务器组件目前仍在开发中，所以还不存在于React 18 的稳定版本中！
🤘 自动批处理
这个功能也相当的重要，其实 翻译成行话就是 自动合并更新 ！例如：
class test extends Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
handleClick = () => {
this.setState({ count: this.state.count + 1 });
this.setState({ count: this.state.count + 1 });
this.setState({ count: this.state.count + 1 });
this.setState({ count: this.state.count + 1 });
};
render() {
return (
<>
{this.state.count}
<button onClick={this.handleClick}> Add</button>
</>
);
}
}
export default test;
例如在handleClick 方法中 我们调用了 4次 setState，其实在更新队列中会合并为一个。用于减少页面的渲染。
还记得 React 最有名的面试题题吗？ setState 什么时候是同步更新，什么时候是异步更新？
现在用了 React 18，估计 这个问题就问不成了！ 因为 在React 18 中，无论 setState 写在 原生事件、setTimeout、Promise.then 中，都支持 更新合并！！
例如：
function test() {
const [count, setCount] = useState(0);
const [name, setName] = useState("");
const butDOM = useRef(null);
setTimeout(() => {
setCount(count + 1);
setName("setTimeout");
}, 1000);
new Promise((resolve) => {
resolve("success");
}).then(() => {
setCount(count + 1);
setName("Promise");
});
butDOM.current?.addEventListener("click", function () {
setCount(count + 1);
setName("addEventListener");
});
return (
<>
<p>{name}</p>
<p>{count}</p>
<button ref={butDOM}>Add</button>
</>
);
}
以上就是 React Conf 2021 我觉得比较重要的内容！
