千峰React:外部库引用

flushSync欺压革新

如果不欺压革新是如许：每次count在下一轮才更新

1. import { useState, useRef } from 'react'
2. import { flushSync } from 'react-dom'
4. function App() {
5.   const [count, setCount] = useState(0)
6.   const ref=useRef(null)
7.   const handleClick = () => {
9.       setCount(count + 1)
10.       console.log(ref.current.innerHTML)
11.    
12.   }
13.   return (
14.     <div>
15.       <button onClick={handleClick}></button>
16.       <div ref={ref}>{count}</div>
17.     </div>
18.   )
19. }
21. export default App;

复制代码

引入欺压革新：

1. import { useState, useRef } from 'react'
2. import { flushSync } from 'react-dom'
4. function App() {
5.   const [count, setCount] = useState(0)
6.   const ref=useRef(null)
7.   const handleClick = () => {
8.     flushSync(() => {
9.       setCount(count + 1)
10.       console.log(ref.current.innerHTML)
11.     })
12.   }
13.   return (
14.     <div>
15.       <button onClick={handleClick}></button>
16.       <div ref={ref}>{count}</div>
17.     </div>
18.   )
19. }
21. export default App;

复制代码

react自动举行批处理处罚，一次按按钮修改两次count，终极一起渲染，叫自动批处理处罚

1. import { useState } from 'react'
2. import { flushSync } from 'react-dom'
4. function App() {
5.   const [count, setCount] = useState(0)
6.   const [count1, setCount1] = useState(0)
7.   
8.   const handleClick = () => {
9.     flushSync(() => {
10.       setCount(count + 1)
11.       setCount1(count1 + 1)
12.     })
13.    
14.     console.log(
15.         '修改了一次'
16.       )
17.   }
18.   return (
19.     <div>
20.       <button onClick={handleClick}>按钮</button>
21.       <div >{count},{count1}</div>
22.     </div>
23.   )
24. }
26. export default App;

复制代码

利用error boundary捕捉渲染错误

比方在App组件里调用了Head组件，如果Head组件堕落的话，正常环境是会影响整个界面的渲染的
我们想要的效果是当Head组件堕落时，单独抛出Head组件的题目，而且不影响其他组件实行，须要用到一些第三方库：react-error-boundary
下载

1. # npm
2. npm install react-error-boundary
4. # pnpm
5. pnpm add react-error-boundary
7. # yarn
8. yarn add react-error-boundary

复制代码

利用方法

1. <ErrorBoundary fallback={<div>Something went wrong</div>}>
2.   <ExampleApplication />
3. </ErrorBoundary>

复制代码

如果Head还堕落，也不会影响其他组件的渲染，而且打印Head的错误

懒加载

用到的时间再加载，不消的时间不加载，节省性能

1. //App.jsx
2. import MyHead from './MyHead.jsx'
3. function Head() {
4.   return (
5.     <div>
6.       <h1>头部</h1>
7.     </div>
8.   )
9. }
11. function App() {
12.   
13.   return (
14.     <div>
15.   {/* <MyHead /> */}
16.     </div>
17.   )
18. }
20. export default App;
21. //MyHead.jsx
22. console.log('MyHead.jsx is running...');
24. function MyHead() {
25.     return (
26.         <div>
27.             <h1>My Head</h1>
28.         </div>
29.     );
30. }
31. export default MyHead;

复制代码

如果引入组件不利用组件，组件照旧会加载一遍的

如果在用户没用到这些组件的时间就加载，会大大滴低落性能

1. import{useState,lazy,Suspense }from 'react'
3. const MyHead = lazy(() => import('./MyHead.jsx'))
4. //lazy需要接收一个promise对象，import()返回的是一个promise对象，符合lazy的要求，且语句执行到这里时，不加载
5. //使用时才加载
6. function App() {
7.   const [show,setShow]=useState(false)
8.   return (
9.     <div>
10.       <button onClick={() => setShow(true)}>点击我触发MyHead</button>
11.       <Suspense fallback={<div>loading</div> } >
12.       {show&&<MyHead/>}
13.       </Suspense >
14.     </div>
15.   )
16. }
18. export default App;

复制代码

如许就只会在触发MyHead按钮的时间体现MyHead组件了

点击按钮如果网速过慢，还可以体现loading的过程：

createPortal渲染Dom的差别部门

作用是将子组件渲染到 DOM 树中的指定节点，而不是父组件的 DOM 布局中

1. import {createPortal} from 'react-dom'
2. function App() {
3.   return (
4.     <div>
5.      
6.       {createPortal( <p>这是一个段落</p>,document.querySelector('body'))}
7.     </div>
8.   )
9. }
11. export default App;

复制代码

布局如下

可以用createPortal将模态框渲染到 body 节点，克制受到父组件样式的影响。

<rofiler>和ReactDevTools的性能测试

1. import { useState ,Profiler} from "react"
2. function Head({count}) {
3.   return (
4.     <div>
5. hello Head{count}
6.     </div>
7.   )
8. }
9. function App() {
10.   const [count, setCount] = useState(0)
11.   const onRender = (id, phase, actualDuration, baseDuration, startTime, commitTime, interactions) => {
12.     console.log(id, phase, actualDuration, baseDuration, startTime, commitTime, interactions)
13.    
14.   }
15.   return (
16.     <div>
17.       <button onClick={() => { setCount(count + 1) }}>点击</button>
18.       {count}
19.       <Profiler id='Head' onRender={onRender}>
20.         {/* {需要id属性，确认你要测试的是哪个组件} */}
21.       <Head count={count} /></Profiler>
22.     </div>
23.   )
24. }
26. export default App;

复制代码

每次 Head 组件渲染时，onRender 回调函数都会被调用，并打印性能数据到控制台。

总之就是用作分析性能的

hydrateRoot水合与服务的API

CSS-in-JS可以在js里写css

下个库

1. npm install styled-components

复制代码

利用库

1. import styled from 'styled-components'
2. const Div = styled.div`
3. width:200px;
4. height:200px;
5. background-color:red;
6. `
7. const Link = styled.a`
8. text-decoration:underline;
9. color:red`
10. function App() {
11.   return (
12.     <div>
13.       <Div />
14.       <Link>去百度</Link>
15.     </div>
16.   )
17. }
18. export default App

复制代码

给Link里的链接加上伪类选择器

1. const Link = styled.a`
2. text-decoration:underline;
3. color:red
4. &:hover{}`

复制代码

鼠标hover上去会变黄色

1. import styled from 'styled-components'
2. const Div = styled.div`
3. width:200px;
4. height:200px;
5. background-color:red;
6. `
7. const Link = styled.a`
8. text-decoration:underline;
9. color:red;
10. &:hover{
11. color:yellow;
12. }`
13. function App() {
14.   return (
15.     <div>
16.       <Div />
17.       <Link href='https://www.baidu.com'>去百度</Link>
18.     </div>
19.   )
20. }
21. export default App

复制代码

如果前面不加&，就是给Div的子类添加hover

1. import styled from 'styled-components'
2. const Div = styled.div`
3. width:200px;
4. height:200px;
5. background-color:red;
6. p{
7. color:blue;
8. }
9. `
10. const Link = styled.a`
11. text-decoration:underline;
12. color:red;
13. &:hover{
14. color:yellow;
15. }`
16. function App() {
17.   return (
18.     <div>
19.      <Div><p>嘻嘻嘻我是p</p> </Div >
20.       <Link href='https://www.baidu.com'>去百度</Link>
21.     </div>
22.   )
23. }
24. export default App

复制代码

控制display属性，利用模板字符串

1. import { useState } from 'react'
2. import styled from 'styled-components'
3. const Div = styled.div`
4. width:200px;
5. height:200px;
6. display:${({show})=>show?'block':'none'};
7. background-color:red;
8. p{
9. color:blue;
10. }
11. `
12. const Link = styled.a`
13. text-decoration:underline;
14. color:red;
15. &:hover{
16. color:yellow;
17. }`
18. function App() {
19.   const [show,setShow]=useState(true)
20.   return (
21.     <div>
22.       <button onClick={() => setShow(!show)}>切换显示</button>
23.       <Div title='hello world' show={show}><p>嘻嘻嘻我是p</p> </Div >
24.       <Link href='https://www.baidu.com' >去百度</Link>
25.     </div>
26.   )
27. }
28. export default App

复制代码

React里利用TailwindCSS

弹幕说这个很好用
利用 Vite 安装 Tailwind CSS - Tailwind CSS
行吧我没学会用就如许吧
喝了小酒我又返来了

1. //index.css
2. @tailwind base;
3. @tailwind components;
4. @tailwind utilities;
5. //App.jsx
6. export default function App() {
7.   return (
8.     <h1 className="text-3xl font-bold underline">
9.       Hello, Vite!
10.     </h1>
11.   );
12. }
13. //vite配置
14. import { defineConfig } from 'vite'
15. import react from '@vitejs/plugin-react-swc'
17. // https://vite.dev/config/
18. export default defineConfig({
19.   plugins: [react(), tailwindcss()],
20.   
21. })

复制代码

react-spring动画库

pmndrs/react-spring: ✌️ A spring physics based React animation library

1. # Install the entire library
2. npm install react-spring
3. # or just install your specific target (recommended)
4. npm install @react-spring/web

复制代码

2. import { useState } from 'react'
3. import { useSpring, animated } from "@react-spring/web";
5. const FadeIn = ({ isVisible, children }) => {
6.   const styles = useSpring({
7.     opacity: isVisible ? 1 : 0,
8.     y: isVisible ? 0 : 24,
9.   })
11.   return <animated.div style={styles}>{children}</animated.div>
12. }
13. function App() {
14.   const [isVisible, setIsVisible] = useState(true)
15.   return (
16.     <div>
17.       <button onClick={()=>setIsVisible(!isVisible) }></button>
18.       <FadeIn isVisible={isVisible}>hello App</FadeIn>
19.     </div>
20.   )
21. }
22. export default App;

复制代码

可以实现淡入淡出的效果

1. import { useState } from 'react'
2. import { useSpring, animated } from "@react-spring/web";
4. const FadeIn = ({ isVisible, children }) => {
5.   const styles = useSpring({
6.     opacity: isVisible ? 1 : 0,
7.     y: isVisible ? 0 : 24,
8.   })
10.   return (<animated.div style={styles}>{children}
11.    <animated.span>{ styles.y.to((val) => val.toFixed(0))}</animated.span>
12.   </animated.div>
14.   )
15. }
16. function App() {
17.   const [isVisible, setIsVisible] = useState(true)
18.   return (
19.     <div>
20.       <button onClick={()=>setIsVisible(!isVisible) }></button>
21.       <FadeIn isVisible={isVisible}>hello App</FadeIn>
22.     </div>
23.   )
24. }
25. export default App;

复制代码

点击以后数字会改变

Ant Design Charts图表库和echarts for react

zustnd 小浣熊
算了加载不出来
蚊子咬学长推了这个echarts for react

1. import React, { useEffect } from 'react';
2. import ReactECharts from 'echarts-for-react';
4. const MyChart = () => {
5.   // 这里定义图表的 option 配置
6.   const getOption = () => ({
7.     title: {
8.       text: 'ECharts 示例',
9.     },
10.     tooltip: {},
11.     xAxis: {
12.       data: ['A', 'B', 'C', 'D', 'E'],
13.     },
14.     yAxis: {},
15.     series: [
16.       {
17.         name: '销量',
18.         type: 'bar',
19.         data: [5, 20, 36, 10, 10],
20.       },
21.     ],
22.   });
24.   // 处理图表准备完毕的回调
25.   const onChartReadyCallback = () => {
26.     console.log('Chart is ready');
27.   };
29.   // 处理图表事件
30.   const EventsDict = {
31.     click: (params) => {
32.       console.log('Chart clicked', params);
33.     },
34.   };
36.   return (
37.     <div>
38.       <ReactECharts
39.         option={getOption()}
40.         notMerge={true}
41.         lazyUpdate={true}
42.         theme="light"
43.         onChartReady={onChartReadyCallback}
44.         onEvents={EventsDict}
45.         opts={{ renderer: 'canvas' }} // 你可以设置更多选项
46.       />
47.     </div>
48.   );
49. };
51. export default MyChart;

复制代码

React-BMapGL舆图库

React-BMapGL文档