一张思维导图入门React

简介: 一张思维导图入门React

640.png

一、项目初始化


640.png

二、UI层面


640.png

2.1 JSX基础

640.png

2.2 进阶


2.2.1 事件处理


640.png


2.2.2 条件渲染


640.png

2.2.3 列表


640.png

2.2.4 表单

640.png


三、组件

640.png

3.1 class组件


3.1.1 使用class组件需满足条件


640.png

3.1.2 相关属性方法


640.png


3.1.3 声明周期图谱

640.png

3.2 function组件

640.png

3.2.1 HOOK

640.png

3.2.1.1 函数

640.png

3.2.1.2 HOOK规则

640.png

3.2.1.3 自定义HOOK


640.png

3.3 高阶组件

640.png四、数据层面


640.png


五、重要包

640.png

六、感悟



在整理这些基础知识点的过程中,有以下几点感悟,不一定正确,分享出来与大家探讨:


  1. React中很多功能在开发中用的并不多,例如:数据传输方面Redux+props即可满足很多需求、Hook中常用的也只有useState、useEffect等,实现的一些功能仅仅是为了满足整个框架的完整性;


  1. HOOK的出现基本上让function组件一统天下,不必再使用class组件;


  1. 框架在不断向着越来越简单的方向发展。
相关文章
|
2月前
|
前端开发 JavaScript 定位技术
React 地图组件 Mapbox 入门指南
Mapbox 是一个强大的地图平台,提供丰富的地图数据和工具,支持多种开发语言和框架。本文介绍如何在 React 项目中使用 Mapbox,涵盖基础概念、安装配置、基本用法、常见问题及解决方法、高级用法等内容,并通过代码示例详细说明,帮助开发者提升地图应用的开发效率和用户体验。
104 2
|
2月前
|
前端开发 API UED
React 图片轮播 Carousel:从入门到进阶
本文介绍了在 React 中实现图片轮播(Carousel)的方法,从基础安装和配置 `react-slick` 开始,逐步讲解了常见问题如图片路径、性能优化、自定义样式和交互处理,以及高级话题如动态数据加载和响应式设计。通过详细示例,帮助开发者避免易错点,提升轮播图的用户体验。
41 3
|
2月前
|
监控 前端开发 JavaScript
React 静态网站生成工具 Next.js 入门指南
【10月更文挑战第20天】Next.js 是一个基于 React 的服务器端渲染框架,由 Vercel 开发。本文从基础概念出发,逐步探讨 Next.js 的常见问题、易错点及解决方法,并通过具体代码示例进行说明,帮助开发者快速构建高性能的 Web 应用。
100 10
|
3月前
|
前端开发 JavaScript 开发者
探索现代Web前端技术:React框架入门
【10月更文挑战第9天】 探索现代Web前端技术:React框架入门
|
4月前
|
移动开发 前端开发 JavaScript
构建高效跨平台移动应用:React Native入门指南
【8月更文挑战第47天】在移动开发领域,React Native凭借其跨平台特性和高效的开发模式赢得了开发者的青睐。本文将通过一个简易的待办事项应用实例,带领读者快速入门React Native,并展示如何利用JavaScript和React框架构建具有原生性能的应用。我们将探讨环境配置、界面布局、状态管理和数据流,以及如何打包和发布您的应用。准备好,让我们开始React Native之旅!
79 20
|
4月前
|
前端开发 JavaScript
React技术栈-React UI之ant-design使用入门
关于React技术栈中使用ant-design库的入门教程,包括了创建React应用、搭建开发环境、配置按需加载、编写和运行代码的步骤,以及遇到错误的解决方法。
52 2
React技术栈-React UI之ant-design使用入门
|
4月前
|
XML 存储 前端开发
React 基础入门
【9月更文挑战第1天】本文详细介绍了由Facebook开发的JavaScript库React,涵盖环境搭建、基本概念、常见问题及解决方案。首先,通过安装Node.js、npm和Create React App快速搭建开发环境;接着,讲解了JSX、组件(包括函数和类组件)、state和props等核心概念;最后,针对JSX语法错误、state异步更新及props与state混淆等问题提供了具体的解决方法和示例代码,帮助读者更好地理解和应用React。
42 2
|
5月前
|
移动开发 前端开发 JavaScript
构建高效跨平台移动应用:React Native入门指南
【8月更文挑战第31天】 在移动开发领域,React Native凭借其跨平台特性和高效的开发模式赢得了开发者的青睐。本文将通过一个简易的待办事项应用实例,带领读者快速入门React Native,并展示如何利用JavaScript和React框架构建具有原生性能的应用。我们将探讨环境配置、界面布局、状态管理和数据流,以及如何打包和发布您的应用。准备好,让我们开始React Native之旅!
|
5月前
|
开发者
告别繁琐代码,JSF标签库带你走进高效开发的新时代!
【8月更文挑战第31天】JSF(JavaServer Faces)标准标签库为页面开发提供了大量组件标签,如`<h:inputText>`、`<h:dataTable>`等,简化代码、提升效率并确保稳定性。本文通过示例展示如何使用这些标签实现常见功能,如创建登录表单和展示数据列表,帮助开发者更高效地进行Web应用开发。
51 0
|
5月前
|
前端开发 JavaScript UED
🎬JSF 与 Ajax:打造瞬间响应的魔法界面!🚀 用户输入即刻,数据交互如梦幻泡影般呈现!
【8月更文挑战第31天】在现代Web应用中,异步数据交互是提升用户体验的关键。JavaServer Faces (JSF) 作为标准Java Web框架,结合Ajax技术,可轻松实现页面异步更新与数据交互。本文通过示例代码介绍如何在JSF中使用Ajax组件(如`f:ajax`)及后端处理方法实现异步功能,并结合JavaScript处理复杂交互,帮助开发者提升Web应用体验。
46 0