React中useEffect原理的代码简单实现详解

let prevDepsAry = []; // 存放依赖项数组的上一次值
let effectIndex = 0; // 当前副作用索引

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

  // 不提供依赖项数组的情况下，默认每次渲染都执行callback
  if (typeof depsAry === 'undefined') {
    callback();
  } else {
    // 校验depsAry是否为数组
    if (Object.prototype.toString.call(depsAry) !== '[object Array]') {
      throw new Error('useEffect的第二个参数必须是数组');
    }

    // 获取依赖项数组的前一个值
    let prevDeps = prevDepsAry[effectIndex];

    // 比较依赖项数组的每一个值，确定是否发生变化
    let hasChanged = prevDeps ? !depsAry.every((dep, index) => dep === prevDeps[index]) : true;

    // 如果依赖项变化或者是首次渲染(hasChanged为true)，则执行callback
    if (hasChanged) {
      callback();
    }

    // 将当前的依赖项数组存储起来，用于下次渲染时比较
    prevDepsAry[effectIndex] = depsAry;
  }

  // 增加副作用索引，准备下一个副作用
  effectIndex++;
}

function render() {
  // 重设副作用索引
  effectIndex = 0;
  // 使用ReactDOM来渲染App组件
  ReactDOM.render(<App />, document.getElementById('root'));
}

function App() {
  // 使用自定义的useState和useEffect

  useEffect(() => {
    console.log('副作用函数执行了');
    // 在这里可能会执行如API请求、订阅事件等具有副作用的操作
    // 当依赖项发生变化时，这里的代码会被执行
  }, [/* 依赖项数组 */]);

  return (
    // 组件的JSX结构
    <div></div>
  );
}