当前位置：首页 > React

react如何用

2026-02-11 12:16:48React

安装 React

确保已安装 Node.js（建议版本 12 或更高）。通过以下命令创建新的 React 应用：

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

基础组件编写

React 组件通常以函数或类形式定义。以下是一个函数组件的例子：

import React from 'react';

function Hello() {
  return <h1>Hello, React!</h1>;
}

export default Hello;

状态管理

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

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

事件处理

通过 props 传递事件处理函数：

react如何用

function Button({ onClick }) {
  return <button onClick={onClick}>Click Me</button>;
}

function App() {
  const handleClick = () => alert('Button clicked!');
  return <Button onClick={handleClick} />;
}

列表渲染

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

function TodoList({ items }) {
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.text}</li>
      ))}
    </ul>
  );
}

生命周期与副作用

类组件使用生命周期方法，函数组件使用 useEffect：

react如何用

import React, { useEffect } from 'react';

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

组件通信

父组件通过 props 向子组件传递数据，子组件通过回调函数通知父组件：

function Parent() {
  const [value, setValue] = useState('');
  return <Child value={value} onChange={setValue} />;
}

function Child({ value, onChange }) {
  return <input value={value} onChange={(e) => onChange(e.target.value)} />;
}

路由配置

使用 React Router 实现页面导航：

npm install react-router-dom

配置示例：

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

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