当前位置：首页 > React

react实现代码

2026-01-26 19:28:16React

React 实现代码的基本结构

React 是一个用于构建用户界面的 JavaScript 库。以下是一个简单的 React 组件实现代码示例：

import React from 'react';

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

export default MyComponent;

组件状态管理

使用 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 Hook 处理副作用：

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

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(prev => prev + 1);
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return <div>Seconds: {seconds}</div>;
}

组件间通信

父组件向子组件传递 props：

function Parent() {
  const message = "Hello from parent";

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

function Child({ message }) {
  return <div>{message}</div>;
}

条件渲染

根据条件渲染不同内容：

react实现代码

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

列表渲染

使用 map 渲染列表：

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

表单处理

受控组件处理表单：

function NameForm() {
  const [name, setName] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`Submitted name: ${name}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

样式处理

内联样式和 CSS 类：

react实现代码

function StyledComponent() {
  const style = {
    color: 'blue',
    fontSize: '20px'
  };

  return (
    <div>
      <p style={style}>Inline styled text</p>
      <p className="text-red">Class styled text</p>
    </div>
  );
}

高阶组件

创建高阶组件：

function withLogging(WrappedComponent) {
  return function(props) {
    console.log('Rendering:', WrappedComponent.name);
    return <WrappedComponent {...props} />;
  };
}

const EnhancedComponent = withLogging(MyComponent);

Context API

使用 Context 共享数据：

const ThemeContext = React.createContext('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>Themed Button</button>;
}

自定义 Hook

创建可重用的自定义 Hook：

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return width;
}

function MyComponent() {
  const width = useWindowWidth();
  return <div>Window width: {width}</div>;
}