--- theme: cyanosis highlight: solarized-dark --- 话不多说直接上案例！ ### 1.state异步更新批处理这是在react官方文档提到的，但开发中有些时候大意也会经常搞错 #### 简单案例 ```tsx import { useState } from 'react' export default function Demo1() { const [count, setCount] = useState(0) const handleClick = () => { setCount(count + 1) setCount(count + 1) setCount(count + 1) } return (

{`count is ${count}`}

) } ``` 1. 触发handleClick函数，由于React中的状态更新是异步的，会将三次setCount添加入队列 2. 当React最终决定执行状态更新时使用的是最新的count值，而不是在handleClick函数中每次调用setCount时的值即： ```tsx setCount(0 + 1) setCount(0 + 1) setCount(0 + 1) ``` ![Img](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5c31ba728e994343bb0e542106541b36~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1446\&h=810\&s=243630\&e=gif\&f=90\&b=201f1f) 这个现象通常被称为"React中的批处理"（Batching in React）。React 会将多个状态更新操作合并到一个批处理中，以提高性能并减少不必要的渲染。这意味着在一次渲染周期内，多个状态更新可能会被合并成一个，从而导致某些操作不会立即生效解决方案是修改为更新函数，每个更新函数都会加入队列，更新函数会获取上个更新函数的返回值经过计算传递给下个更新函数 ```tsx const handleClick = () => { setCount(prev => prev + 1) setCount(prev => prev + 1) setCount(prev => prev + 1) } ``` 详细可见官方文档 [react文档](https://react.dev/learn/queueing-a-series-of-state-updates) [react中文文档](https://react.docschina.org/learn/queueing-a-series-of-state-updates) ### 2.条件渲染 React Hooks必须以相同的顺序被调用: 如果你在一个条件语句中使用了 useEffect等hooks，这个条件语句的结果可能会导致在某些情况下提前返回组件，那么就会触发这个错误例如： ```tsx import { useEffect, useState } from 'react' export default function Demo2({ id }: { id: number }) { if (!id) return 'hello world' const [doSomething, setSomething] = useState() useEffect(() => {}, [doSomething]) return

{'other..'}

} ``` ![Img](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/faecbd30d5a1478684fd4ae8d2d90351~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2812\&h=938\&s=251999\&e=png\&b=222222) 如果要粗暴的解决直接把这个eslint关掉也行。。。但更好的办法是把条件渲染语句放在hooks之后 ```tsx import { useEffect, useState } from 'react' export default function Demo2({ id }: { id: number }) { const [doSomething, setSomething] = useState() useEffect(() => {}, [doSomething]) return

{!id ? 'hello asworld' :

{'other thing'}

}

} ``` 这样就ok，这个setSomething是没有使用做了个警告⚠️ ![Img](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c2c5339a1fc7464093b13dabc3f15e11~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2292\&h=754\&s=149439\&e=png\&b=222222) ### 3.更新对象状态假设你有一个表单，你需要通过一个输入框更新初始化的person中的名字，你可能会这样做 ```tsx import { useEffect, useState } from 'react' export default function Demo() { const [person, setPerson] = useState({ name: 'herry', age: '18', sex: 'female' }) const handleClick = e => { setPerson((person.name = e.target.name)) } return ( ) } ``` ![Img](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/06d5098600d54e88a7979fc55004b6b5~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=710\&h=618\&s=165977\&e=png\&b=fcefef) 报错是因为person是一个对象，修改之后返回的也应该是对象 ```tsx // 可以复制一个对象但是修改的name需要放在...person之下，防止被覆盖 const handleClick = e => { setPerson({ ...person, name : e.target.value }) } // 或者写成函数形式 const handleClick = e => { setPerson(perv => { return { ...perv, name: e.target.value, } }) } // 或者直接返回 const handleClick = e => { setPerson(perv => ({ ...perv, name: e.target.value, })) } ``` ![Img](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5e817edebe8945f9938a5dfbb75ffc8a~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1196\&h=1484\&s=252186\&e=png\&b=ffffff) ### 4.统一改变一个对象的值假设你现在有一个表单 ![Img](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dd60b2d30e8e4efa91d8f1c15242d26c~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=718\&h=894\&s=35480\&e=png\&b=dee1e2) 每个输入框改变你都需要传入不同的参数，如果你知道可以传键值你可能会这样做 ```tsx import { useEffect, useState } from 'react' export default function Form() { const [form, setForm] = useState({ firstName: '', secondName: '', email: '', address: '', }) const handleChange = (e, propsName) => { setForm({ ...form, [propsName]: e.target.value, }) } return ( ) } ``` 因为每个input都有个name属性，可以利用name来简洁我们的代码 ```js import { useEffect, useState } from 'react' export default function Form() { const [form, setForm] = useState({ firstName: '', secondName: '', email: '', address: '', }) console.log(form) const handleChange = e => { setForm({ ...form, [e.target.name]: e.target.value, }) } return ( ) } ``` ### 5.省去不必要是state，effect 假设你现在有一辆购物车，每件商品是PRICE利润，当增加商品时可以通过商品件数 \* PRICE算出总利润profit ![Img](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a25a92d875e74786887a61bcef95dbc7~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=364\&h=308\&s=14319\&e=png\&b=e0e2e3) 你可能会这么写 ```js import { useEffect, useState } from 'react' const PRICE = 10 export default function CountProfle() { const [count, setCount] = useState(0) const [profit, setProfit] = useState(0) useEffect(() => setProfit(PRICE * count), [count]) return (

{`profit is ${profit}`}

) } ``` 但其实每次add one都会重新渲染页面，可以直接通过计算得出profit ```js import { useEffect, useState } from 'react' const PRICE = 10 export default function CountProfle() { const [count, setCount] = useState(0) const profit = count * PRICE return (

{`profit is ${profit}`}

) } ``` ### 6.state的浅比较 JavaScript中原始值和引用值，引用值就是object，原始值就是除object以外的类型，state在比较更新时只是浅比较 ```js import { useEffect, useState } from 'react' export default function CompareState() { console.log('render..') const [count, setCount] = useState(0) const handleClick = () => { setCount(0) } return (

) } ``` ![Img](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/28b55de38dcc4867859e41ac4a1448ce~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1748\&h=884\&s=431372\&e=gif\&f=141\&b=e0e3e4) 可见如果原始值没有改变其实state不会重新渲染而引用值是比较地址的不同，显然会重新渲染 ```js import { useEffect, useState } from 'react' export default function CompareState() { console.log('render..') const [person, setAge] = useState({ name: `herry`, age: '18' }) const handleClick = () => { setAge({ name: `herry`, age: '18' }) } return (

) } ``` ![Img](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/42451094e7614f6f9c15fdde6396a869~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1822\&h=846\&s=314562\&e=gif\&f=89\&b=e0e3e4) 如果你想监听object中的每个属性 ```js useEffect(()=>{ doSometing() },[obj.prop]) ``` ### 7.初始化加载数据考虑一个场景，进入一个页面首先获取数据然后展示特定数据，你可能会这样写 ```js import { useEffect, useState } from 'react' export default function InitData() { console.log('render..') const [data, setData] = useState(null) useEffect(() => { fetch('https://dummyjson.com/posts/1') .then(e => e.json()) .then(e => setData(e)) }, []) return (

{data.title}

{data.body}

) } ``` ![Img](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3040f2678e3b48049ac335439560efd9~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=718\&h=372\&s=85260\&e=png\&b=fdf4f4) 这是因为在数据还获取到之前data为Null,直接.title取值肯定是取不到的为空一般做法是在加载页面之前会有个loading，数据加载完loading撤去 ```js import { useEffect, useState } from 'react' export default function InitData() { console.log('render..') const [data, setData] = useState(null) const [loading, setLoading] = useState(true) useEffect(() => { fetch('https://dummyjson.com/posts/1') .then(e => e.json()) .then(e => { setData(e) setLoading(false) }) }, []) return (

{loading ? ( 'loading ...' ) : ( <>

{data?.title}

{data?.body}

)}

) } ``` ![Img](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9ac1b92717f7425b9a2471b4a4baa2ba~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1802\&h=928\&s=623718\&e=gif\&f=102\&b=dfe2e3) ### 8.给state加必要的类型比如上个例子，其实稍不注意万一写成data.titleee也是有可能的，js也不会报错 ```js type Data{ title : string body : string } const [data, setData] = useState(null) ``` ### 9.尽可能将重复的代码抽离成hook 假设你有俩个组件同时需要用到windowSize，其中也有一些重复的逻辑，可能是这样的代码 ```js import { useEffect, useState } from 'react' export function ExampleComponent1() { const [windowsize, setWindowsize] = useState(1092) useEffect(() => { const changeWindowSize = () => { setWindowsize(window.innerWidth) } window.addEventListener('resize', changeWindowSize) return () => { window.removeEventListener('resize', changeWindowSize) } }) return <>component1 } export function ExampleComponent2() { const [windowsize, setWindowsize] = useState(1092) useEffect(() => { const changeWindowSize = () => { setWindowsize(window.innerWidth) } window.addEventListener('resize', changeWindowSize) return () => { window.removeEventListener('resize', changeWindowSize) } }) return <>component2 } ``` 都是重复代码，逻辑一样 ===> hook! ```js import { useEffect, useState } from 'react' const useWindowSize = () => { const [windowsize, setWindowsize] = useState(1092) useEffect(() => { const changeWindowSize = () => { setWindowsize(window.innerWidth) } window.addEventListener('resize', changeWindowSize) return () => { window.removeEventListener('resize', changeWindowSize) } }) return windowsize } export function ExampleComponent1() { const windowsize = useWindowSize() return <>component1 } export function ExampleComponent2() { const windowsize = useWindowSize() return <>component2 } ``` ### 10.node环境使用hook 如果你在node环境中比如express、nest、koa框架中直接使用useState useEffect是找不到的，当然一些浏览器特有的东西也不存在，比如window localStoarge也没有你必须要声明在客户端环境`'use client'`才能使用或者你在根层级就已经声明`'use client'` ### 11.记得给useEffect添加必要的清除函数假设你的需求是显示每秒数字增1,你可能会这样写 ```js import { useEffect, useState } from 'react' export default function Count() { const [count, setCount] = useState(0) useEffect(() => { setInterval(() => { console.log('render...') setCount(count + 1) }, 1000) }, []) return (

{count}

) } ``` 但实际的效果却是 ![Img](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/738e4cb4692e4c2581aaa041d1f0c25d~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1794\&h=836\&s=381643\&e=gif\&f=144\&b=1f1f1f) 其实setInterval有正常工作，只是setCount中的count始终都是初始的0 执行的总是`setCount(0 + 1)` 解决办法是可以监听count变化，那么每次变化都会添加一个定时器，但是添加定时器一定要记得清理！ ```js import { useEffect, useState } from 'react' export default function Count() { const [count, setCount] = useState(0) useEffect(() => { const i = setInterval(() => { console.log('render...') setCount(count + 1) }, 1000) return () => clearInterval(i) }, [count]) return (

{count}

) } ``` ![Img](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c2613dc87c2e4abb8e13a0457d907baa~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2036\&h=774\&s=396763\&e=gif\&f=121\&b=20201f) 当然其实还有之前提到的更简单的办法写成更新函数的形式 ```js useEffect(() => { setInterval(() => { console.log('render...') setCount(prev => prev + 1) }, 1000) }, []) ``` ### 12.useEffect使用fetch 假如这是你最后的需求，用户随机点击切换数据id时，需要展示相应的数据，如果你用fetch可能会这么写 ```js import { useEffect, useState } from 'react' export default function ShowData() { const [id, setId] = useState(1) return (

) } function DataBody({ id }: { id: number }) { const [data, setData] = useState('') useEffect(() => { fetch(`https://dummyjson.com/posts/${id}`) .then(res => res.json()) .then(data => setData(data.body)) }, [id]) return ( <>

{data}

) } ``` ![Img](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cda3e6153155467682ae5f628e95ff1d~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2094\&h=930\&s=1371084\&e=gif\&f=169\&b=fefefe) 大体是完成任务的，但是如果老奸巨猾的测试使劲点刷新还是能发现点bug：每次点击都要重新请求然后渲染上上次点击的数据，但是如果点击过快最终展示是上次点击的数据但是过程中会不断闪现之间的随机的数据解决办法是使用`AbortController`用于管理和中止网络请求，在`fetch`第二个参数添加`signal`属性，将该AbortController 与该请求关联起来以便在需要时能够中止该请求,组件卸载时在清理函数中止请求`controller.abort()` ```tsx function DataBody({ id }: { id: number }) { const [data, setData] = useState('') useEffect(() => { const controller = new AbortController() fetch(`https://dummyjson.com/posts/${id}`, { signal: controller.signal, }) .then(res => res.json()) .then(data => setData(data.body)) .catch(err => console.log(err)) return () => controller.abort() }, [id]) return ( <>

{data}

) } ``` ![Img](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8b74de778eb541a887f55f68717f5eed~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2190\&h=852\&s=873204\&e=gif\&f=169\&b=fdfdfd) 完成任务！！有收获记得点赞收藏哦 \~