|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/high-performance-react-web-django/
课程评论：没有评论
## 高性能 React Web 開発コース概要 本课程聚焦于现代 React Web 开发中的关键技术，旨在帮助学习者掌握最新的最佳实践，提升应用性能。 **核心内容：** * **服务器数据状态管理：** * **React-query (2020 Feb. release):** 重点学习 React-query 的缓存机制，实现服务器数据的有效管理。 * **与传统 Fetch 的对比：** 理解 React-query 如何优化数据获取和缓存，减少不必要的网络请求。 * **useQuery + useMutation:** 掌握如何利用这两个 hook 实现 CRUD (增删改查) 操作，并与 REST API 进行交互。 * **`staleTime` 与 `cacheTime`:** 深入理解这两个参数在缓存策略中的作用。 * **应用程序 (客户端) 状态管理：** * **Redux Toolkit:** 学习如何使用 Redux Toolkit 来管理应用程序的客户端状态。 * **`useContext` vs. Redux Toolkit:** 比较 `useContext` 和 Redux Toolkit 在处理状态管理时的性能差异。 * **性能优化技术：** * **减少服务器 fetch 次数：** 通过缓存和智能数据获取策略，降低对服务器的请求频率。 * **抑制不必要的重渲染：** 学习如何优化组件渲染，避免性能损耗。 * **Custom Hook + memo:** 掌握如何利用自定义 Hooks 和 `memo` 进行代码复用和性能优化。 * **实践项目：** * **Todo 应用实践 (REST API 連携):** 通过构建一个 Todo 应用，将所学知识应用于实际开发场景，并与 REST API 进行交互。 * **开发工具：** * **React-query Dev Tools:** 学习使用 React-query 提供的开发工具进行调试和监控。 * **Redux Dev Tools:** 学习使用 Redux 开发工具进行状态管理的可视化和调试。 **学习目标：** 通过本课程，您将能够： 1. 熟练运用 React-query 进行高效的服务器数据状态管理。 2. 掌握使用 Redux Toolkit 管理复杂的应用程序状态。 3. 实现更优化的数据获取策略，显著提升应用性能。 4. 减少不必要的组件重渲染，优化用户体验。 5. 在实际项目中应用最新的 React 开发最佳实践。
React-query (2020 Feb. release)の登場により最新のReact開発では、REST APIから取得したServerデータの状態管理とアプリケーション(Client)の状態管理を分離する手法が主流になりました。本コースでは、最新のBest practiceに沿ってreact-queryのキャッシュ機構を使ったサーバーデータの状態管理手法とRedux toolkitを使ったアプリケーション(Client)の状態管理について学習していきます。また、サーバーへのfetch回数の低減と不要な再レンダリングの抑制を中心に最適化技術について学習します。Server state data management --> react-queryClient state management --> redux(redux toolkit)react-queryを使ったサーバーデータのcache管理Redux toolkitを使ったアプリケーションの状態管理(Client)useContextとRedux toolkitの再レンダリング性能の比較useQuery+useMutationを使ったCRUD処理(REST API連携)react-queryと従来のfetch処理の比較staleTimeとcacheTimeの理解custom hook + memoreact-query dev tools + redux dev toolsTodoアプリ実践 (REST API連携)
