当前位置：首页 > React

如何用react

2026-02-25 23:49:42React

安装 React

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

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

或使用 Vite 构建工具：

npm create vite@latest my-app --template react
cd my-app
npm install
npm run dev

基础组件开发

创建一个函数组件：

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

类组件写法：

class Greeting 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(res => res.json())
      .then(console.log);
    return () => console.log('Cleanup');
  }, []); // 空数组表示仅运行一次
}

事件处理

内联事件绑定：

<button onClick={(e) => console.log(e.target)}>
  Click me
</button>

类组件中的方法绑定：

class EventDemo extends React.Component {
  handleClick = () => {
    console.log('Clicked');
  };

  render() {
    return <button onClick={this.handleClick}>Click</button>;
  }
}

表单控制

受控组件示例：

function Form() {
  const [value, setValue] = useState('');
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input 
        value={value} 
        onChange={(e) => setValue(e.target.value)} 
      />
    </form>
  );
}

路由配置

使用 React Router v6：

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

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

样式处理

CSS Modules 用法：

import styles from './Button.module.css';

function Button() {
  return <button className={styles.primary}>Submit</button>;
}

内联样式对象：

const style = {
  color: 'red',
  fontSize: '20px'
};

<div style={style}>Text</div>

性能优化

React.memo 缓存组件：

const MemoizedComponent = React.memo(function Component({ prop }) {
  return <div>{prop}</div>;
});

useCallback 避免重复渲染：

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

全局状态

使用 Context API：

如何用react

const ThemeContext = React.createContext();

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

function Toolbar() {
  const theme = useContext(ThemeContext);
  return <div>{theme}</div>;
}