import { useQuery } from '@tanstack/react-query'

function App() {
    // 具体获取数据的函数
    const getUserInfo = async () => {
        const data = await axios('/api/useInfo')
        return data
    }

    // 订阅一个查询
    const userInfo = useQuery({
        queryKey: ['useData'],
        queryFn: getUserInfo 
    })
}

//  接上面例子

const { isLoading, isError, isSuccess, data, error, status } = useQuery({
    queryKey: ['useData'],
    queryFn: getUserInfo 
})

import { useQuery } from '@tanstack/react-query'

function App() {
    // 具体获取数据的函数
    const getUserInfo = async () => {
        const data = await axios('/api/useInfo')
        return data
    }

    // 订阅一个查询
    const { isLoading, isError, isSuccess, data, error, status } = useQuery({
        queryKey: ['useData'],
        queryFn: getUserInfo 
    })

    if (status === "loading") {
        return <span>Loading...</span>;
    }

    if (status === "error") {
        return <span>Error: {error.message}</span>;
    }

    return (
        <div>
          <div>userName: {data.userName}</div>
          <div>age: {data.age}</div>
        </div>
    )
}

useQuery({ 
  queryKey: ['userData'], 
  ...
})

// 根据 userId 查询数据
let userId = 'xxx'
useQuery({ 
  queryKey: ['useInfo', userId], 
  ... 
})

// 查询特定type的数据
useQuery({ 
  queryKey: ['xxxx', { type: 'xxx' }] 
})

// 以下两个的查询键值不相等，因为顶层数组中各key的排列顺序不同
useQuery({ queryKey: ['todos', status, page], ... })
useQuery({ queryKey: ['todos', page, status], ...})

// 以下两个的查询键值是相等的，顶层数组中各key的排列顺序相同，嵌套对象中的排列顺序不影响
useQuery({ queryKey: ['todos', { status, page }], ... })
useQuery({ queryKey: ['todos', { page, status }], ...})

useQuery({  
  queryKey: ['useData', useId],
  queryFn: getUserData     
})

const getUserData = async ({ queryKey }) => {
  const [ _key, useId ] = queryKey
  const data = await fetch('/api/useData' + useId)
  return data
}

function App () {
  // 下面的查询将自动地并行执行
  const usersQuery = useQuery({ queryKey: ['users'], queryFn: fetchUsers });
  const teamsQuery = useQuery({ queryKey: ['teams'], queryFn: fetchTeams });
  const projectsQuery = useQuery({ queryKey: ['projects'], queryFn: fetchProjects });
  ...
}

function App({ users }) {
  const userQueries = useQueries({
    queries: users.map((user) => {
      return {
        queryKey: ["user", user.id],
        queryFn: () => fetchUserById(user.id),
      };
    }),
  });
}

// 先执行这个query来拿到user的数据
const { data } = useQuery({
  queryKey: ["user", email],
  queryFn: getUserByEmail,
});

const userId = data?.id;

// 此query依赖于 user query 的结果
const { data } = useQuery({
  queryKey: ["projects", userId],
  queryFn: getProjectsByUser,
  // 直到 userId 存在，查询才会被执行
  enabled: !!userId,
});

import { QueryClient } from '@tanstack/react-query'

const queryClient = new QueryClient({
  // 全局设置query的一些配置
  defaultOptions: {
    queries: {
      staleTime: Infinity,
    },
  },
})

// 全局
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false,
    },
  },
})

// 单个查询
useQuery({
  queryKey: ["useData"],
  queryFn: getUserData,
  refetchOnWindowFocus: false,
})

// 手动触发查询
const { isError, data, error, refetch } = useQuery({
  queryKey: ["useData"],
  queryFn: getUserData,
  enabled: false,
})

<button onClick={() => refetch()} >手动触发查询</button>

import { QueryClient } from 'react-query';

// 创建一个 QueryClient 实例
const queryClient = new QueryClient();

// 一个函数，用于获取用户数据
const fetchUserById = async (userId) => {
  const response = await fetch(`api/users/${userId}`);
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
};

// 假设这是一个事件处理函数，当用户点击时触发
const handleUserLinkClick = (userId) => {
  // 使用 fetchQuery 预加载用户数据
  queryClient.fetchQuery(['user', userId], () => fetchUserById(userId));

  // 在这里，我们可能会进行路由导航操作
  navigate(`/users/${userId}`);
};

// 用户详情组件
const UserDetails = ({ userId }) => {
  // 使用 useQuery 钩子查询用户数据
  const { data, isLoading, error } = useQuery(
    ['user', userId],
    () => fetchUserById(userId),
    {
      // 如果数据已经在 fetchQuery 中预加载，这里会立刻拿到缓存数据
      staleTime: Infinity, // 你可以根据需要设置合适的新鲜度
    }
  );

  if (isLoading) {
    return <span>Loading...</span>;
  }

  if (error) {
    return <span>Error: {error.message}</span>;
  }

  return (
    <div>
      <h1>{data.name}</h1>
      {/* ... 其他用户信息 */}
    </div>
  );
};

import { useQuery, useQueryClient } from "@tanstack/react-query"

// 获取 queryClient
const queryClient = useQueryClient()

// 使缓存中的每个查询都无效
queryClient.invalidateQueries()

// 无效以 userData 开头的键值的查询
queryClient.invalidateQueries({ queryKey: ["userData"] })

queryClient.invalidateQueries({
  queryKey: ["userData", { userName: "easy code sniper" }],
})

// 该查询会被无效
const userQuery = useQuery({
  queryKey: ["userData", { userName: "easy code sniper" }],
  queryFn: getUserData,
})

// 该查询不会被无效
const userQuery = useQuery({
  queryKey: ["userData"],
  queryFn: getUserData,
})

queryClient.invalidateQueries({
  queryKey: ["userData"],
  exact: true,
})

// 该查询会被无效
const userQuery = useQuery({
  queryKey: ["userData"],
  queryFn: getUserData,
})

// 该查询不会被无效
const userQuery = useQuery({
  queryKey: ["userData", { userName: "easy code sniper" }],
  queryFn: getUserData,
})

queryClient.invalidateQueries({
  predicate: (query) =>
    query.queryKey[0] === "userData" && query.queryKey[1]?.age >= 18,
});

// 该查询会被无效
const userQuery = useQuery({
  queryKey: ["userData", { age: 20 }],
  queryFn: getUserData,
});

// 该查询会被无效
const userQuery = useQuery({
  queryKey: ["userData", { age: 10 }],
  queryFn: getUserData,
});

function App() {
  const mutation = useMutation({
    mutationFn: (userInfo) => {
      return axios.post("/updateUserInfo", userInfo);
    },
  });

  return (
    <div>
      {mutation.isLoading ? (
        "updating ..."
      ) : (
        <>
          {mutation.isError ? (
            <div>An error occurred: {mutation.error.message}</div>
          ) : null}

          {mutation.isSuccess ? <div>updated!</div> : null}

          <button
            onClick={() => {
              mutation.mutate({ userName: 'easy code sniper' });
            }}
          >
            修改用户信息
          </button>
        </>
      )}
    </div>
  );
}

// 在React16及之前的版本，这将无法正常工作
const CreateTodo = () => {
  const mutation = useMutation({
    mutationFn: (event) => {
      event.preventDefault()
      return fetch("/api", new FormData(event.target))
    },
  })

  return <form onSubmit={mutation.mutate}>...</form>
}

// 这将正常工作
const CreateTodo = () => {
  const mutation = useMutation({
    mutationFn: (formData) => {
      return fetch("/api", formData)
    },
  })
  const onSubmit = (event) => {
    event.preventDefault()
    mutation.mutate(new FormData(event.target))
  }

  return <form onSubmit={onSubmit}>...</form>
}

useMutation({
  mutationFn: updateUserInfo,
  onMutate: (variables) => {
    // 修改即将发生！
  },
  onError: (error, variables, context) => {
    // 错误触发！
  },
  onSuccess: (data, variables, context) => {
    // 成功时触发
  },
  onSettled: (data, error, variables, context) => {
    // 错误或成功……这并不重要
  },
})

mutate(userInfo, {
  onSuccess: (data, variables, context) => {
  },
  onError: (error, variables, context) => {
  },
  onSettled: (data, error, variables, context) => {
  },
})

import { useMutation, useQueryClient } from "@tanstack/react-query";

const queryClient = useQueryClient();

// 当此修改成功时，将所有带有useData查询键值的查询都无效
const mutation = useMutation({
  mutationFn: updateUserInfo,
  onSuccess: () => {
    queryClient.invalidateQueries({ queryKey: ["userData"] })
  },
})

const queryClient = useQueryClient();

const mutation = useMutation({
  mutationFn: updateUserInfo,
  onSuccess: (data) => {
    queryClient.setQueryData(["userData", { userName: 'cqy' }], data);
  },
});

mutation.mutate({
  userName: 'cqy',
  age: 22,
});

// 下面的查询将被更新为成功的修改响应
const { status, data, error } = useQuery({
  queryKey: ["useData", { userName: 'cqy' }],
  queryFn: fetchTodoById,
});

const getNextPageParam = (lastPage, allPages) => {
  // 如果 API 有一个 'nextPage' 字段，就返回它来获取下一页
  return lastPage.nextPage;
};

const getNextPageParam = (lastPage, allPages) => {
  // 如果 API 使用游标，并且存在一个 'nextCursor' 字段，就返回它
  return lastPage.nextCursor;
};

const getPreviousPageParam = (firstPage, allPages) => {
  // 如果 API 有一个 'prevPage' 字段，就返回它来获取前一页
  return firstPage.prevPage;
};

const getPreviousPageParam = (firstPage, allPages) => {
  // 如果 API 使用游标，并且存在一个 'prevCursor' 字段，就返回它
  return firstPage.prevCursor;
};

import { useInfiniteQuery } from 'react-query';

// 分页获取文章的函数
const fetchArticles = async ({ pageParam = 1 }) => {
  const res = await fetch(`/api/articles?page=${pageParam}`);
  return res.json();
};

// 组件内部
const ArticlesList = () => {
  const {
    data,
    error,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
    status,
  } = useInfiniteQuery('articles', fetchArticles, {
    getNextPageParam: (lastPage, pages) => {
      if (lastPage.nextPage) {
        return lastPage.nextPage;
      } else {
        return undefined;
      }
    },
  });

  if (status === 'loading') return <p>Loading...</p>;
  if (status === 'error') return <p>Error: {error.message}</p>;

  return (
    <>
      {data.pages.map((page, i) => (
        <React.Fragment key={i}>
          {page.articles.map(article => (
            <p key={article.id}>{article.title}</p>
          ))}
        </React.Fragment>
      ))}
      <div>
        <button
          onClick={() => fetchNextPage()}
          disabled={!hasNextPage || isFetchingNextPage}
        >
          {isFetchingNextPage
            ? 'Loading more...'
            : hasNextPage
            ? 'Load More'
            : 'Nothing more to load'}
        </button>
      </div>
    </>
  );
};

for ( const key in obj ) {
    // ...
}

let obj = {
    name: 'cqy',
    age: 11,
    hobby: ['play', 'code', 'sleep'],
    family: {
        mom: 'mother',
        father: 'father'
    },
    isMale: true,
    [Symbol()]: 'tag'
}

for( const key in obj ) {
    console.log( key );
}

// name
// age
// hobby
// family
// isMale

for ( const key of iterator ) {
    // ...
}

for ( const el of [1,2,3,4] ) {
    console.log(el)
}

let name = 'easy code sniper'

let arr = name.split(' ')

console.log(arr); // [ 'easy', 'code', 'sniper' ]

let name = new String('easy code sniper')
let arr = name.split(' ')
name = null

/**
 * 字符串会被拆分为单字符数组
 */
console.log(Array.from('cqy')); // [ 'c', 'q', 'y' ]

/**
 * 对现有数组进行浅拷贝
 */
let arr1 = [1, 2, { name: 'cqy' }]

let arr2 = Array.from(arr1)

arr2[2].name = 'easy code sniper'

console.log(arr1); // [ 1, 2, { name: 'easy code sniper' } ]

/**
 * 将arguments转化为数组
 */
function func() {
    console.log(Array.from(arguments));
}

func(1,2,3) // [ 1, 2, 3 ]

let arr = [1, 2, 3, 4]
let arr1 = Array.from(arr, function(x) { return x * this.num }, { num: 2 }) // [ 2, 4, 6, 8 ]

let arr = [1,2,3,4,5]

let sum = arr.reduce((prev, current, index, array) => prev + current)

console.log(sum); // 15

// 没有实现迭代器工厂函数
let num = 1
console.log(num[Symbol.iterable]) // undefined

// 实现了迭代器工厂函数
let str = 'cqy'
console.log(str[Symbol.iterator]); // [Function: [Symbol.iterator]]

//调用这个工厂函数会生成一个迭代器
let str = 'cqy'
console.log(str[Symbol.iterator]()); // Object [String Iterator] {}

let arr = ['aa', 'bb', 'cc']

let iter = arr[Symbol.iterator]()

console.log(iter.next()); // { value: 'aa', done: false }
console.log(iter.next()); // { value: 'bb', done: false }
console.log(iter.next()); // { value: 'cc', done: false }
console.log(iter.next()); // { value: undefined, done: true }

class Counter {
    constructor(limit) {
        this.count = 1
        this.limit = limit // 限制迭代的次数
    }

    next() {
        if(this.count <= this.limit) {
            return { done: false, value: this.count++ }
        } else {
            return { done: true, value: undefined }
        }
    }

    [Symbol.iterator]() { // 返回实例，实例中定义了next方法用于迭代
        return this
    }
}

let counter = new Counter(3)

// 当使用for-of循环counter时，后台会去查找counter身上是否有 [Symbol.iterator]() 工厂函数，并调用它， 
for(const i of counter) {
    console.log(i); // 1  2  3
}

for(const i of counter) {
    console.log(i); // 1  2  3
}


for(const i of counter) {
    console.log(i);  // 没有输出
}

class Counter {
    constructor(limit) {
        this.count = 1
        this.limit = limit
    }

    [Symbol.iterator]() {
        let count = 1
        let limit = this.limit

        return {
            next() {
                if(count <= limit) {
                    return { done: false, value: count++ }
                } else {
                    return { done: true, value: undefined }
                }
            }
        }
    }
}

let counter = new Counter(3)

for(const i of counter) {
    console.log(i); // 1  2  3
}

for(const i of counter) {
    console.log(i); // 1  2  3
}

class Counter {
    constructor(limit) {
        this.count = 1
        this.limit = limit
    }

    [Symbol.iterator]() {
        let count = 1
        let limit = this.limit

        return {
            next() {
                if(count <= limit) {
                    return { done: false, value: count++ }
                } else {
                    return { done: true, value: undefined }
                }
            },

            return() { // 自定义提前退出迭代方法
              console.log('Exiting iter');
              return { done: true }
            }
        }
    }
}

let counter = new Counter(3)

for(const i of counter) {
    if(i > 1) {
        break
    }
    console.log(i);
}
// 1
// Exiting iter

function * generatorFn() {}
function* generatorFn() {}
function *generatorFn() {}

let generatorFn = function* () {}

console.log(generatorFn); // [GeneratorFunction: generatorFn]

function * generatorFn() {}

console.log(generatorFn()); // Object [Generator] {}

console.log(generatorFn().next); // [Function: next]

console.log(generatorFn().next()); // { value: undefined, done: true }

function * generatorFn() {
    return 'easy code sniper'
}

console.log(generatorFn()); // 不会打印 easy code sniper

console.log(generatorFn().next()); // { value: 'easy code sniper', done: true }

function * generatorFn() {
    yield 'cqy';
    yield 'kyrie';
    return 'easy code sniper'
}

let generatorObj = generatorFn()

console.log(generatorObj.next()); // { value: 'cqy', done: false }
console.log(generatorObj.next()); // { value: 'kyrie', done: false }
console.log(generatorObj.next()); // { value: 'easy code sniper', done: true }

function * generatorFn() {
    yield 'cqy';
    yield 'kyrie';
    yield 'easy code sniper'
}

for(const item of generatorFn()) {
    console.log(item);
}

// cqy
// kyrie
// easy code sniper

let obj = {}

// 为 obj 创建一个 name 属性，并配置为不可修改
Object.defineProperty(obj, 'name', {
    value: 'easy code sniper',
    writable: false
})

console.log(obj.name); // easy code sniper

obj.name = 'cqy'

console.log(obj.name); // easy code sniper

// 定义 _name 为 伪私有变量，通过 name 属性去访问和设置 _name 属性
let obj = {
    _name: 'easy code sniper'
}

Object.defineProperty(obj, 'name', {
    get() {
        return this._name
    },
    set(newValue) {
        this._name = newValue
    }
})

console.log(obj.name); // easy code sniper

obj.name = 'cqy'

console.log(obj.name); //cqy

function Person() {}

console.log(Person.prototype);

// 输出
// {
//     constructor: f Person(),
//     __proto__: Object
// }

console.log(Person.prototype.constructor); // f Person()

console.log(Person.prototype.constructor === Person); // true

function Person() {}

let person = new Person()

console.log(person.__proto__ === Person.prototype); // true

console.log(person.__proto__.constructor === Person); // true

console.log(Person.prototype.isPrototypeOf(person)) // true

console.log(Object.getPrototypeOf(person) == Person.prototype)

function Person() {}

let person = new Person()

function Pig() {}

Object.setPrototypeOf(person, Pig)

console.log(Object.getPrototypeOf(person)); // [Function: Pig]

function Person() {}

Person.prototype.name = 'cqy'

let person = new Person()

console.log(person.hasOwnProperty('name')); // false
console.log('name' in person); // true

classNames('foo', 'bar'); // => 'foo bar'

classNames('foo', { bar: true }); // => 'foo bar'

classNames({ 'foo-bar': true }); // => 'foo-bar'

classNames({ 'foo-bar': false }); // => ''

classNames({ foo: true }, { bar: true }); // => 'foo bar'

classNames({ foo: true, bar: true }); // => 'foo bar'

// 多种不同类型的参数
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'

// 假值对应的类名都会被忽略
classNames(null, false, 'bar', undefined, 0, { baz: null }, ''); // => 'bar'

// 支持动态类名
let buttonType = 'primary';
classNames({ [`btn-${buttonType}`]: true });

// 在React中的使用：将classNames赋值给元素的className属性即可
export default function App() {

    return (
        <div className={classNames(...)}></div>
    )
} 

// 获取对象的hasOwnProperty方法，该方法用于判断某个属性是否是对象本身的，而不是继承自原型链
const hasOwn = {}.hasOwnProperty;

export default function classNames () {
	let classes = '';

	for (let i = 0; i < arguments.length; i++) {
		const arg = arguments[i];
		if (arg) {
			classes = appendClass(classes, parseValue(arg));
		}
	}

	return classes;
}

function parseValue (arg) {
	// 如果是字符串，直接返回
	if (typeof arg === 'string') {
		return arg;
	}
    // 如果既不是字符串，也不是对象和数组，就返回空字符串
	if (typeof arg !== 'object') {
		return '';
	}
    // 如果是数组，调用classNames来返回一个组合好的结果字符串
	if (Array.isArray(arg)) {
		return classNames.apply(null, arg);
	}
    // arg.toString !== Object.prototype.toString 表示arg的toString方法不是继承自Object上
	/**
	 *   !arg.toString.toString().includes('[native code]')
	 *   如果arg有toString方法，进一步检查这个方法是否是原生的
	 *   方法是将 arg.toString 方法转换成字符串，然后检查它是否包含字符串 '[native code]'。如果一个函数的字符串表示中包含 '[native code]'，这通常意味着函数是原生提供的，而不是用户定义的。
	 */
	if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
		return arg.toString();
	}

	let classes = '';

	// 如果arg是对象
	for (const key in arg) {
		// hasOwn 判断key是否是arg对象本身的属性，而不是继承自原型链的属性
		// arg[key] 判断key对应的值是否存在，且不为false
		if (hasOwn.call(arg, key) && arg[key]) {
			classes = appendClass(classes, key);
		}
	}

	return classes;
}

function appendClass (value, newClass) {
	if (!newClass) {
		return value;
	}

	return value ? (value + ' ' + newClass) : newClass;
}

import { DependencyList, EffectCallback, useEffect, useRef } from 'react';

// 判断是否是基本类型值，是基本类型就返回true
// Object()：给Object()函数传递一个值，如果是对象或者数组，则返回该值的引用；如果是基本类型值，则把该基本类型值包装成为对应的对象类型
const isPrimitive = (val: any) => val !== Object(val);

// 自定义比较函数有两个参数：旧的deps 和 新的deps ，该函数需要返回一个bool值来表示依赖是否发生变化
type DepsEqualFnType<TDeps extends DependencyList> = (prevDeps: TDeps, nextDeps: TDeps) => boolean;

/**
 * 接受三个参数
 * effect：副作用函数
 * deps：依赖项
 * depsEqual：自定义比较函数，该函数有两个参数，前一个依赖项 和 当前依赖项，要求返回一个boolean来表示依赖项是否发生了变化
*/
const useCustomCompareEffect = <TDeps extends DependencyList>(
  effect: EffectCallback,
  deps: TDeps,
  depsEqual: DepsEqualFnType<TDeps>
) => {
  // 生产环境下的一些警告提示，可以忽略
  if (process.env.NODE_ENV !== 'production') {
    // deps依赖必须有
    if (!(deps instanceof Array) || !deps.length) {
      console.warn(
        '`useCustomCompareEffect` should not be used with no dependencies. Use React.useEffect instead.'
      );
    }
    // 如果每一项依赖都是基本类型，那使用useEffect即可
    if (deps.every(isPrimitive)) {
      console.warn(
        '`useCustomCompareEffect` should not be used with dependencies that are all primitive values. Use React.useEffect instead.'
      );
    }
    // depsEqual 必须是一个函数
    if (typeof depsEqual !== 'function') {
      console.warn(
        '`useCustomCompareEffect` should be used with depsEqual callback for comparing deps list'
      );
    }
  }
  //定义一个ref来存储依赖项
  const ref = useRef<TDeps | undefined>(undefined); 

  /*
  *  !ref.current 表示初次渲染
  *  !depsEqual(deps, ref.current) 根据自定义的比较函数来判断依赖是否发生变化
  */
  if (!ref.current || !depsEqual(deps, ref.current)) { 
    ref.current = deps; // 当初次渲染时，或者依赖项发生变化时，ref存储新的依赖
  }

  // useEffect依赖的并不是deps，实际依赖的是ref.current 
  // 只有在depsEqual函数判断依赖项发生了变化，并更新ref.current之后，useEffect才会重新执行effect
  useEffect(effect, ref.current);
};

export default useCustomCompareEffect;

import { DependencyList, EffectCallback } from 'react';
import { equal as isShallowEqual } from 'fast-shallow-equal';
import useCustomCompareEffect from './useCustomCompareEffect';

// 判断是否是基本类型值
// 给Object()函数传递一个值，如果是对象或者数组，则返回该值的引用；如果是基本类型值，则把该基本类型值包装成为对应的对象类型
const isPrimitive = (val: any) => val !== Object(val);

// 调用第三方库，实现依赖项的浅比较
const shallowEqualDepsList = (prevDeps: DependencyList, nextDeps: DependencyList) =>
  prevDeps.every((dep, index) => isShallowEqual(dep, nextDeps[index]));

/**
 * 接受两个参数
 * effect：副作用函数
 * deps：依赖项
*/
const useShallowCompareEffect = (effect: EffectCallback, deps: DependencyList) => {
    // 生产环境下的一些警告提示，可以忽略
  if (process.env.NODE_ENV !== 'production') {
    if (!(deps instanceof Array) || !deps.length) {
      console.warn(
        '`useShallowCompareEffect` should not be used with no dependencies. Use React.useEffect instead.'
      );
    }

    if (deps.every(isPrimitive)) {
      console.warn(
        '`useShallowCompareEffect` should not be used with dependencies that are all primitive values. Use React.useEffect instead.'
      );
    }
  }
  
  // 调用 useCustomCompareEffect , 将shallowEqualDepsList作为自定义比较方法
  // 实际上就是对 useCustomCompareEffect 的又一层封装
  useCustomCompareEffect(effect, deps, shallowEqualDepsList);
};

export default useShallowCompareEffect;

import { useEffect } from 'react';
// isBrower 判断是否是浏览器环境
// on off 是封装好的浏览器事件监听器添加和移除方法
import { isBrowser, off, on } from './misc/util';


// ListenerType1 和 ListenerType2 接口定义了两种不同的事件监听模式

export interface ListenerType1 {
  addEventListener(name: string, handler: (event?: any) => void, ...args: any[]);

  removeEventListener(name: string, handler: (event?: any) => void, ...args: any[]);
}

export interface ListenerType2 {
  on(name: string, handler: (event?: any) => void, ...args: any[]);

  off(name: string, handler: (event?: any) => void, ...args: any[]);
}

export type UseEventTarget = ListenerType1 | ListenerType2;

// isListenerType1 和 isListenerType2 用来判断目标事件对象是否有 addEventListener 或 on 属性来实现的

const isListenerType1 = (target: any): target is ListenerType1 => {
  return !!target.addEventListener; // !! 任何真值都会被转化成true，假值都会被转化成false
};
const isListenerType2 = (target: any): target is ListenerType2 => {
  return !!target.on;
};

const defaultTarget = isBrowser ? window : null;

/**
 * 接受四个参数；
 * name：事件名称
 * handler：事件处理函数
 * target：事件监听器的目标对象，默认值是 defaultTarget
 * options：可选参数，用于传递给事件监听器的选项
*/
const useEvent = (
  name,
  handler,
  target,
  options?
) => {
  useEffect(() => {
    if (!handler || !target) { // 如果没有传入事件处理函数或者事件对象，不做任何处理直接返回
      return;
    }
    if (isListenerType1(target)) { //如果目标对象实现的是addEventListener模式，将它手动代理成on模式来添加监听器
      on(target, name, handler, options);
    } else if (isListenerType2(target)) { //如果目标对象实现的是on模式，直接用on模式添加监听器
      target.on(name, handler, options);
    }
    return () => { // 在组件销毁时删除事件监听
      if (isListenerType1(target)) {
        off(target, name, handler, options);
      } else if (isListenerType2(target)) {
        target.off(name, handler, options);
      }
    };
  }, [name, handler, target, JSON.stringify(options)]);
};

export default useEvent;

export function on<T extends Window | Document | HTMLElement | EventTarget>(
  obj: T | null,
  ...args: Parameters<T['addEventListener']> | [string, Function | null, ...any]
): void {
  if (obj && obj.addEventListener) {
    obj.addEventListener(...(args as Parameters<HTMLElement['addEventListener']>));
  }
}

export function off<T extends Window | Document | HTMLElement | EventTarget>(
  obj: T | null,
  ...args: Parameters<T['removeEventListener']> | [string, Function | null, ...any]
): void {
  if (obj && obj.removeEventListener) {
    obj.removeEventListener(...(args as Parameters<HTMLElement['removeEventListener']>));
  }
}