当前位置：首页 > React

react实现组件方式

2026-01-26 17:58:45React

React 实现组件的常见方式

React 提供了多种实现组件的方式，以下是主要的几种方法：

函数组件 函数组件是使用 JavaScript 函数定义的组件，简洁明了，适合无状态或使用 Hooks 的场景：

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

类组件 类组件通过继承 React.Component 实现，支持生命周期方法和状态管理：

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

箭头函数组件 箭头函数语法可以更简洁地定义函数组件：

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

高阶组件 (HOC) 高阶组件是一个函数，接收一个组件并返回一个新组件，用于复用逻辑：

function withLogging(WrappedComponent) {
  return class extends React.Component {
    componentDidMount() {
      console.log('Component mounted');
    }
    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
}

Render Props 通过 prop 传递渲染逻辑，实现组件间的代码共享：

class MouseTracker extends React.Component {
  state = { x: 0, y: 0 };
  handleMouseMove = (event) => {
    this.setState({ x: event.clientX, y: event.clientY });
  };
  render() {
    return (
      <div onMouseMove={this.handleMouseMove}>
        {this.props.render(this.state)}
      </div>
    );
  }
}

自定义 Hooks 封装可复用的状态逻辑，供多个组件使用：

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

复合组件 通过组合多个组件实现复杂功能，如 Context API 提供者/消费者模式：

const ThemeContext = React.createContext('light');
function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

无渲染组件 只处理逻辑不渲染 UI 的组件，通过子组件或 render prop 输出结果：

function DataFetcher({ url, children }) {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetch(url).then(res => res.json()).then(setData);
  }, [url]);
  return children(data);
}

每种方式适用于不同场景，函数组件和 Hooks 是现代 React 开发的主流选择，而类组件在维护旧代码时仍会见到。高阶组件和 render props 适用于复杂逻辑复用，自定义 Hooks 提供了更灵活的逻辑共享方式。

react实现组件方式