react-hooks之useState

前言

这是我学习拉钩web教育的相关笔记,掘金真是一个好地方

什么是useState

1. 用来增强react函数组件，使其获得状态的hooks。
2. 该hook可以创建并保存数据，可以多次创建不同数据
3. 该hook接受一个initalState作为初始值返回一个数组，数组中包含当前状态和修改状态的函数
4. 还支持传递一个函数，该函数接受一个当前state的值，需要返回一个值用来表示当前存储的最终值

用法

这里创建了一个函数组件，该函数组件使用usestate创建了一个count变量，通过点击button按钮触发setCount，每次修改count的数据+1

import { useState } from "react"
function App(props) {
    const [ count, setCount ] = useState(0)
    const [ name, setName ] = useState(() => props.name) // 可以通过传递一个函数
    return <>
        <div>{ count }</div>
        <button onClick={() => {setCount(count + 1)}}>+1</button>
        {/* 也可以通过setName 中传递一个回调函数 */}
        <button onClick={() => {setName((prev) => prev + 1)}>+1</button>
    </> 
}

注意点

1. 该hook表现为异步，在同步代码中表现为异步，在异步代码中表现为同步，可谓是变化多端，举止诡异，原因：据说是有个批处理，我也不知道咋回事，反正最后一次处理
2. 每次组件更新的时候，该返回值不会更新
3. 如果一定要在setState后获取最新值，可以使用useEffect设置关联或者传递一个函数，该函数的参数为最新值

基本实现

为什么就实现这么点，因为老师就教了这么点😅😅

import ReactDOM from "react-dom"
function render() {
    stateIndex = 0 // 重新设置stateIndex的状态
    ReactDOM.render(<App/>, document.querySelector("#root"))
}
// 通过闭包来实现
let state = []
// 保存set函数容器
let setters = []
let stateIndex = 0

// 通过闭包来创建set函数
function createSetter(index) {
    return function (newState) {
        state[index] = newState
        render()
    }
}

function useState(initalState) {
    // 判断是否存在值，没有的话用传递的值
    state[stateIndex] = state[stateIndex] ?? initalState 
    // 每次创建的时候需要创建一个set函数
    setters.push(createSetter(stateIndex))
    let value = state[stateIndex]
    let setter = setters[stateIndex]
    stateIndex++ // 需要累加index 这样可以多次创建usestate
    return [ value, setter ] // 返回值
}
export default useState

结尾

后期再补充，嘻嘻