千峰React:外部库引用
- IT业界
- 2025-09-12 08:57:02
flushSync强制刷新
如果不强制刷新是这样：每次count在下一轮才更新
import { useState, useRef } from 'react' import { flushSync } from 'react-dom' function App() { const [count, setCount] = useState(0) const ref=useRef(null) const handleClick = () => { setCount(count + 1) console.log(ref.current.innerHTML) } return ( <div> <button onClick={handleClick}></button> <div ref={ref}>{count}</div> </div> ) } export default App;引入强制刷新：
import { useState, useRef } from 'react' import { flushSync } from 'react-dom' function App() { const [count, setCount] = useState(0) const ref=useRef(null) const handleClick = () => { flushSync(() => { setCount(count + 1) console.log(ref.current.innerHTML) }) } return ( <div> <button onClick={handleClick}></button> <div ref={ref}>{count}</div> </div> ) } export default App;react自动进行批处理，一次按按钮修改两次count，最终一起渲染，叫自动批处理
import { useState } from 'react' import { flushSync } from 'react-dom' function App() { const [count, setCount] = useState(0) const [count1, setCount1] = useState(0) const handleClick = () => { flushSync(() => { setCount(count + 1) setCount1(count1 + 1) }) console.log( '修改了一次' ) } return ( <div> <button onClick={handleClick}>按钮</button> <div >{count},{count1}</div> </div> ) } export default App; 使用error boundary捕获渲染错误例如在App组件里调用了Head组件，如果Head组件出错的话，正常情况是会影响整个界面的渲染的
我们想要的效果是当Head组件出错时，单独抛出Head组件的问题，并且不影响其他组件执行，需要用到一些第三方库：react-error-boundary
下载
# npm npm install react-error-boundary # pnpm pnpm add react-error-boundary # yarn yarn add react-error-boundary使用方法
<ErrorBoundary fallback={<div>Something went wrong</div>}> <ExampleApplication /> </ErrorBoundary>如果Head还出错，也不会影响其他组件的渲染，并且打印Head的错误
懒加载用到的时候再加载，不用的时候不加载，节省性能
//App.jsx import MyHead from './MyHead.jsx' function Head() { return ( <div> <h1>头部</h1> </div> ) } function App() { return ( <div> {/* <MyHead /> */} </div> ) } export default App; //MyHead.jsx console.log('MyHead.jsx is running...'); function MyHead() { return ( <div> <h1>My Head</h1> </div> ); } export default MyHead;如果引入组件不使用组件，组件还是会加载一遍的
如果在用户没用到这些组件的时候就加载，会大大滴降低性能
import{useState,lazy,Suspense }from 'react' const MyHead = lazy(() => import('./MyHead.jsx')) //lazy需要接收一个promise对象，import()返回的是一个promise对象，符合lazy的要求，且语句执行到这里时，不加载 //使用时才加载 function App() { const [show,setShow]=useState(false) return ( <div> <button onClick={() => setShow(true)}>点击我触发MyHead</button> <Suspense fallback={<div>loading</div> } > {show&&<MyHead/>} </Suspense > </div> ) } export default App;这样就只会在触发MyHead按钮的时候显示MyHead组件了
点击按钮如果网速过慢，还可以显示loading的过程：
createPortal渲染Dom的不同部分作用是将子组件渲染到 DOM 树中的指定节点，而不是父组件的 DOM 结构中
import {createPortal} from 'react-dom' function App() { return ( <div> {createPortal( <p>这是一个段落</p>,document.querySelector('body'))} </div> ) } export default App;结构如下
可以用createPortal将模态框渲染到 body 节点，避免受到父组件样式的影响。
<Profiler>和ReactDevTools的性能测试 import { useState ,Profiler} from "react" function Head({count}) { return ( <div> hello Head{count} </div> ) } function App() { const [count, setCount] = useState(0) const onRender = (id, phase, actualDuration, baseDuration, startTime, commitTime, interactions) => { console.log(id, phase, actualDuration, baseDuration, startTime, commitTime, interactions) } return ( <div> <button onClick={() => { setCount(count + 1) }}>点击</button> {count} <Profiler id='Head' onRender={onRender}> {/* {需要id属性，确认你要测试的是哪个组件} */} <Head count={count} /></Profiler> </div> ) } export default App;每次 Head 组件渲染时，onRender 回调函数都会被调用，并打印性能数据到控制台。
总之就是用作分析性能的
hydrateRoot水合与服务的API CSS-in-JS可以在js里写css下个库
npm install styled-components使用库
import styled from 'styled-components' const Div = styled.div` width:200px; height:200px; background-color:red; ` const Link = styled.a` text-decoration:underline; color:red` function App() { return ( <div> <Div /> <Link>去百度</Link> </div> ) } export default App给Link里的链接加上伪类选择器
const Link = styled.a` text-decoration:underline; color:red &:hover{}`鼠标hover上去会变黄色
import styled from 'styled-components' const Div = styled.div` width:200px; height:200px; background-color:red; ` const Link = styled.a` text-decoration:underline; color:red; &:hover{ color:yellow; }` function App() { return ( <div> <Div /> <Link href=' .baidu '>去百度</Link> </div> ) } export default App如果前面不加&，就是给Div的子类添加hover
import styled from 'styled-components' const Div = styled.div` width:200px; height:200px; background-color:red; p{ color:blue; } ` const Link = styled.a` text-decoration:underline; color:red; &:hover{ color:yellow; }` function App() { return ( <div> <Div><p>嘻嘻嘻我是p</p> </Div > <Link href=' .baidu '>去百度</Link> </div> ) } export default App控制display属性，使用模板字符串
import { useState } from 'react' import styled from 'styled-components' const Div = styled.div` width:200px; height:200px; display:${({show})=>show?'block':'none'}; background-color:red; p{ color:blue; } ` const Link = styled.a` text-decoration:underline; color:red; &:hover{ color:yellow; }` function App() { const [show,setShow]=useState(true) return ( <div> <button onClick={() => setShow(!show)}>切换显示</button> <Div title='hello world' show={show}><p>嘻嘻嘻我是p</p> </Div > <Link href=' .baidu ' >去百度</Link> </div> ) } export default App React里使用TailwindCSS弹幕说这个很好用
使用 Vite 安装 Tailwind CSS - Tailwind CSS
行吧我没学会用就这样吧
喝了小酒我又回来了
//index.css @tailwind base; @tailwind components; @tailwind utilities; //App.jsx export default function App() { return ( <h1 className="text-3xl font-bold underline"> Hello, Vite! </h1> ); } //vite配置 import { defineConfig } from 'vite' import react from '@vitejs/plugin-react-swc' // vite.dev/config/ export default defineConfig({ plugins: [react(), tailwindcss()], }) react-spring动画库pmndrs/react-spring: ✌️ A spring physics based React animation library
# Install the entire library npm install react-spring # or just install your specific target (recommended) npm install @react-spring/web import { useState } from 'react' import { useSpring, animated } from "@react-spring/web"; const FadeIn = ({ isVisible, children }) => { const styles = useSpring({ opacity: isVisible ? 1 : 0, y: isVisible ? 0 : 24, }) return <animated.div style={styles}>{children}</animated.div> } function App() { const [isVisible, setIsVisible] = useState(true) return ( <div> <button onClick={()=>setIsVisible(!isVisible) }></button> <FadeIn isVisible={isVisible}>hello App</FadeIn> </div> ) } export default App;可以实现淡入淡出的效果
import { useState } from 'react' import { useSpring, animated } from "@react-spring/web"; const FadeIn = ({ isVisible, children }) => { const styles = useSpring({ opacity: isVisible ? 1 : 0, y: isVisible ? 0 : 24, }) return (<animated.div style={styles}>{children} <animated.span>{ styles.y.to((val) => val.toFixed(0))}</animated.span> </animated.div> ) } function App() { const [isVisible, setIsVisible] = useState(true) return ( <div> <button onClick={()=>setIsVisible(!isVisible) }></button> <FadeIn isVisible={isVisible}>hello App</FadeIn> </div> ) } export default App;点击以后数字会改变
Ant Design Charts图表库和echarts for reactzustnd 小浣熊
算了加载不出来
蚊子咬学长推了这个echarts for react
import React, { useEffect } from 'react'; import ReactECharts from 'echarts-for-react'; const MyChart = () => { // 这里定义图表的 option 配置 const getOption = () => ({ title: { text: 'ECharts 示例', }, tooltip: {}, xAxis: { data: ['A', 'B', 'C', 'D', 'E'], }, yAxis: {}, series: [ { name: '销量', type: 'bar', data: [5, 20, 36, 10, 10], }, ], }); // 处理图表准备完毕的回调 const onChartReadyCallback = () => { console.log('Chart is ready'); }; // 处理图表事件 const EventsDict = { click: (params) => { console.log('Chart clicked', params); }, }; return ( <div> <ReactECharts option={getOption()} notMerge={true} lazyUpdate={true} theme="light" onChartReady={onChartReadyCallback} onEvents={EventsDict} opts={{ renderer: 'canvas' }} // 你可以设置更多选项 /> </div> ); }; export default MyChart; React-BMapGL地图库React-BMapGL文档
千峰React:外部库引用由讯客互联IT业界栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“千峰React:外部库引用”
上一篇
2025-03-01学习记录--C/C++-C语言使用欧几里
下一篇
SSH监控
