React常見的?HOC?使用案例及示例代碼

更新時間：2024年08月08日 10:31:03 作者：cangloe

高階組件（Higher-Order?Component,HOC）是一種用于在?React?中復用組件邏輯的技術(shù),這篇文章主要介紹了React常見的?HOC?使用案例示例代碼,需要的朋友可以參考下

1. 日志記錄 HOC

這個高階組件將在每次組件更新時記錄日志。

LoggingHOC.js

import React from 'react';
const withLogging = (WrappedComponent) => {
  return class extends React.Component {
    componentDidMount() {
      console.log(`${WrappedComponent.name} mounted`);
    }
    componentDidUpdate() {
      console.log(`${WrappedComponent.name} updated`);
    }
    componentWillUnmount() {
      console.log(`${WrappedComponent.name} will unmount`);
    }
    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
};
export default withLogging;

使用日志記錄 HOC

// src/App.js
import React from 'react';
import withLogging from './LoggingHOC';
const MyComponent = () => {
  return <div>My Component</div>;
};
const LoggedMyComponent = withLogging(MyComponent);
const App = () => {
  return (
    <div>
      <LoggedMyComponent />
    </div>
  );
};
export default App;

2. 數(shù)據(jù)獲取 HOC

這個高階組件在組件掛載時從一個 API 獲取數(shù)據(jù)，并將數(shù)據(jù)傳遞給被包裝的組件。

FetchDataHOC.js

import React from 'react';
const withFetchData = (url) => (WrappedComponent) => {
  return class extends React.Component {
    state = {
      data: null,
      loading: true,
      error: null,
    };
    async componentDidMount() {
      try {
        const response = await fetch(url);
        const data = await response.json();
        this.setState({ data, loading: false });
      } catch (error) {
        this.setState({ error, loading: false });
      }
    }
    render() {
      const { data, loading, error } = this.state;
      return <WrappedComponent data={data} loading={loading} error={error} {...this.props} />;
    }
  };
};
export default withFetchData;

使用數(shù)據(jù)獲取 HOC

// src/App.js
import React from 'react';
import withFetchData from './FetchDataHOC';
const DataComponent = ({ data, loading, error }) => {
  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  return <div>Data: {JSON.stringify(data)}</div>;
};
const FetchDataComponent = withFetchData('https://api.example.com/data')(DataComponent);
const App = () => {
  return (
    <div>
      <FetchDataComponent />
    </div>
  );
};
export default App;

3. 權(quán)限控制 HOC

這個高階組件根據(jù)用戶權(quán)限來控制組件的渲染。

withAuthorization.js

import React from 'react';
const withAuthorization = (requiredRole) => (WrappedComponent) => {
  return class extends React.Component {
    render() {
      const { user } = this.props;
      if (user.role !== requiredRole) {
        return <div>You do not have permission to view this page</div>;
      }
      return <WrappedComponent {...this.props} />;
    }
  };
};
export default withAuthorization;

使用權(quán)限控制 HOC

// src/App.js
import React from 'react';
import withAuthorization from './withAuthorization';
const AdminPage = () => {
  return <div>Admin Page</div>;
};
const AuthorizedAdminPage = withAuthorization('admin')(AdminPage);
const App = () => {
  const user = { role: 'user' }; // change to 'admin' to see the page
  return (
    <div>
      <AuthorizedAdminPage user={user} />
    </div>
  );
};
export default App;

4. 動態(tài)樣式 HOC

這個高階組件根據(jù) props 動態(tài)添加樣式。

withDynamicStyles.js

import React from 'react';
const withDynamicStyles = (WrappedComponent) => {
  return class extends React.Component {
    render() {
      const style = {
        color: this.props.color || 'black',
        fontSize: this.props.fontSize || '16px',
      };
      return <WrappedComponent {...this.props} style={style} />;
    }
  };
};
export default withDynamicStyles;

使用動態(tài)樣式 HOC

// src/App.js
import React from 'react';
import withDynamicStyles from './withDynamicStyles';
const StyledComponent = ({ style }) => {
  return <div style={style}>Styled Component</div>;
};
const DynamicStyledComponent = withDynamicStyles(StyledComponent);
const App = () => {
  return (
    <div>
      <DynamicStyledComponent color="red" fontSize="20px" />
    </div>
  );
};
export default App;