当前位置：首页 > React

react如何扩展

2026-03-30 18:03:15React

React 扩展方法

使用高阶组件（HOC）

高阶组件是一种函数，接收一个组件并返回一个新的增强组件。常用于逻辑复用，例如添加权限控制或数据注入。

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

自定义 Hooks

通过封装逻辑到自定义 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;
}

组合模式

利用 children 或 props 传递组件实现灵活组合。适合构建可复用的布局或容器组件。

react如何扩展

function Card({ header, children }) {
  return (
    <div className="card">
      {header && <div className="card-header">{header}</div>}
      <div className="card-body">{children}</div>
    </div>
  );
}

Render Props

通过函数 prop 共享代码，将渲染逻辑委托给父组件。

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

使用 Context API

跨层级传递数据，避免逐层手动传递 props。

react如何扩展

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

集成第三方库

通过 ref 或生命周期方法集成非 React 库（如 D3.js）。

class ChartWrapper extends React.Component {
  chartRef = React.createRef();
  componentDidMount() {
    this.chart = new ThirdPartyLib(this.chartRef.current);
  }
  render() {
    return <div ref={this.chartRef} />;
  }
}

代码分割与懒加载

使用 React.lazy 和 Suspense 实现按需加载组件。

const LazyComponent = React.lazy(() => import('./LazyComponent'));
function App() {
  return (
    <React.Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </React.Suspense>
  );
}

标签: react