当前位置：首页 > React

react 组件化如何理解

2026-02-12 10:33:00React

React 组件化的核心概念

React 的组件化是将用户界面拆分为独立、可复用的代码单元。每个组件封装自身的逻辑、样式和状态，通过组合方式构建复杂应用。组件化开发的核心目标是提高代码的可维护性、复用性和可测试性。

组件的本质

组件是函数或类，接收输入（props）并返回描述 UI 的 React 元素。函数组件是无状态的，类组件可通过 state 管理内部状态。

// 函数组件
function Button(props) {
  return <button>{props.label}</button>;
}

// 类组件
class Counter extends React.Component {
  state = { count: 0 };
  render() {
    return <div>{this.state.count}</div>;
  }
}

组件化的优势

复用性：同一组件可在多处使用，避免重复代码。
隔离性：组件内部状态和副作用不影响其他部分。
组合性：通过嵌套组合简单组件实现复杂功能。
维护性：独立组件便于单独测试和更新。

组件设计原则

单一职责：每个组件只负责一个功能点（如按钮、输入框）。
受控与非受控：通过 props 控制组件行为（受控），或由组件内部管理状态（非受控）。
数据流向：父组件通过 props 传递数据，子组件通过回调函数通知父组件。

组件间通信

父子通信：父组件通过 props 传递数据，子组件调用 props 中的回调函数。

function Parent() {
  const handleClick = () => console.log("Clicked");
  return <Child onClick={handleClick} />;
}

兄弟通信：通过状态提升（Lifting State Up）到共同父组件。
跨层级通信：使用 Context API 或状态管理库（如 Redux）。

高阶组件（HOC）与 Hooks

HOC：接收组件并返回增强功能的组件，用于逻辑复用（如 withRouter）。

const withLogging = (WrappedComponent) => {
  return (props) => {
    console.log("Rendered:", WrappedComponent.name);
    return <WrappedComponent {...props} />;
  };
};

Hooks：函数组件中复用状态逻辑（如 useState、useEffect），替代类组件生命周期。

react 组件化如何理解