1 State Hook

• 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) // 第一次点击：打印1
    return (
        <>
            <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
});