网站标题tdk,电商网站建设技术员的工作职责,杭州电子网站建设方案,大连做网站开发的公司摘要
在上一篇文章中#xff0c;我们已经实现了函数组件。同时可以正常通过render进行渲染。
而通过之前的文章#xff0c;beginWork和completeWork也已经有了基本的架子。现在我们可以去实现useState了。
实现之前#xff0c;我们要先修改一下我们的index.js文件#x…摘要
在上一篇文章中我们已经实现了函数组件。同时可以正常通过render进行渲染。
而通过之前的文章beginWork和completeWork也已经有了基本的架子。现在我们可以去实现useState了。
实现之前我们要先修改一下我们的index.js文件
import jsx from ../src/react/jsx.js
import ReactDOM from ../src/react-dom/index
import { useState } from ./react-dom/filberHook.js;const root document.querySelector(#root);function App() {const [name, setName] useState(kusi,key);window.setName setName;const [age, setAge] useState(20)window.setAge setAge;return jsx(div, {ref: 123,children: jsx(span, {children: name age})});
}ReactDOM.createRoot(root).render(App /)由于我们这一篇并不会实现React的事件机制所以我们先将setState的方法挂载在window上进行调试。有了基础我们现在开始实现useState。
1.renderWithHook
在实现之前我们先来思考一个问题。在之前实现beginWork机制的时候我们为了兼容函数组件。获取子FilberNode的时候函数组件是直接调用拿到返回值。 那么如果函数直接调用是不是就已经调用了我们在函数里写的Hook。 所以我们把这一部分拆出来
function updateFunctionComponent(filberNode) {const nextChildren renderWithHook(filberNode);const newFilberNode reconcileChildren(nextChildren);filberNode.child newFilberNode;newFilberNode.return filberNode;beginWork(newFilberNode)
}在更新函数节点的时候通过renderWithHook拿到函数执行的返回值 那我们在renderWithHook里除了拿到函数执行的返回值还要做什么呢
这里值得注意的是我们知道通过setState函数组件会重新执行渲染。在这里我们将函数的执行分为两种第一次mount和后面的update。
就是执行useState这个过程要分为两种一种是mount下的useState一种是update下的useState。OK现在我们用一个标志去表示这两种状态并且在renderWithHook下去改变它。
let hookWithStatus;
let workInPropgressFilber null;export const renderWithHook (filberNode) {if(filberNode.child){//更新hookWithStatus update}else{//mounthookWithStatus mount}workInPropgressFilber filberNode;const nextChildren filberNode.type();return nextChildren;
}2.实现mountState和Hook结构
现在我们在beginWork执行完后会执行renderWithHook执行后会改变hookWithStatus这个标志。再然后就是调用函数本身了。 所以现在我们根据这个标志实现两种不同的useState
export const useState (state) {if(hookWithStatus mount){return mountState(state)}else if(hookWithStatus update){return updateState(state)}
}也就是页面第一次渲染时执行函数组件里的内容我们要调用mountState。现在我们实现mountState。
实现之前我们先说一下在React中是如何将组件中的Hook存储的。在React中是通过链表的方式将不同的Hook存储起来。现在我们定义一下Hook的结构
它具有三个属性。memoizedState表示存储的state值updateQueue表示需要更新的值next表示指向的下一个hook。
class Hook {constructor(memoizedState, updateQueue, next){this.memoizedState memoizedStatethis.updateQueue updateQueuethis.next next;}
}所以在mountStaet中我们要将这个链表结构实现出来 这里我们定义一个headHook指向最外层的hookworkinProgressHook指向当前的hook。
function mountState(state) {const memoizedState typeof state function ? state() : state;const hook new Hook(memoizedState);hook.updateQueue createUpdateQueue()if(workInPropgressHook null){workInPropgressHook hook;headHook hook;}else{workInPropgressHook.next hook;workInPropgressHook hook;}return [memoizedState]
}现在我们可以看一下HOOK的结构 可以看出它是一个链表的结构memoizedState保存的就是setState的初始值。
3.实现dispach更新
现在经过mount阶段后我们已经有了一个基本的Hook链表。现在如果我在window下调用setState那肯定是什么都不会发生的。
所以我们要实现setState方法但是要调用setState方法是一定要更新的所以我们将beginWork中的updateContainer方法修改一下并且暴露出来
function updateContainer(root, element) {const hostRootFilber root.current;const update createUpdate(element);hostRootFilber.updateQueue createUpdateQueue()enqueueUpdate(hostRootFilber.updateQueue, update);wookLoop(root,hostRootFilber)
}export const wookLoop (root,hostRootFilber) {if(!hostRootFilber){hostRootFilber root.current}beginWork(hostRootFilber);completeWork(hostRootFilber);root.finishedWork hostRootFilber;console.log(root)commitWork(root)
}这样我就可以在hook的机制里面调用wookLoop了。现在我们实现dispatch
function disaptchState(filber, hook, action) {const update createUpdate(action);enqueueUpdate(hook.updateQueue, update);workUpdateHook hook;wookLoop(filber.return.stateNode)
}dispatchState方法传入当前的filberNode 还有就是对应的hook以及需要更新的action。 同时我们将准备更新的hook进行标记。
所以在mountState中
function mountState(state) {const memoizedState typeof state function ? state() : state;const hook new Hook(memoizedState);//其他代码。。。const disaptch disaptchState.bind(null,workInPropgressFilber,hook)return [memoizedState,disaptch]
}我们将dispatch需要的参数传进去并且只给外面放开action。这样就实现好了dispatch方法。
4.实现updateState方法
当我们将上面的过程实现完之后如果在控制台调用setState。那么就会触发workLoop同时会再走一次beginWork。 此时再进入renderWithHook之后就不会再走mountState了而是进入updateState。
而在updateState中我们要做的事情也不是很复杂只需要从头遍历Hook链表如果是标记更新的Hook就返回更新的内容。如果不是就正常返回它的memoizedState就好了。
function updateState(state) {if(currentHook workUpdateHook){const newHook new Hook(workUpdateHook.updateQueue.shared.pending.action)newHook.updateQueue createUpdateQueue();const disaptch disaptchState.bind(null,workInPropgressFilber,newHook)currentHook currentHook.next;const result [workUpdateHook.updateQueue.shared.pending.action,disaptch];return result;}else{let result currentHook.memoizedState;const disaptch disaptchState.bind(null,workInPropgressFilber,currentHook)currentHook currentHook.next;return [result,disaptch]}
}所以这也是为什么在React中不能在条件语句里面使用Hook如果你mountState生成的Hook链表会发生变化。那么在updateState里面遍历链表的时候就会出现值错位的情况。
OK到这里useState的方法也已经实现完了。
