当前位置：首页 > React

react框架如何使用

2026-03-31 11:14:57React

安装 React

确保已安装 Node.js（建议版本 14 或更高）。通过以下命令创建新的 React 项目：

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

这将启动开发服务器，默认在 http://localhost:3000 打开应用。

项目结构

核心文件和目录说明：

src/App.js：主组件入口文件
src/index.js：应用渲染入口
public/index.html：HTML 模板
package.json：依赖和脚本配置

创建组件

函数组件示例：

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

类组件示例：

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

状态管理

使用 useState Hook 管理状态：

react框架如何使用

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

生命周期方法

类组件中使用生命周期方法：

class Clock extends React.Component {
  componentDidMount() {
    this.timerID = setInterval(() => this.tick(), 1000);
  }
  componentWillUnmount() {
    clearInterval(this.timerID);
  }
  tick() {
    this.setState({ time: new Date() });
  }
}

事件处理

处理事件的方式：

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

条件渲染

根据条件显示不同内容：

react框架如何使用

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

列表渲染

使用 map() 渲染列表：

function NumberList(props) {
  const numbers = props.numbers;
  return (
    <ul>
      {numbers.map((number) => (
        <ListItem key={number.toString()} value={number} />
      ))}
    </ul>
  );
}

表单处理

受控组件示例：

function NameForm() {
  const [value, setValue] = useState('');
  const handleChange = (event) => {
    setValue(event.target.value);
  };
  return (
    <input type="text" value={value} onChange={handleChange} />
  );
}

路由配置

使用 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} />
      <Route path="/about" component={About} />
    </Router>
  );
}