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

现在正常了

相关推荐
像风一样自由20201 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem2 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊2 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术2 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing2 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止3 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall3 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴3 小时前
简单入门Python装饰器
前端·python
袁煦丞4 小时前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作
天天扭码4 小时前
从图片到语音:我是如何用两大模型API打造沉浸式英语学习工具的
前端·人工智能·github