前端学习笔记202309学习笔记第九十一天-闭包30

const root = ReactDOM.createRoot(document.querySelector('#app'));
root.render(<App />)
const MyReact = (() => {
    const state=[]
    const stateSetters=[]

    let stateIndex=0
    function createState(initialState,index){
        return state[index]?state[index]:initialState
    }
    function createStateSetter(index){
        return function(newState){
            if(typeof newState==='function'){
                state[index]=newState(state[index])
            }else{
                state[index]=newState
            }
            render()
        }
    }
    function useState(initialState){
        state[stateIndex]=createState(initialState,stateIndex)
        if(!stateSetters[stateIndex]){
            stateSetters.push(createStateSetter(stateIndex))
        }
        const _state=state[stateIndex]
        const _setState=stateSetters[stateIndex]
        stateIndex++
        
        return [_state,_setState]
    }
    console.log(state,stateSetters)
    // function useState(initialState) {
    //     _state = _state === undefined ? initialState : _state
    //     const _setState = function (newState) {
    //         if(typeof newState==='function'){
    //             _state=newState(_state)
    //         }else{
    //             _state = newState
    //         }
           
    //         render()
           
    //     }
    //     return [_state, _setState]

    // }
    
    return{
        useState
    }
    function render() {
        stateIndex=0
        root.render(<App />)
    }

   
})()

const { useState } = MyReact

function App() {
    const [title, setTitle] = useState("this is a title")
    const [content, setContent] = useState("this is a content")
    return (
        <div>
            <h1>{title}</h1>
            <button onClick={() => setTitle("这是标题")}>set title</button>
            <p>{content}</p>
            <button onClick={() => setContent("这是内容")}>set content</button>
        </div>
    )
}

运行结果