React

本文集文档发布于灏天文库

一、 React 基础

文档摘要

一、 React 基础 React 基础：从零开始构建用户界面 React 是一个用于构建用户界面的 JavaScript 库。它由 Facebook 开发和维护，被广泛应用于构建单页应用程序 (SPA) 和移动应用程序。React 的核心思想是组件化，它允许开发者将 UI 拆分成独立、可重用的组件，从而提高开发效率和代码可维护性。 React 的核心概念 在深入代码之前，我们先来了解一下 React 的几个核心概念： 组件 (Component): React 应用的基本构建块。组件是独立、可重用的代码片段，负责渲染 UI 的一部分。 JSX: JavaScript XML 的缩写，是一种允许在 JavaScript 代码中编写类似 HTML 结构的语法的扩展。

一、 React 基础

React 基础：从零开始构建用户界面

React 是一个用于构建用户界面的 JavaScript 库。它由 Facebook 开发和维护，被广泛应用于构建单页应用程序 (SPA) 和移动应用程序。React 的核心思想是组件化，它允许开发者将 UI 拆分成独立、可重用的组件，从而提高开发效率和代码可维护性。

1. React 的核心概念

在深入代码之前，我们先来了解一下 React 的几个核心概念：

  • 组件 (Component): React 应用的基本构建块。组件是独立、可重用的代码片段，负责渲染 UI 的一部分。

  • JSX: JavaScript XML 的缩写，是一种允许在 JavaScript 代码中编写类似 HTML 结构的语法的扩展。JSX 使得 UI 的描述更加直观。

  • 状态 (State): 组件的内部数据，用于控制组件的渲染行为。当状态发生变化时，组件会重新渲染。

  • 属性 (Props): 从父组件传递给子组件的数据。Props 是只读的，子组件不能修改父组件传递给它的 props。

  • 虚拟 DOM (Virtual DOM): React 使用虚拟 DOM 来提高性能。虚拟 DOM 是一个轻量级的 JavaScript 对象，代表了真实的 DOM 结构。当组件的状态发生变化时，React 会先更新虚拟 DOM，然后比较虚拟 DOM 和真实 DOM 的差异，最后只更新真实 DOM 中需要改变的部分。

2. 搭建 React 开发环境

在开始编写 React 代码之前，我们需要搭建一个 React 开发环境。常用的方法是使用 Create React App。

  1. 安装 Node.js 和 npm (或 yarn): 确保你的计算机上已经安装了 Node.js 和 npm (或 yarn)。你可以从 Node.js 官网下载并安装。

  2. 使用 Create React App 创建项目: 打开终端，运行以下命令：

    npx create-react-app my-app
cd my-app
npm start  # 或 yarn start
​

    这将会创建一个名为 my-app 的 React 项目，并启动开发服务器。在浏览器中打开 http://localhost:3000，你将会看到 React 的欢迎页面。

3. 第一个 React 组件

现在，让我们创建一个简单的 React 组件。在 src 目录下创建一个名为 MyComponent.js 的文件，并添加以下代码：

import React from 'react';
function MyComponent(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>This is my first React component.</p>
    </div>
  );
}
export default MyComponent;
​

这个组件接收一个名为 name 的 prop，并在页面上显示 "Hello, [name]!"。

接下来，在 src/App.js 文件中引入并使用 MyComponent：

import React from 'react';
import MyComponent from './MyComponent';
import './App.css';
function App() {
  return (
    <div className="App">
      <MyComponent name="React Developer" />
    </div>
  );
}
export default App;
​

保存文件，浏览器将会自动刷新，你将会看到 "Hello, React Developer!"。

4. 理解 JSX

在上面的例子中，我们使用了 JSX 语法。JSX 允许我们在 JavaScript 代码中编写类似 HTML 的结构。例如：

<div>
  <h1>Hello, {props.name}!</h1>
  <p>This is my first React component.</p>
</div>
​

JSX 并不是真正的 HTML，它会被 Babel 编译成 JavaScript 代码。上面的 JSX 代码会被编译成：

React.createElement(
  'div',
  null,
  React.createElement(
    'h1',
    null,
    'Hello, ',
    props.name,
    '!'
  ),
  React.createElement(
    'p',
    null,
    'This is my first React component.'
  )
);
​

JSX 使得 UI 的描述更加简洁和直观。

5. 使用 State 管理组件状态

State 是组件的内部数据，用于控制组件的渲染行为。当 state 发生变化时，组件会重新渲染。

让我们创建一个计数器组件，使用 state 来记录计数器的值。在 src 目录下创建一个名为 Counter.js 的文件，并添加以下代码：

import React, { useState } from 'react';
function Counter() {
  const [count, setCount] = useState(0);
  const increment = () => {
    setCount(count + 1);
  };
  const decrement = () => {
    setCount(count - 1);
  };
  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}
export default Counter;
​

在这个组件中，我们使用了 useState Hook 来创建 state。useState 接收一个初始值作为参数，并返回一个包含 state 值和更新 state 的函数的数组。在这个例子中，我们使用 count 存储计数器的值，使用 setCount 函数来更新计数器的值。

当点击 "Increment" 按钮时，increment 函数会被调用，setCount 函数会将 count 的值加 1。当点击 "Decrement" 按钮时，decrement 函数会被调用，setCount 函数会将 count 的值减 1。每次 setCount 被调用时，组件都会重新渲染，显示新的计数器值。

在 src/App.js 文件中引入并使用 Counter：

import React from 'react';
import MyComponent from './MyComponent';
import Counter from './Counter';
import './App.css';
function App() {
  return (
    <div className="App">
      <MyComponent name="React Developer" />
      <Counter />
    </div>
  );
}
export default App;
​

保存文件，浏览器将会自动刷新，你将会看到计数器组件。

6. 使用 Props 传递数据

Props 是从父组件传递给子组件的数据。Props 是只读的，子组件不能修改父组件传递给它的 props。

让我们修改 MyComponent 组件，使其能够接收一个 age prop，并在页面上显示用户的年龄。

import React from 'react';
function MyComponent(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>This is my first React component.</p>
      <p>Age: {props.age}</p>
    </div>
  );
}
export default MyComponent;
​

在 src/App.js 文件中，向 MyComponent 传递 age prop：

import React from 'react';
import MyComponent from './MyComponent';
import Counter from './Counter';
import './App.css';
function App() {
  return (
    <div className="App">
      <MyComponent name="React Developer" age={30} />
      <Counter />
    </div>
  );
}
export default App;
​

保存文件，浏览器将会自动刷新，你将会看到 "Age: 30"。

7. 事件处理

React 使用事件处理函数来响应用户的交互。事件处理函数通常是组件的方法，当特定的事件发生时，这些方法会被调用。

让我们修改 Counter 组件，使其能够在点击按钮时显示一个提示信息。

import React, { useState } from 'react';
function Counter() {
  const [count, setCount] = useState(0);
  const increment = () => {
    setCount(count + 1);
    alert('Incremented!');
  };
  const decrement = () => {
    setCount(count - 1);
    alert('Decremented!');
  };
  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}
export default Counter;
​

在这个例子中，我们在 increment 和 decrement 函数中添加了 alert 函数，当点击按钮时，会显示一个提示信息。

8. 条件渲染

在 React 中，我们可以使用条件语句来控制组件的渲染行为。例如，我们可以根据某个条件来显示不同的内容。

让我们修改 MyComponent 组件，使其能够根据用户的年龄来显示不同的问候语。

import React from 'react';
function MyComponent(props) {
  let greeting;
  if (props.age >= 18) {
    greeting = "Welcome, adult!";
  } else {
    greeting = "Hello, young one!";
  }
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>This is my first React component.</p>
      <p>Age: {props.age}</p>
      <p>{greeting}</p>
    </div>
  );
}
export default MyComponent;
​

在这个例子中，我们使用 if 语句来判断用户的年龄，并根据年龄来设置不同的 greeting。

9. 列表渲染

在 React 中，我们可以使用 map 函数来渲染列表。map 函数会将数组中的每个元素转换为一个 React 元素，然后将这些元素渲染到页面上。

让我们创建一个组件，用于显示一个列表。

import React from 'react';
function ListComponent(props) {
  const items = props.items;
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}
export default ListComponent;
​

在这个例子中，我们使用 map 函数将 items 数组中的每个元素转换为一个 li 元素。key prop 用于标识列表中的每个元素，React 使用 key prop 来优化列表的渲染性能。

在 src/App.js 文件中引入并使用 ListComponent：

import React from 'react';
import MyComponent from './MyComponent';
import Counter from './Counter';
import ListComponent from './ListComponent';
import './App.css';
function App() {
  const items = ['Item 1', 'Item 2', 'Item 3'];
  return (
    <div className="App">
      <MyComponent name="React Developer" age={30} />
      <Counter />
      <ListComponent items={items} />
    </div>
  );
}
export default App;
​

保存文件，浏览器将会自动刷新，你将会看到列表组件。

10. 总结

本文介绍了 React 的基础知识，包括组件、JSX、state、props、事件处理、条件渲染和列表渲染。通过学习这些基础知识，你可以开始构建简单的 React 应用程序。React 还有很多高级特性，例如 Hook、Context、Redux 等，你可以继续学习这些特性来构建更复杂的应用程序。希望这篇文章能够帮助你入门 React！

发布者: 作者: 转发
评论区 (0)
U
0/500