React18 新特性 自动批处理(Auto Bacthing)
download：> https://www.sisuoit.com/4132.html
批处理是 React 将多个状况更新分组到一个从头烘托中，以取得更好的功能（削减render次数）。 在React 18曾经，批处理更新只会产生在React事情回调中，而在Promise、setTimeOut、原生事情回调或或任何其他事情内部的更新都没有选用批处理，举个🌰：
// 18曾经: . setTimeout(() => { setCount(c => c + 1); setFlag(f => !f); // render 2次 }, 1000); // 18及今后: setTimeout(() => { setCount(c => c + 1); setFlag(f => !f); // render1次 }, 1000); 绕过黑魔法：flushSync
自定义烘托优先级 在react16退出异步烘托时，提出了烘托优先级的概念，like: 用户输入 > 动画 > 列表展现。在多个烘托使命到来时，它会优先烘托高优先级的使命。
但因为这是一个抱负的设想，程序自己是很难判别什么一定是高优先级，因为用户运用场景太杂乱了；所以在18中，这个底层能力进一步敞开，推出了几个hooks：startTransition、useTransition、 useDeferredValue等，这些hooks 能够让用户自定义烘托优先级
举个例子，输入搜索框，直观念： 20220530095408
下面是伪代码，直接看demo演示直接一点：
import {startTransition} from ‘react’; // 高优先级: 输入数据回显 setInputValue(input); // 运用Transition 对低优先级的烘托进行符号 startTransition(() => { setQuery(input); }); 官方的列子，我觉得对图形化的用户会更易感受，有爱好的能够了解一下：<官方示例>
所以最新版的React将 state 的更新分成了两类：
紧迫更新（Urgent updates）将直接作用于用户交互，比方输入、点击等等 过渡更新（Transition updates）将 UI 从一个视图过渡到另一个视图 经过这些hooks 咱们能够自定义烘托优先级。
新的入口挂载API：createRoot
// 18 曾经： import { render } from ‘react-dom’; const container = document.getElementById(‘app’); render(
11.55.29
渐进式晋级 官方原话：从技术上讲，并发烘托是一个突破性的晋级。因为并发烘托是可中止的，所以启用它时组件的行为会略有不同，这个份额大概0.2%.
所以官方为了大家愈加顺滑的晋级到18，提出了渐进式晋级,提供一个StrictMode API，运用这个模块包裹的节点，将遵照严厉形式，这有助于：
识别不安全的生命周期 运用过期字符串 ref API 的正告 运用抛弃的 findDOMNode 方法的正告 检测意外的副作用 检测过期的 context API 保证可复用的状况 下面的demo, Header 和 Footer 将以正常形式烘托，而被StrictMode包裹的Component节点，将以严厉形式烘托
import React from ‘react’; function ExampleApplication() { return (
<React.StrictMode>
Layout effects are created. Effects are created. // 严厉形式 * React mounts the component. Layout effects are created. Effect effects are created. React simulates effects being destroyed on a mounted component. Layout effects are destroyed. Effects are destroyed. React simulates effects being re-created on a mounted component. Layout effects are created Effect setup code runs 虽说这个模块只在开发环境有效，但仔细的人会发现，重复的毁掉和挂载他还是会带来新的问题，例如： const [value, setValue] = useState(0); useEffect(() => { setValue(val => val + 1); }) // 正常形式打印的是1，但严厉形式这会打印2; 关于这个问题国内已经有文章开端讨论，react 库房也有一个 issue是关于这个问题的讨论，感爱好的能够戳这里。
浅析并发烘托 首要在说react烘托之前，复习一个知识点：浏览器中的js履行和UI烘托是在一个线程中次序产生(包括js履行，事情呼应，定时器，UI烘托)，且js的履行是单线程（根据eventloop）。
20220603155838
这个单线程就决定了，处理A就处理不了B。
有了这个一致，咱们来理一理react烘托史
同步烘托 最早的react（16之前）是同步的，便是指当用户经过 setState 触发一个更新，到更新烘托到页面，会阅历两个进程：
diff阶段：会根节点开端diff，找出更新前后dom树的差异； commit阶段：根据diff的成果，更新UI到页面； 因为整个进程是同步的，会一直占据js线程；所以在一个更新的进程中，页面产生的点击、输入等交互事情都会等待，直到这次更新完成，显然这个体会是糟糕的。
