1. 实现 useEffect

本次课程我们来开始实现一下mini-react中的useEffect。我们先来是先最简单的,没有依赖的情况。

在app.js加上useEffect

jsx 复制代码
 React.useEffect(() => {
    console.log('useEffect')
  }, [])

创建函数,先存起来参数

jsx 复制代码
function useEffect(callback, deps) {
    const effctHook = {
        callback,
        deps
    }
}

调用时机

  • 应该在dom的渲染之后,也就是处理完所有的节点之后调用
  • react.js
jsx 复制代码
function commitRoot() {
    deletions.forEach(commitDeletion)
    commitWork(wipRoot.child)
    commitEffectHook()
    currentRoot = wipRoot
    wipRoot = null
    deletions = []
}
​
function commitEffectHook() {
    function run(fiber) {
        if (!fiber) {
            return
        }
        fiber?.effectHook?.callback()
        run(fiber.child)
        run(fiber.sibling)
    }
    run(wipFiber)
}
​
function useEffect(callback, deps) {
    const effectHook = {
        callback,
        deps
    }
    wipFiber.effectHook = effectHook
}
​
const React = {
    render,
    useState,
    useEffect,
    createElement,
    update
}

1.png

增加依赖项count

  • app.jsx
jsx 复制代码
import React from "./core/React.js";
​
function Foo() {
  console.log('fooo')
  const [bar, setBar] = React.useState('bar')
  function handleClick() {
    setBar('bar')
    setCount(c => c + 1)
  }
​
  const [count, setCount] = React.useState(10);
​
  React.useEffect(() => {
    console.log('useEffect')
  }, [count])
​
  return (
    <div>
      {bar}
      {count}
      <button onClick={handleClick}>click</button>
    </div>
  );
}
​
function App() {
  return (
    <div>
      <Foo />
    </div>
  );
}
​
export default App;
  • 更新核心代码react.js
jsx 复制代码
function commitEffectHook() {
    function run(fiber) {
// ...
        if(!fiber.alternate) {
            fiber.effectHook?.callback()
        }else {
            // update
            // deps 有没有发生改变
            const oldEffectHook = fiber.alternate?.effectHook
​
            // some
            const needUpdate = oldEffectHook?.deps.some((oldDep, index) => {
                return oldDep !== fiber.effectHook.deps[index]
            })
​
            needUpdate && fiber.effectHook?.callback()
​
        }
​
// ...
    }
    run(wipFiber)
}

开始实现多个

  • app.jsx
jsx 复制代码
  React.useEffect(() => {
    console.log('init')
  }, [])
​
  React.useEffect(() => {
    console.log('update', count)
  }, [count])
  • react.js
jsx 复制代码
function commitRoot() {
    deletions.forEach(commitDeletion)
    commitWork(wipRoot.child)
    commitEffectHooks()
    currentRoot = wipRoot
    wipRoot = null
    deletions = []
}
​
function commitEffectHooks() {
    function run(fiber) {
        if (!fiber) {
            return
        }
​
        if(!fiber.alternate) {
            fiber?.effectHooks?.forEach((hook) => {
                hook.callback()
            })
        }else {
            // update
            // deps 有没有发生改变
            fiber.effectHooks?.forEach((newHook, index)=> {
                if(newHook.deps.length> 0 ) {
                    const oldEffectHook = fiber.alternate?.effectHooks[index]
​
                    // some
                    const needUpdate = oldEffectHook?.deps.some((oldDep, i) => {
                        return oldDep !== newHook.deps[i]
                    })
​
                    needUpdate && newHook.callback()
                }
            })
        }
​
        run(fiber.child)
        run(fiber.sibling)
    }
    run(wipFiber)
}
​
function updateFunctionComponent(fiber) {
    effectHooks = []
    stateHooks = []
    stateHookIndex = 0
    wipFiber = fiber
    const children = [fiber.type(fiber.props)]
    reconcileChildren(fiber, children)
}
​
let effectHooks
function useEffect(callback, deps) {
    const effectHook = {
        callback,
        deps
    }
    effectHooks.push(effectHook)
    wipFiber.effectHooks = effectHooks
}
相关推荐
lypzcgf19 小时前
Coze源码分析-工作空间-项目开发-前端源码
前端·人工智能·typescript·系统架构·开源软件·react·安全架构
yuguo.im19 小时前
Chrome DevTools Performance 是优化前端性能的瑞士军刀
前端·javascript·性能优化·chrome devtools
FSHOW21 小时前
【独立开发日记】MQ端到端类型安全
前端·javascript·后端
老华带你飞21 小时前
社区互助|基于SSM+vue的社区互助平台的设计与实现(源码+数据库+文档)
java·前端·数据库·vue.js·小程序·毕设·社区互助平台
一支鱼1 天前
前端使用次数最多的工具封装
前端·typescript·编程语言
GIS之路1 天前
GDAL 简介
前端
前端工作日常1 天前
单元测试与E2E测试中使用浏览器的原因及区别
前端·单元测试
Js_cold1 天前
Notepad++使用技巧1
前端·javascript·fpga开发·notepad++
接着奏乐接着舞。1 天前
前端RSA加密遇到Java后端解密失败的问题解决
java·开发语言·前端
dreams_dream1 天前
vue中的与,或,非
前端·javascript·vue.js