React基础与核心概念探索

目录

React简介

起源与设计理念

JSX语法

        什么是JSX？

        为什么使用JSX？

        JSX的转换过程

组件化架构

        React组件的概念

        分类：函数组件 vs 类组件

      状态管理

        Props传递

虚拟DOM

        高效DOM更新的秘密

        工作原理

React简介

起源与设计理念

        React，由Facebook开发并维护，自2013年首次开源以来，迅速成为前端开发领域的一颗璀璨明星。React的设计初衷是为了解决Facebook在构建大型Web应用时遇到的性能和维护性问题。其核心设计理念包括声明式编程和组件化。

• 声明式编程：React鼓励开发者以声明的方式描述UI，即告诉React“你希望界面看起来像什么”，而不是“如何一步步更新DOM”。这种方式使得代码更加清晰、易于理解和维护。

• 组件化：React将UI拆分成独立的、可复用的组件，每个组件都封装了自己的逻辑、状态和UI。这种模块化的设计方式不仅提高了开发效率，还促进了代码的重用和团队的协作。

JSX语法

        什么是JSX？

JSX是JavaScript XML的缩写，是React推荐的一种语法扩展。它允许开发者在JavaScript代码中直接编写类似HTML的标记，这种标记最终会被Babel等编译器转换成React可以理解的JavaScript对象。

        为什么使用JSX？

JSX让React的组件更加直观和易于理解。通过直接在JavaScript代码中编写HTML结构，开发者可以更加自然地描述UI布局，同时享受JavaScript的强大功能，如变量、条件渲染和循环等。

        JSX的转换过程

JSX本身不是有效的JavaScript代码，因此在浏览器或Node.js环境中直接运行之前，需要通过如Babel这样的工具进行转换。转换过程中，JSX会被转换成React.createElement()的调用，每个HTML元素都会转换为一个JavaScript对象，这些对象最终会被React用来构建DOM树。

组件化架构