• Hook，使用在函數(shù)組件中
• 不要在循環(huán)，條件或嵌套函數(shù)中(if、switch、for)調(diào)用 Hook
  

1. 函數(shù)指向相同的引用

• 更新方式：函數(shù)組件中state變化時才重新渲染（React使用Object.is比較算法來比較state）；
• 而類組件每次都會更新

2.強(qiáng)制刷新

• 函數(shù)組件

import { useState } from 'react' window.arr = [] // create react app是基于webpack（模塊化打包工具），如果用var聲明arr，arr只是在當(dāng)前文件夾，并不是在全局 // 要想在全局訪問arr需要添加到window上 export default function App(props) {const [, setCount] = useState({});window.arr.push(setCount)console.log('全局的arr', window.arr)return (<><button onClick={() => setCount({})}>click</button></>) }

• 類組件中，this.setState傳任何值都會刷新組件
• 類組件中可以用this.forceUpdate()強(qiáng)制刷新，不會經(jīng)過shouldComponentUpdate生命周期
  

3. 函數(shù)更新和不同的返回值的更新

import { useState } from 'react' window.arr = [] // create react app是基于webpack（模塊化打包工具），如果用var聲明arr，arr只是在當(dāng)前文件夾，并不是在全局 // 要想在全局訪問arr需要添加到window上 export default function App(props) {const [count, setCount] = useState(+0);window.arr.push(setCount)console.log('全局的arr', window.arr)const onClick = () => {setCount(count + 1)console.log('初始狀態(tài)', count) // 第一次點擊：打印0（上一次的值而不是最新的返回值）setCount(count + 1) // 因此，即使在這里執(zhí)行多次，更新后count都為1}console.log('最新狀態(tài)', count) // 第一次點擊：打印1return (<><h1>{count}</h1><button onClick={onClick}>click</button></>) }

import { useState } from 'react' export default function App(props) {const [count, setCount] = useState(+0);const onClick = () => {setCount(count => count + 1) // 閉包，用最新的count進(jìn)行更新setCount(count => count + 1)console.log('初始狀態(tài)', count) // 第一次點擊：打印0（上一次的值而不是最新的返回值）}console.log('最新狀態(tài)', count) // 第一次點擊：打印2 (點擊時遞增了2次)return (<><h1>{count}</h1><button onClick={onClick}>click</button></>) }

4. setCount是會合并的

• 多個setCount則執(zhí)行多次，但最終只render一次
• 類組件：返回值合并（state的多個屬性合并），函數(shù)組件中不會合并，直接用setCount的參數(shù)更新了

import { useState } from 'react' export default function App(props) {const [count, setCount] = useState({ num1: 1 });const onClick = () => {setCount({ new: 2 })}console.log('更新后', count)return (<><h1>{count.num1}</h1><button onClick={onClick}>click</button></>) }

5. 惰性初始化

initialState參數(shù)只會在組件的初始渲染中起作用，后續(xù)渲染時會被忽略。

const [count, setCount] = useState(() => {console.log(1); // 惰性初始化，只會打印一次return 1 });

總結(jié)

以上是生活随笔為你收集整理的1 State Hook的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。