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]
}

现在正常了

相关推荐
人生在勤,不索何获-白大侠3 分钟前
day25——HTML & CSS 前端开发
前端·css·html
Running_C10 分钟前
Content-Type的几种类型
前端·面试
前端Hardy10 分钟前
10 分钟搞定婚礼小程序?我用 DeepSeek 把同学的作业卷成了范本!
前端·javascript·微信小程序
Tminihu12 分钟前
前端大文件上传的时候,采用切片上传的方式,如果断网了,应该如何处理
前端·javascript
颜酱14 分钟前
理解vue3中的compiler-core
前端·javascript·vue.js
果粒chenl25 分钟前
06-原型和原型链
前端·javascript·原型模式
谢尔登27 分钟前
【JavaScript】手写 Object.prototype.toString()
前端·javascript·原型模式
蓝倾29 分钟前
小红书获取笔记详情API接口调用操作指南
前端·api·fastapi
浩龙不eMo29 分钟前
设置单行省略号后不生效?你肯定忘记了这几点!
前端·css
李大玄37 分钟前
一个轻量级、无依赖的 Loading 插件 —— @lijixuan/loading
前端·javascript·vue.js