commit

demos/v1/main.tsx

@@ -1,25 +1,30 @@
-import React, {useReducer} from 'react'
+import React, {useReducer, useState} from 'react'
 
 import { createRoot } from 'react-dom/client'
 
 
 function counter(state, action) {
+  console.log(state)
   if(action.type === 'add') return state + 1
   return  state
 }
 
 function App() {
-  const [number, setNumber] = useReducer(counter, 0)
+  console.log('APP Render')
+  const [number, setNumber] = useReducer(counter, 10)
+  const [state, setState] = useState(1)
   let attrs = {id: 'btn1'}
   if(number === 1) {
     delete  attrs.id
     attrs.style = {color: 'red'}
   }
   return (
-    <button {...attrs} onClick={() => setNumber({type: 'add'})}>{ number }</button>
+    <button {...attrs} onClick={() => setState((current) => current)}><span>{ state }</span></button>
   )
 }
 
+// <button {...attrs} onClick={() => setNumber({type: 'add'})}><span>{ state }</span></button>
+
 const element = <App />
 
 // const element = <div>111</div>

packages/react-reconciler/src/ReactFiberHooks.ts

@@ -11,14 +11,39 @@ let workInProgressHook:any = null
 let currentHook:any = null
 
 const HooksDispatcherOnMount = {
-  useReducer: mountReducer
+  useReducer: mountReducer,
+  useState: mountState
 }
 
 const HooksDispatcherOnUpdate = {
-  useReducer: updateReducer
+  useReducer: updateReducer,
+  useState: updateState
 }
 
-function updateReducer(reducer: any){
+function baseStateReducer(state:any, action:any) {
+  return typeof action === 'function' ? action(state) : action
+}
+
+function mountState(initialState: any){
+  const hook = mountWorkInProgressHook()
+  hook.memoizedState = initialState
+  const queue:any = {
+    pending: null,
+    dispatch: null,
+    lastRenderedReducer: baseStateReducer, // 上一个 reducer
+    lastRenderedState: initialState // 上一个 state
+  }
+  hook.queue = queue
+
+  const dispatch = (queue.dispatch = dispatchSetState.bind(null, currentlyRenderingFiber, queue))
+  return [hook.memoizedState, dispatch]
+}
+
+function updateState(initialState: any){
+  return updateReducer(baseStateReducer, initialState)
+}
+
+function updateReducer(reducer: any, initialArg:any){
   const hook = updateWorkInProgress()
   const queue = hook.queue
   const current = currentHook
@@ -70,6 +95,24 @@ function dispatchReducerAction(fiber:any, queue:any, action:any){
   // console.log(fiber, queue, action)
 }
 
+function dispatchSetState(fiber: any, queue: any, action:any) {
+  const update:any = {
+    action,
+    hasEagerState: false, // 是否有急切的更新
+    eagerState: null, // 急切的更新状态
+    next: null
+  }
+  const { lastRenderedReducer, lastRenderedState } = queue
+  const eagerState = lastRenderedReducer(lastRenderedState, action)
+  update.hasEagerState = true
+  update.eagerState = eagerState
+  if(Object.is(eagerState, lastRenderedState)) {
+    return
+  }
+  const root = enqueueConcurrentHookUpdate(fiber, queue, update)
+  scheduleUpdateOnFiber(root)
+}
+
 function updateWorkInProgress(){
   if(currentHook ===null) {
     const current = currentlyRenderingFiber.alternate

packages/react/index.ts

@@ -4,5 +4,6 @@ export const createElement = jsx
 
 export {
   __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
-  useReducer
+  useReducer,
+  useState
 } from './src/React'

packages/react/src/React.ts

@@ -1,7 +1,8 @@
-import { useReducer } from "./ReactHooks";
+import { useReducer, useState } from "./ReactHooks";
 import ReactSharedInternals from './ReactSharedInternals';
 
 export {
   ReactSharedInternals as __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
-  useReducer
+  useReducer,
+  useState
 }

packages/react/src/ReactHooks.ts

@@ -7,4 +7,9 @@ function resolveDispatcher(){
 export function useReducer(reducer:any, initialArg:any) {
   const dispatcher = resolveDispatcher()
   return dispatcher.useReducer(reducer, initialArg)
+}
+
+export function useState(initialState: any) {
+  const dispatcher = resolveDispatcher()
+  return dispatcher.useState(initialState)
 }