当前位置：首页 > React

如何用react构建用户界面

2026-01-25 05:12:32React

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

或使用 ES6 类组件：

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

类组件通过 this.state 和 this.setState 管理状态。

处理事件

通过 onClick、onChange 等属性绑定事件处理器：

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

数据传递

使用 props 实现父组件向子组件传递数据：

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

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

列表渲染

通过 map 方法动态渲染列表，需为每项添加唯一 key：

function TodoList() {
  const todos = ['Task 1', 'Task 2', 'Task 3'];
  return (
    <ul>
      {todos.map((item, index) => 
        <li key={index}>{item}</li>
      )}
    </ul>
  );
}

样式处理

可通过内联样式、CSS 模块或第三方库（如 styled-components）添加样式：

// 内联样式
const style = { color: 'red' };
function StyledText() {
  return <p style={style}>Red text</p>;
}

// CSS 模块
import styles from './App.module.css';
function ModuleStyled() {
  return <p className={styles.error}>Error text</p>;
}

生命周期管理

函数组件使用 useEffect Hook 处理副作用：

import { useEffect } from 'react';

function Timer() {
  useEffect(() => {
    const timer = setInterval(() => console.log('Tick'), 1000);
    return () => clearInterval(timer); // 清理函数
  }, []);
  return <div>Check console</div>;
}

类组件使用 componentDidMount、componentWillUnmount 等方法。

路由配置

使用 React Router 实现页面导航：

npm install react-router-dom

配置路由示例：

import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

状态管理进阶

复杂应用可使用 Context API 或 Redux：

如何用react构建用户界面

// Context API 示例
const ThemeContext = React.createContext('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  return <Button />;
}

function Button() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>Themed button</button>;
}