当前位置：首页 > React

react怎么实现

2026-01-26 14:35:15React

React 实现的基本步骤

安装 React 环境需要 Node.js 和 npm（或 yarn）。通过以下命令创建一个新的 React 项目：

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

状态管理

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

生命周期方法

在类组件中可以使用生命周期方法，如 componentDidMount、componentDidUpdate 和 componentWillUnmount：

class Example extends React.Component {
  componentDidMount() {
    console.log('Component mounted');
  }

  render() {
    return <div>Lifecycle example</div>;
  }
}

事件处理

React 事件处理采用驼峰命名法：

function handleClick() {
  console.log('Button clicked');
}

<button onClick={handleClick}>Click me</button>

条件渲染

使用 JavaScript 的条件语句进行条件渲染：

function Greeting({ isLoggedIn }) {
  return isLoggedIn ? <UserGreeting /> : <GuestGreeting />;
}

列表渲染

使用 map 方法渲染列表：

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

<ul>{listItems}</ul>

表单处理

表单元素的值通常由 React 控制：

function NameForm() {
  const [name, setName] = useState('');

  function handleChange(event) {
    setName(event.target.value);
  }

  return (
    <form>
      <input type="text" value={name} onChange={handleChange} />
    </form>
  );
}

样式处理

可以通过内联样式或 CSS 类名添加样式：

const divStyle = {
  color: 'blue',
  fontSize: '20px'
};

<div style={divStyle}>Styled div</div>

或使用 CSS 模块：

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

<div className={styles.myClass}>Styled div</div>

路由管理

使用 React Router 实现路由功能：

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

状态提升

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

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

  return (
    <div>
      <Child count={count} onIncrement={() => setCount(count + 1)} />
      <Child count={count} onIncrement={() => setCount(count + 1)} />
    </div>
  );
}

上下文 API

使用 Context API 跨组件层级传递数据：

const MyContext = React.createContext();

function App() {
  return (
    <MyContext.Provider value="some value">
      <Child />
    </MyContext.Provider>
  );
}

function Child() {
  const value = useContext(MyContext);
  return <div>{value}</div>;
}

性能优化

使用 React.memo 或 useMemo 优化性能：

const MemoizedComponent = React.memo(function MyComponent(props) {
  /* render using props */
});

function ExpensiveComponent({ value }) {
  const computedValue = useMemo(() => computeExpensiveValue(value), [value]);
  return <div>{computedValue}</div>;
}

错误边界

使用错误边界捕获组件树中的 JavaScript 错误：

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

测试 React 组件

使用 Jest 和 React Testing Library 测试组件：

import { render, screen } from '@testing-library/react';
import MyComponent from './MyComponent';

test('renders component', () => {
  render(<MyComponent />);
  expect(screen.getByText('Hello')).toBeInTheDocument();
});