岳阳市城市建设投资公司网站,腾讯企点是什么软件,网站备案网站简介,网站建设费用自建目录
React简介
起源与设计理念
JSX语法 什么是JSX#xff1f; 为什么使用JSX#xff1f; JSX的转换过程
组件化架构 React组件的概念 分类#xff1a;函数组件 vs 类组件 状态管理 Props传递
虚拟DOM 高效DOM更新的秘密 工作原理 React简介
起源与设计理念 React 为什么使用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树。
组件化架构 React组件的概念
React组件是构建React应用的基本单位它们可以接受输入props并返回React元素树这些元素树描述了界面的一部分。组件可以是类组件或函数组件它们都是React应用的积木。 分类函数组件 vs 类组件
函数组件接受props作为参数并返回React元素的简单函数。它们没有自己的状态state和生命周期方法但可以使用Hooks来添加这些功能。
代码示例
import React from react; function Welcome(props) { return h1Hello, {props.name}/h1;
} export default function App() { return ( div Welcome nameAlice / Welcome nameBob / /div );
}
在这个例子中我们定义了一个Welcome函数组件它接收一个props对象作为参数并返回一个包含问候语的h1元素。然后在App组件中我们两次渲染了Welcome组件分别传递了不同的name属性。
类组件通过继承React.Component创建的组件拥有自己的状态state和生命周期方法。类组件相对复杂但在某些场景下如需要状态管理或复杂的生命周期逻辑时更为强大。
代码示例
import React, { Component } from react; class Welcome extends Component { render() { return h1Hello, {this.props.name}/h1; }
} export default class App extends Component { render() { return ( div Welcome nameCharlie / Welcome nameDavid / /div ); }
}
这个示例与上面的函数组件一样但使用了类组件的语法。Welcome类继承自React.Component并通过this.props访问传递给它的属性。然后在App类中我们渲染了两个Welcome组件实例。 状态管理 React组件的状态state是驱动UI更新的关键。无论是类组件中的this.state类组件中状态管理只能使用state还是函数组件中的useState Hook在18版本往后类组件开始摒弃推荐使用函数组件以及函数组件专有的hook来进行状态管理状态都允许组件在内部保存数据并在数据变化时重新渲染界面。 Props传递 Props属性是父组件向子组件传递数据的方式。它们类似于函数的参数是只读的这有助于保持组件的封装性和可预测性。
虚拟DOM 高效DOM更新的秘密
React之所以能够实现高效的DOM更新主要归功于其虚拟DOM机制。虚拟DOM是真实DOM的内存表示React在内存中构建整个UI的虚拟树并仅在必要时即虚拟树发生变化时才更新真实DOM。 工作原理
当React组件的状态或props发生变化时React会重新渲染组件并生成新的虚拟DOM树。然后React会比较新旧两棵虚拟DOM树的差异并仅将这些差异应用到真实DOM上。这种差异比较和最小更新策略极大地提高了DOM操作的性能。
