当前位置：首页 > React

实现一个react

2026-01-27 11:45:37React

创建 React 项目

使用 create-react-app 快速初始化项目：

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

组件基础结构

创建一个简单的函数组件：

import React from 'react';

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

export default Greeting;

状态管理

使用 useState Hook 管理组件状态：

import React, { useState } from 'react';

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

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

生命周期与副作用

使用 useEffect 处理副作用：

实现一个react

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

function DataFetcher() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []); // 空依赖数组表示仅在挂载时执行
}

事件处理

绑定事件处理器示例：

function Button() {
  const handleClick = (event) => {
    console.log('Button clicked', event);
  };

  return <button onClick={handleClick}>Click Me</button>;
}

条件渲染

使用三元运算符进行条件渲染：

function UserGreeting(props) {
  return props.isLoggedIn ? (
    <h1>Welcome back!</h1>
  ) : (
    <h1>Please sign in.</h1>
  );
}

列表渲染

使用 map 渲染列表：

实现一个react

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

表单处理

受控组件示例：

function NameForm() {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

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

样式处理

内联样式示例：

const divStyle = {
  color: 'blue',
  backgroundColor: 'lightgray'
};

function StyledDiv() {
  return <div style={divStyle}>Styled Content</div>;
}

组件通信

父子组件通信示例：

function Parent() {
  const [message, setMessage] = useState('Hello from parent');

  return <Child message={message} />;
}

function Child(props) {
  return <p>{props.message}</p>;
}

标签: react