React常用语法和基础使用

一、React 基础前置
二、核心常用语法
三、常用辅助语法
- 总结

一、React 基础前置

核心思想：组件化开发（将页面拆分为独立可复用的组件）、数据驱动视图（数据变更自动更新页面，无需手动操作 DOM）
两种组件形式：函数组件（推荐）、类组件（旧版，逐步淘汰）
必备前置：JSX 语法（JavaScript + XML，React 专属的页面描述语法）

二、核心常用语法

1. JSX 语法（页面构建核心）

JSX 是 React 中描述 UI 的语法，看似 HTML 实则是 JavaScript 语法糖，最终会被编译为 React.createElement()。

常用规则 & 语法

import React from 'react';

// 1. 基本结构（类似 HTML，但有差异）
function BasicJSX() {
  // 2. 嵌入 JavaScript 表达式（用 {} 包裹，支持变量、运算、函数调用等）
  const userName = "张三";
  const age = 28;
  const getGreeting = () => `你好，${userName}`;

  return (
    <div className="user-card"> {/* 3. 注意：class → className，for → htmlFor（避免与 JS 关键字冲突） */}
      <h2>{getGreeting()}</h2>
      <p>年龄：{age + 1}</p>
      <p>是否成年：{age >= 18 ? "是" : "否"}</p>

      {/* 4. 列表渲染（必须加 key，推荐用唯一 ID，避免索引） */}
      <ul>
        {["吃饭", "睡觉", "打代码"].map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>

      {/* 5. 条件渲染（两种方式：三元表达式 / 逻辑与 &&） */}
      {age >= 18 && <button>查看成人内容</button>}

      {/* 6. 内联样式（对象形式，属性名驼峰命名） */}
      <div style={{ color: "blue", fontSize: "16px", marginTop: "10px" }}>
        内联样式示例
      </div>

      {/* 7. 自闭和标签（必须加 /，如 input、img 等） */}
      <input type="text" placeholder="请输入内容" />
      <img src="https://xxx.jpg" alt="示例图片" />
    </div>
  );
}

export default BasicJSX;

核心注意点

一个组件的返回值只能有一个根节点（可使用 <> 空片段/React.Fragment 避免多余 DOM 嵌套）
JSX 中注释：{/* 这里是注释 */}
事件名采用驼峰命名（如 onClick 而非 onclick）

2. 函数组件 & Props（组件传参核心）

（1）定义函数组件

最简单的组件形式，本质是返回 JSX 的 JavaScript 函数。

// 无状态简单组件
function HelloWorld() {
  return <h1>Hello React!</h1>;
}

（2）Props（组件间传参）

Props 是父组件传递给子组件的只读数据（子组件不可修改 Props，单向数据流）。

// 子组件：接收 Props
function ProductCard(props) {
  // 方式1：直接通过 props.xxx 获取
  // 方式2：解构赋值（更常用，简化代码）
  const { productName, price, stock } = props;

  return (
    <div className="product-card">
      <h3>{productName}</h3>
      <p>价格：¥{price}</p>
      <p>库存：{stock > 0 ? `${stock} 件` : "缺货"}</p>
    </div>
  );
}

// 父组件：传递 Props
function ProductList() {
  return (
    <div>
      <h2>商品列表</h2>
      {/* 传递 Props（类似 HTML 属性） */}
      <ProductCard productName="华为Mate 60 Pro" price={6999} stock={100} />
      <ProductCard productName="iPhone 15" price={5999} stock={0} />
    </div>
  );
}

export default ProductList;

3. React Hook（状态管理 & 生命周期核心）

Hook 是 React 16.8 新增特性，让函数组件拥有状态管理和生命周期能力，最常用的两个 Hook：useState、useEffect。

（1）useState（管理组件内部状态）

用于定义可修改的组件状态，状态变更会触发组件重新渲染。

import React, { useState } from 'react';

function Counter() {
  // 语法：const [状态变量, 状态修改函数] = useState(初始值);
  const [count, setCount] = useState(0);
  const [isShow, setIsShow] = useState(true);

  // 修改状态（必须通过状态修改函数，不可直接赋值 count = count + 1）
  const handleAdd = () => {
    // 方式1：直接传递新值
    setCount(count + 1);

    // 方式2：传递回调函数（依赖上一次状态值时推荐）
    // setCount(prevCount => prevCount + 1);
  };

  return (
    <div>
      <h2>计数器：{count}</h2>
      <button onClick={handleAdd}>点击+1</button>
      <button onClick={() => setCount(0)}>重置</button>
      <br />
      <button onClick={() => setIsShow(!isShow)}>
        {isShow ? "隐藏计数器" : "显示计数器"}
      </button>
      {isShow && <p>当前计数：{count}</p>}
    </div>
  );
}

export default Counter;

（2）useEffect（处理副作用 & 生命周期）

用于处理组件的副作用（如数据请求、DOM 操作、定时器、订阅等），替代类组件的 componentDidMount、componentDidUpdate、componentWillUnmount。

import React, { useState, useEffect } from 'react';

function UserData() {
  const [userList, setUserList] = useState([]);

  // 语法：useEffect(副作用函数, 依赖数组)
  useEffect(() => {
    // 1. 副作用逻辑（这里模拟接口请求获取用户数据）
    const fetchUserList = async () => {
      // 真实项目中替换为真实接口
      const mockData = [
        { id: 1, name: "张三", age: 28 },
        { id: 2, name: "李四", age: 30 }
      ];
      setUserList(mockData);
    };

    fetchUserList();

    // 2. 清理函数（可选，组件卸载或依赖变更时执行，用于取消订阅、清除定时器等）
    return () => {
      console.log("组件卸载/依赖变更，执行清理操作");
    };
  }, []); // 依赖数组：[] 表示仅在组件挂载时执行一次（类似 componentDidMount）

  // 依赖数组说明：
  // - 不传：组件每次渲染都执行（不推荐）
  // - [xxx]：仅当 xxx 变更时执行（类似 componentDidUpdate）

  return (
    <div>
      <h2>用户列表</h2>
      <ul>
        {userList.map(user => (
          <li key={user.id}>{user.name} - {user.age} 岁</li>
        ))}
      </ul>
    </div>
  );
}

export default UserData;

4. 事件处理

React 事件采用驼峰命名，事件处理函数传递时注意语法（避免直接执行）。

import React, { useState } from 'react';

function EventDemo() {
  const [inputValue, setInputValue] = useState("");

  // 1. 定义事件处理函数
  const handleInputChange = (e) => {
    // 获取输入框值：e.target.value
    setInputValue(e.target.value);
  };

  // 2. 带参数的事件处理函数
  const handleClick = (msg) => {
    alert(msg + "：" + inputValue);
  };

  return (
    <div>
      {/* 方式1：传递函数引用（推荐，无额外性能开销） */}
      <input 
        type="text" 
        value={inputValue} 
        onChange={handleInputChange} 
        placeholder="请输入内容" 
      />

      {/* 方式2：箭头函数传递参数（需要传递参数时使用） */}
      <button onClick={() => handleClick("你输入的内容是")}>
        点击查看输入内容
      </button>
    </div>
  );
}

export default EventDemo;

三、常用辅助语法

组件导出/导入
- 默认导出：export default 组件名，导入：import 组件名 from "./组件路径"
- 命名导出：export const 组件名 = () => {}，导入：import { 组件名 } from "./组件路径"

条件渲染优化：使用变量存储 JSX 片段，避免过多嵌套

function ConditionDemo({ isLogin }) {
  const loginView = <button>登录</button>;
  const userView = <span>欢迎回来，张三</span>;

  return <div>{isLogin ? userView : loginView}</div>;
}

Props 默认值：为组件 Props 设置默认值，避免未传递时报错

function ProductCard(props) {
  const { productName = "默认商品", price = 0, stock = 0 } = props;
  // ...
}

总结

React 核心是组件化和数据驱动视图，主流使用「函数组件 + Hook」开发；
JSX 是页面构建语法，核心规则：{} 嵌表达式、className 替代 class、列表渲染加 key；
常用核心语法：Props（组件传参）、useState（状态管理）、useEffect（副作用处理）、事件处理；
关键原则：Props 只读、状态修改必须用 setXxx、副作用统一放在 useEffect 中处理。

这些语法覆盖了 React 80% 的日常开发场景，掌握后可搭建基础的 React 项目页面。

posted on 2026-01-30 19:35 (Play) 阅读(3) 评论(0) 收藏举报