6-1. 实现 useState

本次课程我们来实现我们mini react项目中的useState.

期望实现的效果

  • app.js
tsx 复制代码
import React from "./core/React.js";
​
function Foo() {
  const [count, setCount] = React.useState(10)
  function handleClick() {
    setCount((prevCount) => prevCount + 1)
  }
​
  return (
    <div>
      <h1>foo</h1>
      {count}
      <button onClick={handleClick}>click</button>
    </div>
  );
}
function Bar() {
  const [count, setCount] = React.useState(10)
  function handleClick() {
    setCount((prevCount) => prevCount + 1)
  }
​
  return (
    <div>
      <h1>bar</h1>
      {count}
      <button onClick={handleClick}>click</button>
    </div>
  );
}
​
function App() {
  return (
    <div>
      <Foo></Foo>
    </div>
  );
}
​
export default App;

能正常展示出数据

tsx 复制代码
function useState(initial) {
    const stateHook = {
        state: initial
    }
    
    function setState(action) {
        stateHook.state = action
    }
    return [stateHook.state, setState]
}
​
​
const React = {
    render,
    useState,
    createElement,
    update
}

实现数据的修改

tsx 复制代码
function useState(initial) {
    let currentFiber = wipFiber;
    const oldHook = currentFiber.alternate?.stateHook
​
    const stateHook = {
        state: oldHook?.state || initial
    }
    
    currentFiber.stateHook = stateHook
​
    function setState(action) {
        stateHook.state = action(stateHook.state)
        wipRoot = {
            ...currentFiber,
            alternate: currentFiber
        }
        nextWorkOfUnit = wipRoot
    }
    return [stateHook.state, setState]
}
​

实现多个hooks的情况

  • app.js
tsx 复制代码
import React from "./core/React.js";
​
function Foo() {
  const [count, setCount] = React.useState(10)
  const [bar, setBar] = React.useState('bar')
  function handleClick() {
    setCount((prevCount) => prevCount + 1)
    setBar((prevBar) => prevBar + 'bar')
  }
​
  return (
    <div>
      {count}
      {bar}
      <button onClick={handleClick}>click</button>
    </div>
  );
}
function Bar() {
  const [count, setCount] = React.useState(10)
  function handleClick() {
    setCount((prevCount) => prevCount + 1)
  }
​
  return (
    <div>
      <h1>bar</h1>
      {count}
      <button onClick={handleClick}>click</button>
    </div>
  );
}
​
function App() {
  return (
    <div>
      <Foo></Foo>
    </div>
  );
}
​
export default App;

现在出现问题,这是因为现在就用了一个Hook

改成数组

tsx 复制代码
function updateFunctionComponent(fiber) {
    stateHooks = []
    stateHookIndex = 0
    wipFiber = fiber
    const children = [fiber.type(fiber.props)]
    reconcileChildren(fiber, children)
}
​
let stateHooks
let stateHookIndex
function useState(initial) {
    let currentFiber = wipFiber;
    const oldHook = currentFiber.alternate?.stateHooks[stateHookIndex]
​
    const stateHook = {
        state: oldHook ? oldHook.state : initial
    }
​
    stateHookIndex++
    stateHooks.push(stateHook)
​
    currentFiber.stateHooks = stateHooks
​
    function setState(action) { 
        stateHook.state = action(stateHook.state)
        wipRoot = {
            ...currentFiber,
            alternate: currentFiber
        }
        nextWorkOfUnit = wipRoot
    }
    return [stateHook.state, setState]
}

现在正常了

相关推荐
迪丽热爱1 分钟前
解决【npm : 无法加载文件 C:\Program Files\nodejs\npm.ps1,因为在此系统上禁止运行脚本。】问题
前端·npm·node.js
数字冰雹10 分钟前
图观 流渲染场景服务器
服务器·前端·数据库·数据可视化
李明卫杭州16 分钟前
详细讲解js中的ResizeObserver
前端·javascript
千叶寻-34 分钟前
package.json详解
前端·vue.js·react.js·webpack·前端框架·node.js·json
zz-zjx1 小时前
Web接入层的“铁三角”---防盗链、反向代理,负载均衡(nginx)
前端·nginx·负载均衡
C+ 安口木1 小时前
CSS通用优惠券样式
前端·css
小趴菜82271 小时前
安卓人机验证View
android·java·前端
闲人编程2 小时前
2025年,如何选择Python Web框架:Django, Flask还是FastAPI?
前端·后端·python·django·flask·fastapi·web
光影少年2 小时前
react打包优化和配置优化都有哪些?
前端·react.js·掘金·金石计划
Aoda2 小时前
企业级项目结构设计的思考与实践 —— 以 PawHaven 为例
前端·架构