当前位置：首页 > React

如何用react

2026-01-13 10:42:37React

使用React的基本步骤

安装Node.js和npm
确保系统已安装Node.js和npm。Node.js自带npm，可从官网下载安装包。安装完成后，通过命令行验证版本：

node -v
npm -v

创建React项目
使用Create React App快速搭建项目结构：

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

此命令会生成一个基础React项目并启动开发服务器，默认访问地址为http://localhost:3000。

核心概念与用法

组件编写
React组件分为函数组件和类组件。函数组件是现代推荐写法：

import React from 'react';

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

状态管理
使用useState钩子管理组件内部状态：

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

事件处理
React事件采用驼峰命名，需传入函数而非字符串：

如何用react

function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log('Link clicked');
  }
  return <a href="#" onClick={handleClick}>Click me</a>;
}

进阶功能

生命周期与副作用
使用useEffect处理副作用和生命周期：

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

function Example() {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetch('/api/data').then(res => setData(res.json()));
  }, []); // 空数组表示仅运行一次
}

组件通信
父组件通过props传递数据，子组件通过回调函数通信：

function Parent() {
  const [value, setValue] = useState('');
  return <Child onChange={setValue} />;
}

function Child({ onChange }) {
  return <input onChange={e => onChange(e.target.value)} />;
}

项目优化

代码分割
使用React.lazy实现动态导入：

如何用react

const OtherComponent = React.lazy(() => import('./OtherComponent'));
function MyComponent() {
  return (
    <React.Suspense fallback={<div>Loading...</div>}>
      <OtherComponent />
    </React.Suspense>
  );
}

性能优化
通过React.memo避免不必要的渲染：

const MemoizedComponent = React.memo(function MyComponent(props) {
  // 仅在props变化时重新渲染
});

生态工具

路由管理
使用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>
      <Route exact path="/" component={Home} />
    </Router>
  );
}

状态管理库
Redux或Context API适用于复杂状态：

const MyContext = React.createContext();
function App() {
  return (
    <MyContext.Provider value={{ theme: 'dark' }}>
      <ChildComponent />
    </MyContext.Provider>
  );
}