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>
)
}
运行结果