手写useState与useEffect
与是驱动运行的基础，用于管理状态，用以处理副作用，通过手写简单的与来理解其运行原理。
useState
一个简单的的使用如下。
// App.tsx
import { useState } from "react";
import "./styles.css";
export default function App() {
const [count, setCount] = useState(0);
console.log("refresh");
const addCount = () => setCount(count + 1);
return (
<>
<div>{count}</div>
<button onClick={addCount}>Count++</button>
</>
);
}当页面在首次渲染时会渲染函数组件，其实际上是调用方法，得到虚拟元素，并将其渲染到浏览器页面上，当用户点击按钮时会调用方法，然后再进行一次渲染函数组件，其实际上还是调用了方法，得到一个新的虚拟元素，然后会执行算法，将改变的部分更新到浏览器的页面上。也就是说，实际上每次都会重新执行这个函数，这个可以通过那一行看到效果，每次点击按钮控制台都会打印。
那么问题来了，页面首次渲染和进行操作，都会调用函数去执行这行代码，那它是怎么做到在操作后，第二次渲染时执行同样的代码，却不对变量进行初始化也就是一直为，而是拿到的最新值。
考虑到上边这个问题，我们可以简单实现一个函数，上边在为什么称为这个问题上提到了可以勾过来一个函数作用域的问题，那么我们也完全可以实现一个去勾过来一个作用域，简单来说就是在里边保存一个变量，也就是一个闭包里边保存了这个变量，然后这个变量保存了上次的值，再次调用的时候直接取出这个之前保存的值即可，。
// index.tsx
import { render } from "react-dom";
import App from "./App";
// 改造一下让其导出 让我们能够强行刷新`<App />`
export const forceRefresh = () => {
console.log("Force fresh <App />");
const rootElement = document.getElementById("root");
render(<App />, rootElement);
};
forceRefresh();// use-my-state-version-1.ts
import { forceRefresh } from "./index";
let saveState: any = null;
export function useMyState<T>(state: T): [T, (newState: T) => void] {
saveState = saveState || state;
const rtnState: T = saveState;
const setState = (newState: T): void => {
saveState = newState;
forceRefresh();
};
return [rtnState, setState];
}// App.tsx
import { useMyState } from "./use-my-state-version-1";
import "./styles.css";
export default function App() {
const [count, setCount] = useMyState(0);
console.log("refresh");
const addCount = () => setCount(count + 1);
return (
<>
<div>{count}</div>
<button onClick={addCount}>Count++</button>
</>
);
}可以在中看到现在已经可以实现点击按钮进行操作了，而不是无论怎么点击都是，但是上边的情况太过于简单，因为只有一个，如果使用多个变量，那就需要调用两次，我们就需要对其进行一下改进了，不然会造成多个变量存在一个中，这样会产生冲突覆盖的问题，改进思路有两种:把做成一个对象，比如，这种方式不太符合需求，因为在使用的时候只会传递一个初始值参数，不会传递名称; 把做成一个数组，比如。实际上中是通过类似单链表的形式来代替数组的，通过按顺序串联所有的，使用数组也是一种类似的操作，因为两者都依赖于定义的顺序，。
// index.tsx
import { render } from "react-dom";
import App from "./App";
// 改造一下让其导出 让我们能够强行刷新`<App />`
export const forceRefresh = () => {
console.log("Force fresh <App />");
const rootElement = document.getElementById("root");
render(<App />, rootElement);
};
forceRefresh();// use-my-state-version-2.ts
import { forceRefresh } from "./index";
let saveState: any[] = [];
let index: number = 0;
export function useMyState<T>(state: T): [T, (newState: T) => void] {
const curIndex = index;
index++;
saveState[curIndex] = saveState[curIndex] || state;
const rtnState: T = saveState[curIndex];
const setState = (newState: T): void => {
saveState[curIndex] = newState;
index = 0; // 必须在渲染前后将`index`值重置为`0` 不然就无法借助调用顺序确定`Hooks`了
forceRefresh();
};
return [rtnState, setState];
}// App.tsx
import { useMyState } from "./use-my-state-version-2";
import "./styles.css";
export default function App() {
const [count1, setCount1] = useMyState(0);
const [count2, setCount2] = useMyState(0);
console.log("refresh");
const addCount1 = () => setCount1(count1 + 1);
const addCount2 = () => setCount2(count2 + 1);
return (
<>
<div>{count1}</div>
<button onClick={addCount1}>Count1++</button>
<div>{count2}</div>
<button onClick={addCount2}>Count2++</button>
</>
);
}可以看到已经可以实现在多个下的独立的状态更新了，那么问题又又来了，用了和，那其他组件用什么，也就是说多个组件如果解决每个组件独立的作用域，解决办法每个组件都创建一个和，但是几个组件在一个文件中又会导致、冲突。解决办法放在组件对应的虚拟节点对象上，采用的也是这种方案，将和变量放在组件对应的虚拟节点对象上，在中具体实现叫做，实际上中是通过类似单链表的形式来代替数组的，通过按顺序串联所有的。
可以看出是强依赖于定义的顺序的，数组中保存的顺序非常重要在执行函数组件的时候可以通过下标的自增获取对应的值，由于是通过顺序获取的，这将会强制要求你不允许更改的顺序，例如使用条件判断是否执行这样会导致按顺序获取到的值与预期的值不同，这个问题也出现在了自己身上，因此是不允许你使用条件判断去控制函数组件中的的顺序的，这会导致获取到的值混乱，类似于下边的代码则会抛出异常。
const App = () => {
let state;
if(true){
[state, setState] = React.useState(0);
}
return (
<div>{state}</div>
)
}
<!-- React Hook "React.useState" is called conditionally. React Hooks must be called in the exact same order in every component render react-hooks/rules-of-hooks-->这里当然只是对于的简单实现，对于真正的实现可以参考，当前的版本是，也可以简略看一下相关的。
type Hooks = {
memoizedState: any, // 指向当前渲染节点`Fiber` 上一次完整更新之后的最终状态值
baseState: any, // 初始化`initialState` 已经每次`dispatch`之后`newState`
baseUpdate: Update<any> | null, // 当前需要更新的`Update` 每次更新完之后会赋值上一个`update` 方便`react`在渲染错误的边缘数据回溯
queue: UpdateQueue<any> | null, // 缓存的更新队列 存储多次更新行为
next: Hook | null, // `link`到下一个`hooks` 通过`next`串联所有`hooks`
}useEffect
一个简单的的使用如下。
import { useEffect, useState } from "react";
import "./styles.css";
export default function App() {
const [count1, setCount1] = useState(0);
const [count2, setCount2] = useState(0);
console.log("refresh");
const addCount1 = () => setCount1(count1 + 1);
const addCount2 = () => setCount2(count2 + 1);
useEffect(() => {
console.log("count1 -> effect", count1);
}, [count1]);
return (
<>
<div>{count1}</div>
<button onClick={addCount1}>Count1++</button>
<div>{count2}</div>
<button onClick={addCount2}>Count2++</button>
</>
);
}同样，每次都会重新执行这个函数，每次点击按钮控制台都会打印，在这里还通过变动的副作用来打印了，而点击却不会处罚副作用的打印，原因明显是我们只指定了的副作用，由此可见可以通过来实现更细粒度的副作用处理。
在这里我们依旧延续上边的实现思路，将之前的数据存储起来，之后当函数执行的时候我们对比这其中的数据是否发生了变动，如果发生了变动，那么我们便执行该函数，当然我们还需要完成副作用清除的功能，。
// use-my-effect.ts
const dependencyList: unknown[][] = [];
const clearCallbacks: (void | (() => void))[] = [];
let index: number = 0;
export function useMyEffect(
callback: () => void | (() => void),
deps: unknown[]
): void {
const curIndex = index;
index++;
const lastDeps = dependencyList[curIndex];
const changed =
!lastDeps || !deps || deps.some((dep, i) => dep !== lastDeps[i]);
if (changed) {
dependencyList[curIndex] = deps;
const clearCallback = clearCallbacks[curIndex];
if (clearCallback) clearCallback();
clearCallbacks[curIndex] = callback();
}
}
export function clearEffectIndex() {
index = 0;
}// App.tsx
import { useState } from "react";
import { useMyEffect, clearEffectIndex } from "./use-my-effect";
import "./styles.css";
export default function App() {
const [count1, setCount1] = useState(0);
const [count2, setCount2] = useState(0);
console.log("refresh");
const addCount1 = () => setCount1(count1 + 1);
const addCount2 = () => setCount2(count2 + 1);
useMyEffect(() => {
console.log("count1 -> effect", count1);
console.log("setTimeout", count1);
return () => console.log("clear setTimeout", count1);
}, [count1]);
useMyEffect(() => {
console.log("count2 -> effect", count2);
}, [count2]);
clearEffectIndex();
return (
<>
<div>{count1}</div>
<button onClick={addCount1}>Count1++</button>
<div>{count2}</div>
<button onClick={addCount2}>Count2++</button>
</>
);
}通过上边的实现，我们也可以通过将依赖与副作用清除函数存起来的方式，来实现，通过对比上一次传递的依赖值与当前传递的依赖值是否相同，来决定是否执行传递过来的函数，在这里由于我们无法得知这个组件函数是在什么时候完成最后一个，我们就需要手动来赋值这个标记的为。当然在之中同样也是将挂载到了上来实现的，并且将所需要的依赖值存储在当前的的中，通过实现的链表以及判断初次加载来实现了通过按顺序串联所有的，这样也就能知道究竟哪个是最后一个了，另外同样也是强依赖于定义的顺序的，能够让对齐多次执行组件函数时的依赖。
自定义Hooks
我在初学的时候一直有一个疑问，对于的使用与普通的函数调用区别究竟在哪里，当时我还对知乎的某个问题强答了一番。
以我学了几天的理解，自定义跟普通函数区别在于:
只应该在函数组件内调用，而不应该在普通函数调用。
能够调用诸如、、等，普通函数则不能。
由此觉得就像，是在组件之间共享有状态和副作用的方式，所以应该是应该在函数组件中用到的与组件生命周期等相关的函数才能称为，而不仅仅是普通的函数。
对于第一个问题，如果将其声明为但是并没有起到作为Hooks的功能，那么私认为不能称为，为避免混淆，还是建议在调用其他的时候再使用标识。当然，诸如自己实现一个功能这种虽然并没有调用其他的，但是他与函数组件的功能强相关，肯定是属于的。
对于第二个问题的话，其实必须使用开头并不是一个语法或者一个强制性的方案，以开头其实更像是一个约定，就像是请求约定语义不携带一样，其主要目的还是为了约束语法，如果你自己实现一个类似简单功能的话，就会了解到为什么不能够出现类似于这样的代码了，文档中明确说明了使用的规则，使用开头的目的就是让识别出来这是个，从而检查这些规则约束，通常也会使用配合检查这些规则。
后来对于这个问题有了新的理解，如果定义一个真正的自定义的话，那么通常都会需要使用、等，就相当于自定义是由官方的组合而成的，而通过官方的这些来组合的话，就可以实现将数据挂载到节点上，也就是上边的实现提到的实际都是在中的，而自行实现的函数例如上边的实现，是无法做到这一点的。也就是说我们通过自定义是通过来组合官方以及自己的逻辑来实现的对于节点内的一些状态或者其他方面的逻辑封装，而使用普通函数且采用类似于的语法的话则只能实现在全局的状态和逻辑的封装，简单来说就是提供了接口来让我们可以在节点上做逻辑的封装。
有一个简单的例子，例如我们要封装一个来避免在函数组件在第一次挂载的时候就执行，在这里我们就应该采用或者是而不是仅仅定义一个变量来存储状态值，。
// use-update-effect-ref.ts
import { DependencyList, EffectCallback, useEffect, useRef } from "react";
export const useUpdateEffect = (
effect: EffectCallback,
deps?: DependencyList
) => {
const isMounted = useRef(false);
useEffect(() => {
if (!isMounted.current) {
isMounted.current = true;
} else {
return effect();
}
}, deps);
};// use-update-effect-var.ts
import { DependencyList, EffectCallback, useEffect } from "react";
let isMounted = false;
export const useUpdateEffect = (
effect: EffectCallback,
deps?: DependencyList
) => {
useEffect(() => {
if (!isMounted) {
isMounted = true;
} else {
return effect();
}
}, deps);
};// App.tsx
import { useState, useEffect } from "react";
import { useUpdateEffect } from "./use-update-effect-ref";
// import { useUpdateEffect } from "./use-update-effect-var";
import "./styles.css";
export default function App() {
const [count1, setCount1] = useState(0);
const [count2, setCount2] = useState(0);
const addCount1 = () => setCount1(count1 + 1);
const addCount2 = () => setCount2(count2 + 1);
useUpdateEffect(() => {
console.log("count1 -> effect", count1);
}, [count1]);
useUpdateEffect(() => {
console.log("count2 -> effect", count2);
}, [count2]);
return (
<>
<div>{count1}</div>
<button onClick={addCount1}>Count1++</button>
<div>{count2}</div>
<button onClick={addCount2}>Count2++</button>
</>
);
}当我们切换与的时，我们会发现当刷新页面时使用将不会有值打印，而则会打印，而在点击或者的效果都是正常的，说明是能够我们想要的功能，而却因为变量值共享的问题而无法正确实现功能，当然我们也可以通过类似于数组的方式来解决这个问题，但是再具体到各个组件之间的共享上面，我们就无法在在类似于语法的基础上来实现了，必须手动注册一个闭包来完成类似的功能，而且类似于在时刷新本组件以及子组件的方式，就必须借助来实现了。
每日一题
https://github.com/WindrunnerMax/EveryDay