当前位置：首页 > React

react 组件实现

2026-01-26 12:15:20React

React 组件实现方式

React 组件是构建用户界面的核心单元，主要分为函数组件和类组件两种形式。以下是具体实现方法：

函数组件实现

函数组件是使用 JavaScript 函数定义的组件，简洁且易于理解：

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

箭头函数写法：

const Greeting = (props) => <h1>Hello, {props.name}</h1>;

类组件实现

类组件通过 ES6 的 class 定义，可以包含状态和生命周期方法：

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

组件状态管理

函数组件中使用 Hooks 管理状态：

import { useState } from 'react';

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

类组件中使用 state 对象：

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    return (
      <button onClick={() => this.setState({ count: this.state.count + 1 })}>
        Clicked {this.state.count} times
      </button>
    );
  }
}

组件生命周期

类组件中可以使用的生命周期方法示例：

class Example extends React.Component {
  componentDidMount() {
    console.log('Component mounted');
  }

  componentDidUpdate() {
    console.log('Component updated');
  }

  componentWillUnmount() {
    console.log('Component will unmount');
  }

  render() {
    return <div>Lifecycle Example</div>;
  }
}

函数组件中使用 useEffect 替代生命周期：

import { useEffect } from 'react';

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

  return <div>Lifecycle Example</div>;
}

组件间通信

父组件向子组件传递 props：

function Parent() {
  return <Child message="Hello from parent" />;
}

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

子组件向父组件传递数据：

function Parent() {
  const handleData = (data) => {
    console.log('Received:', data);
  };
  return <Child onSendData={handleData} />;
}

function Child({ onSendData }) {
  return <button onClick={() => onSendData('Child data')}>Send</button>;
}

组件样式处理

内联样式：

function StyledComponent() {
  return <div style={{ color: 'red', fontSize: 20 }}>Styled Text</div>;
}

CSS Modules：

import styles from './Component.module.css';

function StyledComponent() {
  return <div className={styles.container}>Styled Text</div>;
}

Styled Components：

import styled from 'styled-components';

const StyledDiv = styled.div`
  color: red;
  font-size: 20px;
`;

function StyledComponent() {
  return <StyledDiv>Styled Text</StyledDiv>;
}

高阶组件实现

高阶组件(HOC)是用于组件逻辑复用的高级技术：

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

const EnhancedComponent = withLogging(MyComponent);

自定义 Hook 实现

自定义 Hook 可以提取组件逻辑以便复用：

react 组件实现

function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);
  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);
  return { count, increment, decrement };
}

function Counter() {
  const { count, increment } = useCounter();
  return <button onClick={increment}>{count}</button>;
}