React 教程
React 简介JSX 语法组件和 PropsState 和生命周期事件处理条件渲染列表和 Keys表单Hook 概述
首页 > React 教程

React 简介

React 是一个用于构建用户界面的 JavaScript 库。

什么是 React

React 是 Facebook 于 2013 年开源的 JavaScript 库，用于构建用户界面。React 采用组件化开发模式，让开发者可以用声明式的方式编写 UI，提高了代码的可维护性和可复用性。

React 的特点

React 具有以下特点：组件化开发、虚拟 DOM、单向数据流、JSX 语法、丰富的生态系统。

JSX 语法

JSX 是 JavaScript 的语法扩展，看起来像 HTML。

JSX 基础

JSX 是一种 JavaScript 的语法扩展，可以在 JavaScript 中编写类似 HTML 的标记。

const element = <h1>Hello, world!</h1>;

在 JSX 中嵌入表达式

可以在 JSX 中使用大括号嵌入任何 JavaScript 表达式。

const name = "Tom";
const element = <h1>Hello, {name}!</h1>;

const sum = <p>2 + 3 = {2 + 3}</p>;

组件和 Props

组件是 React 的核心概念，用于封装可复用的 UI 代码。

函数组件

函数组件是最简单的组件形式，接受 props 并返回 JSX。

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

类组件

类组件使用 ES6 class 语法，需要继承 React.Component。

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Props 只读性

组件必须像纯函数一样保护自己的 props，不应该修改传入的 props。

State 和生命周期

State 是组件的内部状态，允许组件随时间变化。

使用 State

在函数组件中使用 useState Hook 管理状态。

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

事件处理

在 React 中处理 DOM 事件。

事件处理函数

React 事件的命名采用驼峰式，而不是纯小写。

function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log("Clicked");
  }
  
  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );
}

条件渲染

根据条件渲染不同的内容。

条件运算符

使用三元运算符或逻辑运算符进行条件渲染。

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  
  return (
    <div>
      The user is <b>{isLoggedIn ? "currently" : "not"}</b> logged in.
    </div>
  );
}

列表和 Keys

渲染多个相同的组件。

渲染列表

使用 map 方法渲染列表。

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) => (
    <li key={number.toString()}>
      {number}
    </li>
  ));
  return <ul>{listItems}</ul>;
}

表单

在 React 中处理表单输入。

受控组件

表单元素的值由 React 状态控制。

function NameForm() {
  const [name, setName] = useState("");
  
  function handleSubmit(e) {
    e.preventDefault();
    alert("Submit: " + name);
  }
  
  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input 
          type="text" 
          value={name} 
          onChange={(e) => setName(e.target.value)} 
        />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

Hook 概述

Hook 是 React 16.8 的新特性，允许在函数组件中使用 state。

useState

useState 是最常用的 Hook，用于在函数组件中添加状态。

const [state, setState] = useState(initialState);

useEffect

useEffect 用于在组件中执行副作用操作。

import { useEffect } from "react";

useEffect(() => {
  document.title = "You clicked " + count + " times";
}, [count]);
上一篇Vue.js 教程
下一篇Node.js 教程