console
var fiber = {
type: App
}
var isMount = true
var workInProcessHook
function Scheduler() {
workInProcessHook = fiber.memoizedState
isMount = false
res = fiber.type()
}
function Dispatcher(queue, action) {
var update = {
action
}
if (queue.pending) {
update.next = queue.pending.next
queue.pending.next = update
} else {
update.next = update
}
queue.pending = update
Scheduler()
}
function useState(initialValue) {
var hook
var baseState
if (isMount) {
hook = {
memoizedState: initialValue,
queue: {
pending: null
},
next: null
}
if (!fiber.memoizedState) {
fiber.memoizedState = hook
} else {
workInProcessHook.next = hook
}
workInProcessHook = hook
} else {
hook = workInProcessHook
workInProcessHook = workInProcessHook.next
}
if (hook.queue.pending) {
var first = hook.queue.pending.next
var current = first
var action
do {
action = current.action
hook.memoizedState = typeof action === 'function' ? action(hook.memoizedState) : action
current = current.next
} while (current.next !== first)
hook.queue.pending = null
}
return [hook.memoizedState, Dispatcher.bind(null, hook.queue)]
}
var input = document.getElementById('input')
var name = document.getElementById('name')
var btn = document.getElementById('button')
var btn2 = document.getElementById('button2')
function App() {
const [count, setCount] = useState(0)
const [nameValue, setName] = useState('name')
const isFunc = Math.round(Math.random() * 10) % 2 === 0
input.value = count
name.value = nameValue
return {
onCountChange: () => setCount(isFunc ? (n) => n + 1 : Math.round(Math.random() * 100)),
onNameChange: () => setName(Math.random())
}
}
var res = App()
function onCountChange() {
res.onCountChange()
}
function onNameChange() {
res.onNameChange()
}
btn.addEventListener('click', onCountChange)
btn2.addEventListener('click', onNameChange)
<input id='input'/>
<input id='name'/><br/>
<button id='button'>change count</button>
<button id='button2'>change name</button>