当前位置：首页 > React

如何实操react

2026-01-14 10:59:59React

安装 React 环境

使用 create-react-app 快速搭建项目：

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

项目启动后默认在 http://localhost:3000 运行。

组件开发

创建函数组件：

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

事件处理

绑定事件并传递参数：

function AlertButton({ message, children }) {
  return <button onClick={() => alert(message)}>{children}</button>;
}

列表渲染

使用 map 渲染动态列表：

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

生命周期（类组件）

常用生命周期方法：

class Timer extends React.Component {
  componentDidMount() {
    this.timerID = setInterval(() => this.tick(), 1000);
  }
  componentWillUnmount() {
    clearInterval(this.timerID);
  }
  tick() {
    this.setState({ time: new Date() });
  }
  render() {
    return <div>{this.state.time.toLocaleTimeString()}</div>;
  }
}

使用 Effect Hook

替代生命周期：

import { useEffect } from 'react';

function Timer() {
  const [time, setTime] = useState(new Date());
  useEffect(() => {
    const timerID = setInterval(() => setTime(new Date()), 1000);
    return () => clearInterval(timerID);
  }, []);
  return <div>{time.toLocaleTimeString()}</div>;
}

路由配置

安装 react-router-dom：

npm install react-router-dom

基本路由示例：

如何实操react

import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
}

标签: react