新建一个静态的 html页面，引入umd版本的 react.js

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.   <title>react cdn</title>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <script src="https://cdn.bootcdn.net/ajax/libs/react/18.2.0/umd/react.development.js"></script>
  9. </head>
  10. <body>
  11. </body>
  12. </html>

image.png

  • 以 use开头的都是 hooks方法
  • 根据自己常用的方法，渐进式的，去学习 react的源码，理解其应用场景和实现原理。

react API

可以查看到 react18.0.2版本有 35个方法
相对与 react 16.8.6 的 29个方法，有新增的API image.png

  1. [
  2.   // react内部访问的部分，慎用
  3.   "__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED",
  4.   "Children", // map,forEach,count,toArray,only
  7.   // 组件类，都来自于ReactBaseClasses
  8.   "Component",
  9.   "PureComponent", // 浅比较 props
  11.   "createRef", // 用于 class组件的 ref
  12.   "cloneElement", // 克隆一个react element
  13.   "createContext", // 
  14.   "createElement", // 创建一个 react element
  15.   "createFactory", // 创建一个制定类型的react element的工厂函数
  16.   "isValidElement", 判断一个对象是否是react元素
  19.   "forwardRef", // 函数组件 ref的引用
  20.   "useImperativeHandle",
  22.   "Fragment", // <></>
  23.   "memo", // 类似 PureComponent
  24.   "Profiler",
  25.   "startTransition",
  26.   "StrictMode", // 严格模式
  27.   "Suspense",
  28.   "lazy", // 懒加载，和 Suspense一起使用
  29.   "unstable_act",
  31.   // hooks
  32.   "useCallback",
  33.   "useContext",
  34.   "useDebugValue",
  35.   "useDeferredValue",
  37.   "useEffect", // 副作用
  38.   // 插入全局DOM节点，类似 useLayoutEffect，区别：回调执行时，不能访问ref中的DOM节点
  39.   "useInsertionEffect", // 
  40.   // 比 useEffect更早的触发，可以动态修改 DOM, 会阻塞浏览器渲染，执行同步的耗时
  41.   "useLayoutEffect", 
  42.   "useId", // 当前组件的唯一身份，在客户端与服务端之间产生唯一ID const id = useId()
  44.   "useMemo", // 类似 vue的 computed
  45.   "useReducer", // 和 redux相似
  46.   "useRef", // 实例引用
  47.   "useState", // state 组件状态
  48.   // 代替 useMutableSource 用于订阅外部源
  49.   "useSyncExternalStore",
  50.   "useTransition", // 将函数内的内容过渡
  51.   "version" // react的版本
  52. ]