什么是react

React 是一个用于构建用户界面的 JavaScript 库。它允许你将你的 UI 分割成被称为“组件”的独立、可重用的部分，每个组件都包含了自己的 HTML 结构、样式和行为。React 通过虚拟 DOM 和高效的更新算法来实现对真实 DOM 的最小更改，从而优化性能。

下面是一个简单的 React 组件的示例代码：

jsx// 引入 React 库
import React from 'react';// 定义一个名为 Hello 的函数组件
function Hello(props) {
// 使用 JSX 语法返回一段 HTML 结构
// 这里使用了 props.name 来动态显示名字
return (
<div>
Hello, {props.name}!
</div>
);
}// 定义一个名为 App 的函数组件
function App() {
// 在 App 组件内部使用 Hello 组件，并传递 name 属性
return (
<div>
<Hello name="World" />
<Hello name="React" />
</div>
);
}// 使用 ReactDOM 的 render 方法将 App 组件挂载到 HTML 中的某个元素上
// 这一步通常在入口文件中完成
// 假设你有一个 HTML 元素 <div id="root"></div>
// import ReactDOM from 'react-dom';
// ReactDOM.render(<App />, document.getElementById('root'));// 注意：上面的 ReactDOM.render 调用是在一个实际的应用中才会有的
// 在这个示例中，我们只展示了组件的定义和使用export default App; // 导出 App 组件，以便在其他地方使用

注意：

React 使用 JSX 语法，这是一种 JavaScript 的扩展语法，允许你在 JavaScript 中写类似 HTML 的结构。在上面的示例中，<div>、<Hello /> 等都是 JSX 语法。
props 是组件的属性，类似于 HTML 元素的属性。你可以通过 props 来向组件传递数据。
function Hello(props) {...} 定义了一个函数组件。React 16.8 之后引入了 Hooks，使得函数组件也可以拥有类似类组件的 state 和其他功能。
React 还有类组件的概念，但上面的示例只展示了函数组件的用法。类组件使用 class 关键字定义，并继承自 React.Component。
在实际的应用中，你还需要使用 ReactDOM.render 方法来将组件挂载到 HTML 中的某个元素上。但在这个示例中，我们只展示了组件的定义和使用，没有包含挂载的部分。

最新新闻

热搜词