React 快速入门-核心语法

摘要

本人是一个 React 新手，目前工作中需要用到 React 的相关知识，所以初步做了了解。这里主要是分享平常使用的一些案例。本章节主要是 React 核心函数使用内容。

JSX 语法注意事项

基本使用

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

注意事项：

• 自闭合标签：

  <img src="image.jpg" alt="description" />
  

• 属性值使用大括号：

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

条件渲染与数据渲染

• 条件渲染：

  const isLoggedIn = true;
  return (
    <div>{isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>}</div>
  );
  

• 数据渲染：

  const numbers = [1, 2, 3, 4, 5];
  const listItems = numbers.map((number) => (
    <li key={number.toString()}>{number}</li>
  ));
  return <ul>{listItems}</ul>;
  

前端渲染与状态管理

状态管理基本概念：

• 使用 useState来管理组件内部状态。
• 状态变化会触发组件重新渲染。

useState 示例：

import React, { 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>
  );
}

对象属性修改与数组操作

• 对象属性修改：

  const [user, setUser] = useState({ name: "John", age: 30 });
  
  const updateAge = () => {
    setUser((prevUser) => ({
      ...prevUser,
      age: prevUser.age + 1,
    }));
  };
  
  return (
    <div>
      <p>Name: {user.name}</p>
      <p>Age: {user.age}</p>
      <button onClick={updateAge}>Increase Age</button>
    </div>
  );
  

• 数组操作：

  const [items, setItems] = useState([1, 2, 3, 4, 5]);
  
  const addItem = () => {
    setItems([...items, items.length + 1]);
  };
  
  return (
    <div>
      <ul>
        {items.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
      <button onClick={addItem}>Add Item</button>
    </div>
  );