Code Monkey home page Code Monkey logo

common-hook's Introduction

7-a-hooks-source-code-analysis

任务清单 - 完成度

  • useUpdate -> 强制组件重新渲染
  • useUpdateEffect -> 用法上和useEffect完全保持一致,只是 ( useUpdateEffect ) 忽略了 ( 首次渲染 ),并且 ( 只在依赖项更新时运行 )
  • useLocalStorageState
  • useToggle useBoolean
  • useTimeout
  • useFullscreen
  • useResponsive configResponsive
  • useMap
  • useSetState -> 类似于class中的this.setState()
  • useTitle
  • useLockFn -> 用于给一个 ( 异步函数 ) 添加 ( 竞态锁 ),防止 ( 并发执行 )
  • useCreation -> 是 useMemo 或 useRef 的替代品
  • useTextSelection -> 实时获取用户当前选取的文本内容及位置
  • useEventListener -> 优雅的使用 addEventListener
  • useMouse - 依赖 useEventListener -> 一个跟踪鼠标信息的hook
  • useFavicon -> 设置和切换页面的favicon
  • useInterval -> 一个用来处理 setInterval 的hook,具有设置 immediate,delay 的加强功能
  • usePersistFn -> 持久化function的hooks,注意和useCallback的区别
  • useMount -> 只在mount阶段执行的hook,注意只在mount阶段执行一次
  • useUnmount -> 只在组件 unmount 时执行的hook,利用 useEffect的参数函数的返回函数实现
  • useUnmountRef -> 获取当前组件 ( 是否被卸载 ) 的hook
  • useClickAway -> 管理目标元素外的点击事件
  • useScroll -> 获取元素的 滚动 状态的hook
  • useKeyPress -> 一个优雅的管理 keyup 和 keydown 键盘事件的 Hook,支持 ( keyFilter支持键盘组合键,key,keycode,别名,返回值是boolean的回调 )
  • useInViewport -> 一个用于判断dom元素是否在可视化范围之内的hook
  • useEventTarget -> 对表单控件中的 onChange 和 value 的封装,具有 reset transform 等功能
  • useHover -> 利用 useEventListener 和 useBoolean(useToggle) 实现,表示鼠标是否悬停在DOM元素上
  • useSize

(二) 其他源码分析

(1) redux 和 react-redux 源码分析 [redux^4.0.5]

(2) 手写 webpack Compiler 源码 [webpack^4.42.0]

(3) axios 源码分析 [axios^0.20.0]

(4) vue 源码分析 [vue^2.6.12]

(5) vuex 源码分析 [v2.6.10]

(6) react 源码分析 [react^17.0.3]

(7) a-hooks2.0 源码分析 [a-hooks^2.10.9]

(8) a-hooks3.0 源码分析 [a-hooks^2.10.9]

(9) koa 源码分析 [koa^2.13.1]

(10) badJs-report 源码分析

(11) element-ui 源码分析

common-hook's People

Contributors

woow-wu7 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.