【项目】手写掘金简版

初步：React 类组件实现

Done：

• 项目搭建：vite (opens new window) / eslint (opens new window) 使用
• 两级导航切换基本实现
  组件复用、开闭原则、状态提升
• 网络请求模拟
  
• 显示请求中与错误信息（错误时，点击重发请求）
• 处理频繁请求显示混乱、不一致的问题
  通过判断当前状态与保存的快照，判断多个请求中的某次请求是否为当前请求
• 下拉滚动加载，以及全部加载完毕
  通过监听 scroll 事件实现滚动加载，每次请求加载，在当前保存的文章列表状态追加文章，加载完成显示页面底部
• 关键词搜索文章
• 导航与搜索框、文章列表与搜索框：消息订阅与发布
  适用于任意组件（如，兄弟）之间的通信，但会破坏单向的数据流，使得追踪数据变得复杂，同时会使组件之间的耦合程度变高。

Todo：

• 完成浏览历史、稍后再看功能

总结：

• 生命周期函数 (opens new window)：render——纯函数/无副作用，componentDidMount——设置事件监听、首次请求数据等，componentDidUpdate(prevProps, prevState)，componentWillUnmount——取消事件监听
• 父子组件传参与状态提升
• 非必要无需 setState（除了保存的 state 状态，其余东西都可以往 this 里面塞）。
• 实现过程：划分组件层级 -- 静态实现 -- 确定最小且完整的 state -- 确定 state 的存放位置 -- 添加反向数据流

进阶：React hooks 实现

Done：

• 使用 hooks 重构 App 组件
  • useState
  • useEffect（注意第二个参数，有时需要同时传递 state 以及相关的处理函数）
• 基于扩展程序（Profiler，性能测试工具）优化页面的状态变更
  
  • class 组件：PureComponent
    实现了 shouldComponentUpdate()，但只是浅层比较。
    子组件必须是“纯”的；当传 props 时，避免传递每次都生成一个新值（实际上并未更新）的属性，绑定到类自身来缓存该值。
    
  • func hooks 组件：useMemo | useCallback，React.memo
    React.memo 相当于给 func 组件进行了一次包装（更新取决于 props）
    useMemo 缓存不总是变更的非状态值，useCallback 缓存回调函数（只要依赖项不变，回调函数不变）。
    
• 基于 React Router 实现基本路由

TODO：

• Redux
  • 抽离出一个顶层状态的管理中心，对状态进行维护，单向数据流 action(user input)->state update->rerender->action(user input)->...
  • useContext + useReducer = Redux （99%的情况下）
  • 基本要素
    • actions：返回具体的动作（包括动作类型/由动作产生的新的属性值）
    • reducers：根据当前（或初始）状态和触发的动作类型，来更新对应的状态（如果有分组，需要combine）
    • components：函数式组件UI，传入的参数是一个props对象，包括需要的所有props（即reducers返回的state）以及dispatch函数（触发动作的分发）
      需要在组件内部调用connect方法，把组件和store关联起来。
      
    • store：统领（存储state）
• React Native/Hybrid