当前位置：首页 > React

如何用react写页面

2026-01-24 19:09:36React

创建React项目

使用create-react-app快速初始化项目，需提前安装Node.js环境。运行命令：

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

状态管理

在类组件中使用state：

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };
  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>+</button>
      </div>
    );
  }
}

函数组件使用Hooks：

import { useState } from 'react';
function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

生命周期与副作用

类组件生命周期方法：

componentDidMount() {
  console.log('Component mounted');
}
componentDidUpdate() {
  console.log('Component updated');
}
componentWillUnmount() {
  console.log('Component will unmount');
}

函数组件使用useEffect：

useEffect(() => {
  console.log('Effect runs');
  return () => console.log('Cleanup');
}, [dependency]);

路由配置

安装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>
      <Link to="/about">About</Link>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
}

样式处理

内联样式：

<div style={{ color: 'red', fontSize: 20 }}>Text</div>

CSS Modules：

import styles from './Button.module.css';
function Button() {
  return <button className={styles.error}>Click</button>;
}

数据获取

使用fetch或axios：

useEffect(() => {
  fetch('https://api.example.com/data')
    .then(res => res.json())
    .then(data => setData(data));
}, []);

性能优化

React.memo缓存组件：

const MemoizedComponent = React.memo(MyComponent);

useCallback缓存函数：

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

状态提升

当多个组件需要共享状态时，将状态提升到最近的共同父组件：

function Parent() {
  const [sharedState, setSharedState] = useState(null);
  return (
    <>
      <ChildA state={sharedState} setState={setSharedState} />
      <ChildB state={sharedState} setState={setSharedState} />
    </>
  );
}

上下文API

跨组件层级传递数据：

如何用react写页面

const ThemeContext = React.createContext('light');
function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}
function Toolbar() {
  return <ThemedButton />;
}
function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button theme={theme}>Button</button>;
}