2022年2月

第一周

日期 早 午 晚 复习内容 完成度
1月31日 代码分割之import静动态导入 代码分割之lazy:Suspense与路由懒加载 错误边界与使用技巧 URI 90%
2月1日 初探Context的使用场景 Context与组合的应用场景与使用问题 Context API（1） 客户端服务端 90%
2月2日 Context API（2） 动态Context嵌套的案例分析 Fragment和短语法应用 架构 80%
2月3日 高阶组件的案例之前奏 高阶组件的案例之思路转换 高阶组件横切关注点以及柯里化 服务器 90%
2月4日 高阶组件使用注意事项与总结 Refs的应用场景与选用思考 React.createRef()用法细节分析 域名 90%
2月5日 Refs转发机制与在高阶组件中的使用 Refs转发机制与各种方式 JSX深度剖析与使用技巧（1） 根域名 90%
2月6日 复习 复习 复习 复习 80%

资料：

知识总结：

  • 代码分割有什么好处？

  • 模块可以懒加载

  • 减少应用的体积

  • 减少加载时的体积

  • 为什么不能滥用动态加载？

  • 因为静态导入是有利于初始化依赖的，静态的程序分析或tree shaking动态导入是难以工作的

  • lazy是什么？

  • 是React提供给开发者的懒(动态)加载组件的方法React.lazy(参数：函数必须接收一个支持Promise的动态导入组件)，好处是减少打包体积，对初次渲染不适用的组件延迟加载，它依赖一个内置组件Suspense，给lazy加上loading提示器组件的一个容器组件

  • context有什么作用？

  • 给整个组件树共享全局的数据

  • context最适合的场景是：

    • 杂乱无章的组件都需要同一些数据的时候
    • 不合适在单纯的为了不层层传递属性
    • 它会弱化及污染组件的纯度导致组件复用性降低

  • 关于React.createContext：

    • 创建一个指定的Context对象
    • 组件会找离自己最近的Provider获取其value(在state里定义的)

  • 什么时候默认值生效？
    如果没有匹配到Provider就使用默认值( 在React.createContext('默认值')中定义的)，其他情况均不使用默认参数

  • 关于Context.Provider:

    • 它是通过React.createContext创建的上下文对象里的一个组件
    • Provider组件可以插入其他组件的目的是可以订阅这个Context
    • 通过Provider的value属性来将数据传递给其他Consumer组件

  • 关于Context.Consumer:

    • 它使用的是Provider提供的value
    • 最大的作用是订阅context变更
    • Consumer内部使用函数作为子元素(专题：function as a child)
    • 有一种组件的内部是使用函数作为子元素
    • 特点是函数接收context最近的Provider提供的value
    • 如果没有写Provider会找默认值

  • 关于contextType:

    • 是class类内部的一个静态属性(相当于ES3中给构造函数新增属性Selector.contextType)
    • 它必须指向一个由React.createContext执行后返回的Context对象
    • 给当前环境下的context重新指定引用
    • 指定后父组件上下文会有数据，不指定会显示空对象(context: {})
    • 在生命周期函数和render函数中都可以访问

  • 关于React.Fragment：
    这个组件创建了一个文档碎片

  • 应用场景：
    一般在表格上使用解决没有根节点的问题

  • HOC是什么？
    High Order Component - 高阶组件 高内聚低耦合

    • HOC不是React提供的API，而是一种高级的设计模式
    • HOC是一个函数接收一个组件参数，返回一个新组件
    • 普通组件返回的是UI，而HOC返回的是一个新组件
    • HOC不能修改参数组件，只能传入组件所需要的props
    • HOC是一个没有副作用的纯函数
    • HOC除了必须填入被包裹的参数组件以外，其余参数根据需求增加
    • HOC不关心数据如何使用，包裹组件不关心数据从哪里来
    • HOC和包裹组件直接唯一的契合点就是props

  • 高阶组件实现了哪些功能？
    将两个功能类似的功能和方法和数据管理抽象到一个高阶组件中，让高阶组件包装来完成请求数据，数据的保存，事件处理函数的管理

  • 横切关注点是什么？
    对参数组件本身的逻辑状态与视图横向切割(一般是按照组件切割)，让HOC来完成逻辑和状态的管理，让参数组件来完成视图的渲染，让HOC将数据与逻辑传递到参数组件中，从而完成关注点分离且有机结合的任务

  • 有哪些高阶组件注意事项？

    • 不能重写参数组件原型上的生命函数方法
    • 不能修改参数组件的引用
    • 这样修改可能导致参数组件内部的逻辑执行失效
    • 一切的功能都可以在容器组件内实现
    • 高阶组件接收的参数组件可以是类组件，也可以是函数组件

  • Refs: 允许开发者访问真实DOM，允许用于强制修改子组件

  • ref有不同的使用方式：

    • 如果放在HTML元素上，那么current就是真实DOM节点
    • 如果放在Class组件上，那么current指向组件实例
    • 如果放在函数组件上，在函数组件上没有实例，那么createRef就附加不到组件上

  • 关于React.forwardRef()：
    该方法实际上可以传入一个回调函数，回调函数返回一个React元素

  • ref有什么缺点？

    • string Refs依赖的是当前组件实例下面的refs集合里的ref，所以必须React保持追踪当前正在渲染的组件，因为组件没有加载渲染完成时，this是无法确定的，React在获取ref时可能比较慢
    • 它不能在render中工作
    • 它不能组合，只能有一个ref

第二周

日期 早 午 晚 复习内容 完成度
2月8日 JSX深度剖析与使用技巧（2） JSX深度剖析与使用技巧（3） JSX函数子元素的应用与思考 www 90%
2月9日 redux初探、用react开发数值增值案例 store、action、reducers、redux context的使用、Provider、Consumer的认知 DNS解析 80%
2月10日 中间件的使用、异步action的创建 hooks简介 stateHook_1 IP 90%
2月11日 stateHook_2 effectHook_1 effectHook_2 IP端口号 90%
2月12日 自定义hook useReducer contextHook TCP 90%
2月13日 复习 复习 复习 复习 50%

资料：

知识总结：

  • React书写规范：

    • 小写字母开头代表HTML的内置组件，识别小写<div>,<h1>会将标签转换为div,h1，然后将其作为React.createElement的第一个参数
    • 大写字母开头的自定义组件<MyButton />，它会编译成React.createElement(MyButton)

  • 关于JSX的props属性：
    在JSX{}里面可以传入任何JavaScript表达式，但是不包括语句if,for,switch,function，如果是非表达式可以在JSX外面使用

  • Action是什么？
    它是描述当前发生的事情，改变state的唯一办法，就是使用action他会运送数据到Store

  • 关于reducer函数：
    它是一个纯函数，只要同样的输入，必定得到同样的输出
    Store收到action以后，必须给出一个新的State, 这样视图才会发生变化，这种State计算过程叫做Reducer

  • 关于store.subscribe方法：
    监听state状态发生更改时，调用方法渲染更新视图

  • Hook是什么？
    它是一个简单的函数，函数组件再执行的时候能够给函数组件i添加一些特殊的功能

  • 调用useState方法时做了什么？
    声明一个变量并返回一个数组包括变量和改变变量的方法

  • useState需要哪些参数?
    参数1是默认值

  • Hook有什么规则？

    • 只在最顶层使用Hook
    • 不在循环，条件或嵌套函数中使用
    • 只在React函数中调用Hook

  • 使用effectHook有什么作用？
    该钩子接收一个包含命令式，且有可能有副作用代码的函数
    它可以让开发者在函数组件中执行副作用操作

  • 什么是副作用？
    在纯函数中，只要和外部存在交互时就不是纯函数

  • 哪些操作会导致不是纯函数？

    • 引用外部变量
    • 执行外部函数、

  • 关于纯函数：
    相同的输入会引起相同的输出

  • 关于React中的副作用：
    只要不是在组件渲染时用到的变量，所有操作都为副作用

    • 跟外部相关的东西
    • 依赖useState声明的变量和函数
    • 依赖外部全局document/window变量(修改全局变量,，计时器)
    • 依赖外部全局的DOM对象(修改DOM)
    • 依赖Ajax(全局的new XMLHttpRequest()返回的对象)

  • 在类组件中如何做副作用？
    通过生命周期函数(componentDidMount/componentDidUpdate)中做副作用，函数组件中的useEffect相当于将两个生命周期相合并执行的结果一样，但是会存在执行时间不同

  • 关于useEffect和componentDidMount/componentDidUpdate的执行时间：

    • 在初次渲染以后执行componentDidMount生命周期函数程序(页面加载DOM之前执行)
    • 在更新之后执行componentDidUpdate生命周期函数程序(页面加载DOM之前执行)
    • useEffect是在页面加载DOM完毕时执行

  • 为什么useEffect函数可以在真实DOM构建以后执行？
    因为它是一个异步程序

  • useEffect做了什么？
    告诉React组件在渲染后执行某些操作，并保存传递的函数，并且在执行DOM更新之后调用它

  • 为什么在组件内部调用useEffect?
    将useEffect放在组件内部可以让开发者在effect中直接访问state变量或props，不需要其他的API去读取它，它已经保存在函数的作用域中

  • useEffect都会在每次渲染后执行吗？
    是的，默认情况下，在第一次渲染之后和每次更新之后都会执行

  • 什么时候需要清除effect?
    将订阅的数据使用完毕时清除取消订阅(componentWillUnmount)

  • 清理函数什么时候会执行？

    • 在每一次运行副作用函数之前执行
    • 在组件销毁的时候也会执行

  • 如何只在初次渲染时执行(componentDidMount)？
    而不希望在更新之后执行不传入依赖项到数组里就不会是useEffect函数重复运行

  • 自定义hook必须以use开头吗？
    必须遵守约定写

  • 两个组件中使用相同的hook会共享state吗？
    不会的，要用到数据共享时单独引入

  • 自定义hook如何获取独立state?
    通过函数多次调用即可

  • 为什么会存在redux？

    • 在类组件中的state是一个对象，所有的数据类型都要在一个state中完成
    • 根据组件数据单向流原则，想操作state必须要通过对应的方法，如果是父组件中的的数据必须在父组件定义对应的方法，子组件定义自己的方法，存在数据凌乱的问题

  • redux存在的作用？
    统一管理所有的数据，实现所有数据状态调度的方法，用一种方式实现所有数据的更新

  • 如何用一种方法统一更改或调度state？
    在视图中使用dispatch(action)方法实现所有数据的调度

  • action行为是什么？
    有一个对象来描述当前的行为{ type: 'decrement' }

第三周

日期 早 午 晚 复习内容 完成度
2月14日 useContext useMemo useCallback 三次握手 80%
2月15日 useRef forwardRef 使用useInperativeHandle UDP 90%
2月16日 useLayoutEffect useDebugValue redux深究 HTTP&HTTPS 90%
2月17日 redux深究 state hook react-redux正确的打开方式 报文 90%
2月18日 『React Hooks事件待办』项目实战 『React Hooks事件待办』项目实战 『React Hooks事件待办』项目实战 请求方式 80%
2月19日 React与React Hooks对比 【React/Vue大比拼系列】之一『待办列表』Vue2/vue3/React/React Hooks 【React/Vue大比拼系列】之一『待办列表』Vue2/vue3/React/React Hooks 状态码 90%
2月20日 复习 复习 复习 复习 90%

资料：

知识整理：

  • useContext有什么作用？
    跟类组件中React.createContext的用法基本一致，接收一个context对象(React.createContext的返回值)，并返回当前值，context的值由上层组件中距离当前组件最近的<MyContext.Provider />的value属性决定的

  • 什么是memo?
    它跟类组件中的PureCompoent方法用途一样，如果视图在绑定某个方法时，组件加载时会重复的生产新的函数方法，而memo方便包裹使用就能避免组件绑定的方法多次执行，它是函数组件中优化组件的一种方式，不希望子组件重新运行

  • 什么是useCallback?
    它固定的是一个函数，性能优化的手段
    它可以将视图绑定的方法重新改变为同一个引用值，除非依赖项有更改，否则永远都不会去做渲染

  • 什么是useMemo?
    它固定的是一个值，性能优化的手段，它跟useCallback实现的效果一样，防止子组件多次渲染的问题，区别在于写法不同

  • 什么是useRef?
    和类组件中ref用法一致，写法会更简单，默认情况下给组件写ref会报错，通过forwardRef方法给子函数组件包裹实现ref转发可以解决

  • forwardRef方法是如何解决ref引用问题？
    ref是可以指向引用，可能是原生DOM，也可能是子类组件，但函数组件无法指向，forwardRef可以实现转发`ref``

  • 关于useInperativeHandle
    如果父组件通过绑定ref视图去拿到子组件的真实DOM是存在问题的，本希望父组件能使用子组件DOM的某些功能(如focus等)，甚至当拿到真实DOM也可以把子组件的DOM删除

  • useLayoutEffect和useEffect相同，区别在于触发时间不一样

    • 在DOM加载完成之后执行useEffect
    • 在DOM加载完成之前可以使用useLayoutEffect
  • useDebugValue
    用的不多，在开发者工具栏中显示自定义hook标签(提示hook信息)

第四周

日期 早 午 晚 复习内容 完成度
2月21日 redux正确的打开方式 redux正确的打开方式 受控组件与非受控组件 浏览器缓存 90%
2月22日 React『封装HTTP工具组件』 React『封装HTTP工具组件』 React『封装HTTP工具组件』 协议版本 80%
2月23日 『checkbox单选多选全选反选』组件封装 『checkbox单选多选全选反选』组件封装 『checkbox单选多选全选反选』组件封装 四次挥手 80%
2月24日 『React Hooks事件待办』项目实战 『React Hooks事件待办』项目实战 『React Hooks事件待办』项目实战 同源策略 90%
2月25日 react-route v6新特性—实战todoList待办项 react-route v6新特性—无匹配路由 v6新特性—url传参 跨域 90%
2月26日 v6新特性—索引路由&NavLink useSearchParams(搜索参数) 自定义NavLink&自定义导航 iframe 80%
2月27日 复习 复习 复习 复习 50%

资料：

知识整理：

  • 如何获取url参数？
    通过react-router里面的useParams()方法获取

  • 如何获取路由参数？
    通过搜索参数函数useSearchParams()

  • 在react-router-dom中如何获取history对象？
    通过useLocation()方法

  • 如何实现自定义导航，即路由跳转？
    通过useNavigate()方法

  • 什么是嵌套路由？
    路由内部又包含路由

  • 如何跳转地址避免页面重载？
    利用HTML5的history对象可以取代无刷新

  • 关于history.pushState(state, title, url)：

    • state：javascript对象，描述当前url状态
    • title：暂无使用
    • url：指定跳转的地址