Tips

为什么说state是一个快照
state 什么时候以及为什么会更新?更新机制是什么?
事件处理函数如何接入一个快照

Keywords

请求渲染

Center Paragraph

触发渲染事件

• onSubmit 事件函数执行,setIsSent(true)排队一次新的渲染.
• UI snapshot 是动态的. State 作为组件的记忆,不会像其他常规变量一样,在函数返回后消失. state 实际上存活在React自身,独立于函数之外.当React 执行函数,它会给到当前render的state

Remember

• 在一次渲染过程中,state 变量是不会改变的,即使事件处理函数代码是异步的.
• 如果你想在一次re-render之前读取最新的代码.可以使用state updater function
• React 不会跨事件处理进行批量处理state

Additional

no magic, just array!考虑两件事情:第一件是: 如何处理组件多次使用useState;另外一件是,如何处理后续setState

const state=[]
const setter = []
let cursor = 0; // 处理一个函数中多次调用useState
let firstRun = true// 针对同一个state,是否是首次执行setState
function createSetter(cursor){
    return function setterWithCursor(newVal){
        state[cursor] = newVal
    }
}
const function useState(initial){
    if(firstRun){
        state.push(initial)
        setters.push(createSetter(cursor))
        firstRun=false
    }
    const setter = setters[cursor]
    const value = state[cursor]
    cursor++
    return [value,setter]
}