useEffect钩子实现原理-一一网

useEffect这个钩子函数是用来模拟生命周期函数的。调用这个函数的时候他的第一个参数必须是一个函数，第二个参数可以不传也可以传递一个数组，当不传递的时候组件当中任何一个数据发生变化的时候useEffect这个钩子函数每次都会执行，当传递第二个参数数组的时候，数组中定义状态数据，当状态数据改变的时候再执行。

useEffect(() => {

})
复制代码

我们先来定义一下这个函数，这个函数接收两个参数。回调函数和依赖数组。

我们首先要判断callback是不是函数，如果不是函数直接报错就可以了。

function useEffect(callback, depsAry) {
    // 判断callback是否是函数
    if (Object.prototype.toString.call(callback) !== '[object Function]') {
        throw new Error('useEffect 函数的第一个参数必须是函数');
    }
}
复制代码

接着需要判断depsAry是否传递，如果没有传递直接调用回调函数就可以了。

// 判断depsAry有没有传递
if (typeof depsAry === 'undefined') {
    callback();
}
复制代码

如果depsAry传递了，我们需要判断是否是一个数组，如果不是就抛错。

// 判断depsAry有没有传递
if (typeof depsAry === 'undefined') {
    callback();
} else {
    // 判断是否是数组
    if (Object.prototype.toString.call(depsAry) !== '[object Array]') {
        throw new Error('useEffect 函数的第二个参数必须是数组');
    }
}
复制代码

如果传递的是一个数组，我们需要拿当前的依赖值和上一次的依赖值做对比，如果有变化就执行callback。

// 存储上一次的依赖值
let preDepsAry = [];
// 判断是否是数组
if (Object.prototype.toString.call(depsAry) !== '[object Array]') {
    throw new Error('useEffect 函数的第二个参数必须是数组');
} else {
    // 将当前的依赖值和上一次的依赖值做对比， every如果返回true就是没变化，如果false就是有变化
    const hasChanged = depsAry.every((dep, index) => dep === preDepsAry[index]) === false;
    // 值如果有变化
    if (hasChanged) {
        callback();
    }
    // 同步依赖值
    preDepsAry = depsAry;
}

复制代码

现在基本就写完了, 但是我们知道useEffect是可以多次调用的，我们这里存储的上一次的值只是最后一次的值，并不是每一次的。我们将preDepsAry变为一个二维数组，在数组中的每一个数组存储对应的depsAry。

这里我们同样会用到索引。

const preDepsAry = [];
let effectIndex = 0;
复制代码

当我们对比的时候就不能直接使用preDepsAry对比了，需要做一些变化。

if (Object.prototype.toString.call(depsAry) !== '[object Array]') {
    throw new Error('useEffect 函数的第二个参数必须是数组');
} else {
    // 获取上一次的状态值
    const prevDeps = preDepsAry[effectIndex];
    // 如果存在就去做对比，如果不存在就是第一次执行
    // // 将当前的依赖值和上一次的依赖值做对比， every如果返回true就是没变化，如果false就是有变化
    const hasChanged = prevDeps ? depsAry.every((dep, index) => dep === prevDeps[index]) === false : true;
    // 值如果有变化
    if (hasChanged) {
        callback();
    }
    // 同步依赖值
    preDepsAry[effectIndex] = depsAry;
}
复制代码

多次调用的时候需要让effectIndex加1

// 同步依赖值
preDepsAry[effectIndex] = depsAry;
effectIndex++;
复制代码

这里我们不能让effectIndex一直加，需要在组件重新渲染的时候恢复成0，之前的render函数中归零就可以了。

function render() {
    stateIndex = 0;
    effectIndex = 0;
    ReactDOM.render(<App />, document.getElementById('root'));
}
复制代码

这样我们就写完了。逻辑还是比较简单的。

// 重新渲染函数
function render() {
    stateIndex = 0;
    effectIndex = 0;
    ReactDOM.render(<App />, document.getElementById('root'));
}

// 存储上一次的依赖值
const preDepsAry = [];
let effectIndex = 0;
function useEffect(callback, depsAry) {
    // 判断callback是否是函数
    if (Object.prototype.toString.call(depsAry) !== '[object Array]') {
        throw new Error('useEffect 函数的第二个参数必须是数组');
    } else {
        // 获取上一次的状态值
        const prevDeps = preDepsAry[effectIndex];
        // 如果存在就去做对比，如果不存在就是第一次执行
        // // 将当前的依赖值和上一次的依赖值做对比， every如果返回true就是没变化，如果false就是有变化
        const hasChanged = prevDeps ? depsAry.every((dep, index) => dep === prevDeps[index]) === false : true;
        // 值如果有变化
        if (hasChanged) {
            callback();
        }
        // 同步依赖值
        preDepsAry[effectIndex] = depsAry;
        // 累加
        effectIndex++;
    }
}
复制代码