当前位置：首页 > React

react如何做

2026-02-12 07:02:57React

React 基础使用

安装 React 可以通过 npm 或 yarn 进行。确保 Node.js 环境已配置完成。

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

创建完成后，项目会自动启动开发服务器，默认端口为 3000。

组件开发

React 的核心是组件化开发。组件分为函数组件和类组件两种形式。

函数组件示例：

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

类组件示例：

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

状态管理

React 提供了 useState Hook 用于在函数组件中管理状态。

import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

生命周期

类组件中有完整的生命周期方法，函数组件则通过 useEffect Hook 实现类似功能。

import React, { useEffect } from 'react';

function Example() {
  useEffect(() => {
    console.log('Component mounted or updated');
    return () => {
      console.log('Component will unmount');
    };
  }, []); // 空数组表示只在挂载和卸载时执行
}

事件处理

React 事件使用驼峰命名法，需要传入函数而非字符串。

function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');
  }

  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );
}

条件渲染

可以使用 JavaScript 运算符如 if 或三元运算符进行条件渲染。

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

列表渲染

使用 map() 函数渲染列表数据时，需要为每个列表项分配唯一的 key 属性。

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>
    {number}
  </li>
);

表单处理

React 表单元素通常维护自己的状态，称为受控组件。

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
  }

  handleChange = (event) => {
    this.setState({value: event.target.value});
  }

  handleSubmit = (event) => {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

上下文 API

Context 提供了一种在组件树间共享值的方式，无需显式地通过组件层级传递 props。

const ThemeContext = React.createContext('light');

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

function Toolbar() {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button theme={theme}>I am styled by theme context!</button>;
}

性能优化

使用 React.memo 进行组件记忆，避免不必要的渲染。

const MyComponent = React.memo(function MyComponent(props) {
  /* 使用 props 渲染 */
});

对于类组件，可以使用 shouldComponentUpdate 方法控制更新。

shouldComponentUpdate(nextProps, nextState) {
  return nextProps.value !== this.props.value;
}

路由配置

使用 react-router-dom 实现前端路由功能。

react如何做

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

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
          </ul>
        </nav>

        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </div>
    </Router>
  );
}