当前位置：首页 > React

动手实现react

2026-01-26 13:21:19React

React 基础实现

创建一个简单的 React 应用需要安装必要的依赖并编写组件代码。以下是实现步骤：

安装 Node.js 和 npm
确保系统已安装 Node.js（包含 npm）。可以通过命令 node -v 和 npm -v 检查版本。

初始化项目
在项目目录下运行 npx create-react-app my-app，生成 React 项目骨架。进入项目目录 cd my-app。

启动开发服务器
运行 npm start，默认在 http://localhost:3000 启动应用。

编写组件

创建一个函数组件
在 src 目录下新建文件 MyComponent.js，写入以下代码：

import React from 'react';

function MyComponent() {
  return <h1>Hello, React!</h1>;
}

export default MyComponent;

在根组件中使用
修改 src/App.js，引入并使用自定义组件：

import MyComponent from './MyComponent';

function App() {
  return (
    <div>
      <MyComponent />
    </div>
  );
}

export default App;

状态管理

使用 useState Hook
在组件中添加状态管理功能。修改 MyComponent.js：

import React, { useState } from 'react';

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

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

生命周期与副作用

使用 useEffect Hook
模拟组件挂载和更新时的副作用：

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

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

  useEffect(() => {
    console.log('Component updated or mounted');
    return () => console.log('Component will unmount');
  }, [count]);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}