当前位置：首页 > React

react如何踩开

2026-01-23 17:14:41React

React 开发基础

React 是一个用于构建用户界面的 JavaScript 库。要开始使用 React，需要安装 Node.js 和 npm（Node 包管理器）。可以通过以下命令创建一个新的 React 项目：

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

组件与状态管理

React 的核心是组件化开发。组件可以是函数组件或类组件。函数组件更简洁，类组件提供更多功能。以下是一个简单的函数组件示例：

function Welcome(props) {
  return <h1>Hello, {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 处理副作用。以下是一个使用 useEffect 的示例：

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

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

路由与状态管理库

对于单页应用，可以使用 React Router 进行路由管理：

react如何踩开

npm install react-router-dom

以下是一个简单的路由示例：

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

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

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

对于复杂的状态管理，可以使用 Redux 或 Context API。Redux 提供了一个全局状态容器：

npm install redux react-redux

性能优化

React 提供了多种性能优化手段，如 React.memo 和 useMemo。React.memo 用于避免不必要的组件渲染：

react如何踩开

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

useMemo 用于缓存计算结果：

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

测试与部署

使用 Jest 和 React Testing Library 进行测试：

npm install --save-dev @testing-library/react @testing-library/jest-dom

以下是一个简单的测试示例：

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

test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

部署 React 应用可以使用 npm run build 生成静态文件，然后上传到服务器或使用 Vercel、Netlify 等平台。

标签: react