上海做ui网站最好的公司,小游戏链接点开即玩,iis搭建网站时 属于默认文档的是,秀米官网登录入口文章目录 前言一、16更新二、17更新三、18更新四、19更新总结 前言
总结react 16#xff0c;17#xff0c;18#xff0c;19所更新的内容#xff0c;并且部分会涉及到原理讲解。 一、16更新
1、在16.8之前更新#xff0c;还是基于class组件的升级和维护更新。并且更新了一… 文章目录 前言一、16更新二、17更新三、18更新四、19更新总结 前言
总结react 16171819所更新的内容并且部分会涉及到原理讲解。 一、16更新
1、在16.8之前更新还是基于class组件的升级和维护更新。并且更新了一个重要的架构Fiber架构。 什么是FiberFiber架构的核心是“Fiber”节点它是工作的基本单位。每个React元素都对应一个Fiber节点这些节点构成了一个工作单元的树状结构。Fiber节点包含组件的类型、其对应的DOM节点信息以及子节点和兄弟节点的引用等信息。 2、而16.8的更新是react的一个重要更新呢版本。 更新内容 引入Hooks新增许多hooks的api Hooks解决了什么问题 ① 组件复用 之前 函数组件无法直接管理状态和生命周期所以组件复用通常依赖类组件和高阶组件实现。 例如 // 高阶组件
function withLoading(WrappedComponent) {return class extends React.Component {state { isLoading: false };componentDidMount() {this.setState({ isLoading: true });setTimeout(() {this.setState({ isLoading: false });}, 2000);}render() {const { isLoading } this.state;return (div{isLoading ? divLoading.../div : WrappedComponent {...this.props} /}/div);}};
}
// 被包裹的组件
class MyComponent extends React.Component {render() {return divMy Component Content/div;}
}
// 使用高阶组件
const MyComponentWithLoading withLoading(MyComponent);
// 渲染
ReactDOM.render(MyComponentWithLoading /, document.getElementById(root));hooks出现之后 例如 // 自定义 Hook
function useLoading() {const [isLoading, setIsLoading] useState(false);React.useEffect(() {setIsLoading(true);const timer setTimeout(() {setIsLoading(false);}, 2000);return () clearTimeout(timer); // 清理副作用}, []);return isLoading;
}
// 函数组件
function MyComponent() {const isLoading useLoading();return (div{isLoading ? divLoading.../div : divMy Component Content/div}/div);
}
// 渲染
ReactDOM.render(MyComponent /, document.getElementById(root));② 生命周期函数复杂性 在类组件中常见的生命周期方法包括 constructor初始化状态。 componentDidMount组件挂载后执行。 componentDidUpdate组件更新后执行。 componentWillUnmount组件卸载前执行。 使用 Hooks 模拟生命周期 初始化状态constructor 在函数组件中状态可以通过 useState 初始化。 模拟 componentDidMount 使用 useEffect 的回调函数当组件挂载后执行。 模拟 componentDidUpdate 使用 useEffect 的依赖数组当依赖项变化时执行。 模拟 componentWillUnmount 使用 useEffect 的返回值清理函数在组件卸载前执行。 直接示例 class MyComponent extends React.Component {constructor(props) {super(props);this.state {data: null,count: 0};}componentDidMount() {console.log(Component did mount);this.fetchData();}componentDidUpdate(prevProps, prevState) {console.log(Component did update);if (prevState.count ! this.state.count) {console.log(Count changed from ${prevState.count} to ${this.state.count});}}componentWillUnmount() {console.log(Component will unmount);this.clearData();}fetchData () {// 模拟数据加载setTimeout(() {this.setState({ data: Loaded data });}, 1000);};clearData () {console.log(Clearing data);this.setState({ data: null });};render() {const { data, count } this.state;return (divh1{data || Loading...}/h1button onClick{() this.setState({ count: count 1 })}Increment/button/div);}
}hooks模拟 function MyComponent() {const [data, setData] React.useState(null);const [count, setCount] React.useState(0);// 模拟 componentDidMountReact.useEffect(() {console.log(Component did mount);fetchData();}, []); // 空依赖数组表示只在挂载时执行// 模拟 componentDidUpdateReact.useEffect(() {console.log(Component did update);console.log(Count changed to ${count});}, [count]); // 依赖数组包含 count表示当 count 变化时执行// 模拟 componentWillUnmountReact.useEffect(() {return () {console.log(Component will unmount);clearData();};}, []); // 空依赖数组表示只在卸载时执行const fetchData () {// 模拟数据加载setTimeout(() {setData(Loaded data);}, 1000);};const clearData () {console.log(Clearing data);setData(null);};return (divh1{data || Loading...}/h1button onClick{() setCount(count 1)}Increment/button/div);
}二、17更新
1、新的JSX转化不需要手动引入react React 16 babel-loader会预编译JSX为 React.createElement(…) React 17 React 17中的 JSX 转换不会将 JSX 转换为 React.createElement而是自动从 React 的 package 中引入react并调用。而是React 的运行时调用jsx 和 jsxs 函数react/jsx-runtime 模块提供了 jsx 和 jsxs 函数分别用于处理单个子元素和多个子元素的情况。这些函数在运行时被调用用于创建 React 元素。 jsx与 React.createElement 相比jsx 函数在处理子元素和 key 值时更加高效。例如key 值在 jsx 函数中作为第三个参数直接传递而不是像在 React.createElement 中那样作为属性对象的一部分。 优势 减少包体积 简化代码开发者不再需要在每个组件文件顶部显式引入 React使得组件代码更加简洁。 优化包大小由于不再需要导入整个 React 对象构建工具可以更好地优化输出代码从而减小输出包的大小。 高效参数处理 参数结构优化jsx 函数的参数结构更加合理。它将 children 放在了 props 对象中并将 key 作为单独的参数传递。这种参数结构使得 React 在处理元素时可以更高效地访问和处理 children 和 key减少了不必要的属性查询和处理逻辑。 子元素处理优化在 React 17 之前React.createElement 的子元素是作为后续参数传递的这在处理多个子元素时可能会导致性能问题。而 jsx 函数将子元素作为数组传递给 children 属性这种方式更加清晰且易于优化。 性能优化空间 静态分析优化由于 jsx 函数的实现更加标准化和简洁编译器可以更容易地对 JSX 代码进行静态分析和优化。例如编译器可以在编译时进行常量提升、代码压缩等优化操作从而生成更高效的代码。 减少动态属性查询jsx 函数消除了对动态属性查找的需要这在一定程度上减少了运行时的性能开销。虽然现代 JavaScript 引擎对动态属性查询进行了优化但在大规模应用中这种优化仍然可以带来一定的性能提升 例如 import { jsx as _jsx } from react/jsx-runtime;
function App() {return _jsx(h1, { children: Hello }, 1);
}2、事件代理更改 17中不在document对象上绑定事件改为绑定于每个react应用的rootNode节点因为各个应用的rootNode肯定不同所以这样可以使多个版本的react应用同时安全的存在于页面中不会因为事件绑定系统起冲突。react应用之间也可以安全的进行嵌套。 3、事件池(event pooling)的改变
4、异步执行 17将副作用清理函数(useEffect)改为异步执行即在浏览器渲染完毕后执行。 5、forwardRef 和 memo组件的行为 React 17中forwardRef 和 memo组件的行为会与常规函数组件和class组件保持一致。它们在返回undefined时会报错。
三、18更新 注意v18的新特性是使用现代浏览器的特性构建的彻底放弃对 IE 的支持。 并发模式 18引入了并发特性并发特性允许React在渲染过程中中断和恢复工作从而更好地响应用户交互和系统事件与传统的同步渲染不同并发渲染将渲染任务拆分为多个小任务并根据优先级动态调度这些任务。 实现原理 Fiber架构React 18使用Fiber架构来管理渲染任务。Fiber节点包含组件的类型、状态、props等信息并允许React在渲染过程中暂停和恢复。Fiber架构使用双端队列work-in-progress tree和current tree来管理渲染任务。 时间切片React将长时间的渲染任务拆分成多个较短的时间片以避免阻塞主线程。虽然React内部自动管理时间切片但开发者可以通过控制更新任务的优先级来间接影响时间切片的分配。 优先级调度React引入了任务优先级的概念将任务分为不同的优先级如高优先级任务用户交互、动画等和低优先级任务数据加载、复杂计算等。React会根据任务的优先级动态调度渲染任务确保高优先级任务能够及时得到处理。 中断与恢复在渲染过程中如果浏览器资源紧张或有其他高优先级的任务需要执行React可以暂停当前的渲染任务释放资源给更重要的任务。一旦资源变得可用React会恢复之前的渲染任务并继续执行剩余的小任务。 如何使用并发特性 启用并发模式通过将应用切换到并发模式开发者可以充分利用并发渲染的优势。示例代码如下 import ReactDOM from react-dom/client;
const root ReactDOM.createRoot(document.getElementById(root));
root.render(App /);更新render API // v17
import ReactDOM from react-dom
import App from ./App
ReactDOM.render(App /, document.getElementById(root))
// v18
import ReactDOM from react-dom/client
import App from ./App
ReactDOM.createRoot(document.getElementById(root) as HTMLElement).render(App /)自动批处理 批处理是指 React 将多个状态更新聚合到一次 render 中执行以提升性能 在v17的批处理只会在事件处理函数中实现而在Promise链、异步代码、原生事件处理函数中失效。而v18则所有的更新都会自动进行批处理。 // v17
const handleBatching () {// re-render 一次这就是批处理的作用setCount((c) c 1)setFlag((f) !f)
}
// re-render两次
setTimeout(() {setCount((c) c 1)setFlag((f) !f)
}, 0)// v18
const handleBatching () {// re-render 一次setCount((c) c 1)setFlag((f) !f)
}
// 自动批处理re-render 一次
setTimeout(() {setCount((c) c 1)setFlag((f) !f)
}, 0) 如果不想批处理可以用flushSync强制同步处理同步执行更新 新api 1、startTransition 示例如果一个渲染任务较重的tab页面切换包裹后可以不阻塞其交互点击行为。 原理降低渲染优先级优先处理用户交互行为渲染行为延后 import { startTransition } from react;
function TabContainer() {const [tab, setTab] useState(about);function selectTab(nextTab) {startTransition(() {setTab(nextTab);});}
}2、useTransition 提供了一个带有isPending标志的 Hook useTransition来跟踪 transition 状态用于过渡期。 startTransition回调可以嵌套和处理异步方法 function TabContainer() {const [isPending, startTransition] useTransition();const [tab, setTab] useState(about);function selectTab(nextTab) {startTransition(() {setTab(nextTab);});}
}3、useDeferredValue 类似于上一个hooks标记一个state为延迟更新数据标记为非紧急更新状态。 import { useState, useDeferredValue } from react;
function SearchPage() {const [query, setQuery] useState();const deferredQuery useDeferredValue(query);
}4、useId useId支持同一个组件在客户端和服务端生成相同的唯一的 ID原理就是每个 id 代表该组件在组件树中的层级结构
四、19更新
1、支持元数据标签 文档元数据支持支持在组件中渲染 title、link 和 meta 标签并自动提升到文档的 head 部分 2、 新增Hooks useOptimistic 用于管理乐观更新。当执行某个操作时可以先假设操作成功并立即更新 UI然后在操作完成后根据实际结果调整状态。比如点赞、评论、加入购物车等功能我们都可以先假设成功再根据接口返回来调整。 useActionState 用于管理与用户操作相关的状态。它能够记录和回放用户操作帮助实现更复杂的交互和调试功能。 function ChangeName({ currentName }) {const [error, submitAction, isPending] useActionState(async (prev, formData) {const error await updateName(formData.get(name));if (error) return error;return null;});return (form action{submitAction}input typetext namename defaultValue{currentName} /button typesubmit disabled{isPending}Update/button{error p{error}/p}/form);}use 它可以让你读取类似于 Promise 或 context 的资源的值。可以在if中使用 import { use } from react;
function MessageComponent({ messagePromise }) {const message use(messagePromise);const theme use(ThemeContext);优化 React 编译器可以自动缓存计算结果来优化组件减少不必要的重新读取。在许多情况下开发人员无需明确使用记忆化钩子如 useMemo 和 useCallback。例如以往需要手动使用 useMemo 来缓存昂贵的计算结果现在可以直接写代码编译器会自动优化。 弃用forwardRef const MyInput forwardRef(function MyInput(props, ref) {return (label{props.label}input ref{ref} //label);
});可以直接使用ref function MyInput(props) {return (label{props.label}input ref{props.ref} //label);
}写法优化 Context 作为提供者可以直接使用 Context 作为提供者而不是 Context.Provider。 总结
React 16引入 Fiber 架构提升渲染性能新增错误边界等功能。 React 17事件系统重构新的 JSX 转换机制优化事件处理。 React 18并发渲染、自动批处理、服务器组件性能大幅提升。 React 19引入 Actions 和表单状态管理 API自动优化性能简化开发体验
