当前位置：首页 > React

如何用react

2026-02-11 13:34:38React

安装React环境

使用Create React App快速搭建项目，确保已安装Node.js（建议版本≥14）。在终端运行以下命令创建新项目：

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>;
  }
}

状态管理

函数组件使用Hooks管理状态：

import { useState } from 'react';

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

生命周期控制

类组件通过生命周期方法控制流程：

class Clock extends React.Component {
  componentDidMount() {
    this.timerID = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({ time: new Date() });
  }
}

事件处理

采用驼峰式命名处理事件：

function ActionLink() {
  const handleClick = (e) => {
    e.preventDefault();
    console.log('Link clicked');
  };

  return <a href="#" onClick={handleClick}>Click me</a>;
}

列表渲染

使用map()方法渲染动态列表：

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

表单处理

受控组件实现表单双向绑定：

function NameForm() {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <input type="text" value={value} onChange={handleChange} />
  );
}