React 是一个流行的 JavaScript 库，用于构建动态用户界面。它提供了一种声明式的编程模型，使得开发者可以更轻松地构建复杂的应用程序。在开始使用 React 构建应用程序之前，有一些基础知识必须掌握。本文将介绍这些基础知识，并提供一些示例代码来帮助你更好地理解。
JSX
JSX 是一个类似于 HTML 的语法扩展，允许我们在 JavaScript 中编写类似 HTML 的代码。在 React 中，我们使用 JSX 来描述组件的视图层。以下是一个简单的 JSX 示例：
const element = <h1>Hello, world!</h1>;
在上面的代码中，我们使用了 <h1> 标签来创建一个元素，并将其赋值给变量 element。注意，这里我们使用了花括号 {} 来嵌入 JavaScript 表达式，以便在元素中添加动态内容：
const name = "John";
const element = <h1>Hello, {name}!</h1>;在上面的代码中，我们使用了 JavaScript 变量 name，将其包裹在花括号中并嵌入到了 JSX 元素中，从而实现了动态渲染。
组件
在 React 中，我们通常将 UI 拆分为一系列独立的、可重用的组件。每个组件都包含自己的状态以及渲染逻辑。以下是一个简单的组件示例：
function Welcome(props) {
return <h1>Hello, {props.name}!</h1>;
}在上面的代码中，我们定义了一个名为 Welcome 的函数组件，它接受一个名为 props 的参数，并返回一个 JSX 元素。这里我们使用了 props 来传递数据到组件中并进行动态渲染。
状态和生命周期
React 组件可以具有内部状态。状态是组件数据的一种方式，它可以随着时间的推移而改变。组件生命周期钩子则允许您在组件的不同阶段执行操作。以下是一个状态和生命周期示例：
-- -------------------- ---- -------
----- ----- ------- --------------- -
------------------ -
-------------
---------- - - ----- --- ------ --
-
------------------- -
------------ - -------------- -- ------------ ------
-
---------------------- -
----------------------------
-
------ -
--------------- ----- --- ------ ---
-
-------- -
------ -
-----
---------- -----------
------ -- --------------------------------------------
------
--
-
-在上面的代码中，我们定义了一个名为 Clock 的类组件。它具有一个名为 date 的状态，并在组件挂载后启动了一个定时器，每秒更新一次状态。我们还使用生命周期钩子 componentWillUnmount() 来清除定时器。
总结
React 是一个流行的前端框架，用于构建动态用户界面。在开始使用 React 构建应用程序之前，必须掌握基础知识，如 JSX、组件、状态和生命周期。本文提供了一些示例代码来帮助您更好地理解这些基本概念。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5182