• Hook，使用在函數組件中
• 不要在循環，條件或嵌套函數中(if、switch、for)調用 Hook
  

1. 函數指向相同的引用

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

2.強制刷新

• 函數組件

import { useState } from 'react'
window.arr = []
// create react app是基于webpack（模塊化打包工具），如果用var聲明arr，arr只是在當前文件夾，并不是在全局
// 要想在全局訪問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()強制刷新，不會經過shouldComponentUpdate生命周期
  

3. 函數更新和不同的返回值的更新

import { useState } from 'react'
window.arr = []
// create react app是基于webpack（模塊化打包工具），如果用var聲明arr，arr只是在當前文件夾，并不是在全局
// 要想在全局訪問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('初始狀態', count) // 第一次點擊：打印0（上一次的值而不是最新的返回值）setCount(count + 1) // 因此，即使在這里執行多次，更新后count都為1}console.log('最新狀態', 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進行更新setCount(count => count + 1)console.log('初始狀態', count) // 第一次點擊：打印0（上一次的值而不是最新的返回值）}console.log('最新狀態', count) // 第一次點擊：打印2 (點擊時遞增了2次)return (<><h1>{count}</h1><button onClick={onClick}>click</button></>)
}

4. setCount是會合并的

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

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參數只會在組件的初始渲染中起作用，后續渲染時會被忽略。

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