当前位置：首页 > React

如何使用react

2026-02-25 21:35:27React

安装 React

通过 create-react-app 快速初始化项目：

npx create-react-app my-app
cd my-app
npm start

组件基础

React 组件分为函数组件和类组件。函数组件是推荐写法：

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

类组件写法（适用于旧版本）：

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

状态管理

使用 useState Hook 管理组件内部状态：

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

生命周期与副作用

通过 useEffect 处理副作用（如数据获取）：

import { useEffect } from 'react';

function DataFetcher() {
  useEffect(() => {
    fetch('api/data')
      .then(response => response.json())
      .then(data => console.log(data));
  }, []); // 空依赖数组表示仅运行一次
}

事件处理

使用驼峰命名法绑定事件：

function Button() {
  const handleClick = () => alert('Clicked!');
  return <button onClick={handleClick}>Click Me</button>;
}

条件渲染

通过逻辑运算符或三元表达式实现：

function Greeting({ isLoggedIn }) {
  return isLoggedIn ? <UserGreeting /> : <GuestGreeting />;
}

列表渲染

使用 map 渲染动态列表，需指定 key：

function NumberList({ numbers }) {
  return (
    <ul>
      {numbers.map((num) => (
        <li key={num.id}>{num.value}</li>
      ))}
    </ul>
  );
}

表单处理

受控组件示例（推荐）：

function NameForm() {
  const [value, setValue] = useState('');
  const handleSubmit = (e) => {
    e.preventDefault();
    alert('Submitted: ' + value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input 
        type="text" 
        value={value} 
        onChange={(e) => setValue(e.target.value)} 
      />
      <button type="submit">Submit</button>
    </form>
  );
}

组件通信

父组件通过 props 传递数据给子组件：

function Parent() {
  const data = "Hello from Parent";
  return <Child message={data} />;
}

function Child({ message }) {
  return <p>{message}</p>;
}