Вот пример кода для компонента в React:

import React from 'react';
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }
  incrementCount = () => {
    this.setState(prevState => ({
      count: prevState.count + 1,
    }));
  }
  render() {
    const { count } = this.state;
    return (
      <div>
        <h1>My Component</h1>
        <p>Count: {count}</p>
        <button onClick={this.incrementCount}>Increment</button>
      </div>
    );
  }
}
export default MyComponent;

Это простой компонент React под названием MyComponent, который отображает заголовок, абзац, отображающий количество, и кнопку. Нажатие кнопки увеличивает счетчик.

В статье блога давайте обсудим различные методы улучшения возможности повторного использования компонентов в React. Вот несколько методов с примерами кода:

1. Функциональные компоненты:

   • Используйте функциональные компоненты вместо компонентов классов, чтобы писать более лаконичный и пригодный для повторного использования код.

   • Пример:

     import React from 'react';
     function MyComponent() {
     const [count, setCount] = React.useState(0);
     const incrementCount = () => {
      setCount(prevCount => prevCount + 1);
     };
     return (
      <div>
        <h1>My Component</h1>
        <p>Count: {count}</p>
        <button onClick={incrementCount}>Increment</button>
      </div>
     );
     }
     export default MyComponent;

2. Компоненты высшего порядка (HOC):

   • Используйте HOC для переноса компонентов и добавления дополнительных функций.

   • Пример:

     import React from 'react';
     function withLogging(WrappedComponent) {
     return class extends React.Component {
      componentDidMount() {
        console.log('Component mounted');
      }
      render() {
        return <WrappedComponent {...this.props} />;
      }
     };
     }
     function MyComponent() {
     // Component logic...
     }
     export default withLogging(MyComponent);

3. Резервные реквизиты:

   • Используйте реквизиты рендеринга, чтобы передать функцию в качестве реквизита компоненту и визуализировать контент на основе этой функции.

   • Пример:

     import React from 'react';
     function MyComponent({ render }) {
     // Component logic...
     return <div>{render()}</div>;
     }
     function App() {
     return (
      <MyComponent
        render={() => (
          <div>
            <h1>Render Props Example</h1>
            <p>Some content rendered through render props.</p>
          </div>
        )}
      />
     );
     }
     export default App;

4. Хуки реагирования:

   • Используйте хуки React для управления состоянием и побочными эффектами в функциональных компонентах.

   • Пример:

     import React, { useState, useEffect } from 'react';
     function MyComponent() {
     const [count, setCount] = useState(0);
     useEffect(() => {
      console.log('Component updated');
     }, [count]);
     return (
      <div>
        <h1>My Component</h1>
        <p>Count: {count}</p>
        <button onClick={() => setCount(count + 1)}>Increment</button>
      </div>
     );
     }
     export default MyComponent;

5. Контекст реакции:

   • Используйте контекст React, чтобы обмениваться состоянием между компонентами без явной передачи реквизитов.

   • Пример:

     import React, { createContext, useContext, useState } from 'react';
     const CountContext = createContext();
     function MyComponent() {
     const count = useContext(CountContext);
     return (
      <div>
        <h1>My Component</h1>
        <p>Count: {count}</p>
      </div>
     );
     }
     function App() {
     const [count, setCount] = useState(0);
     return (
      <CountContext.Provider value={count}>
        <MyComponent />
        <button onClick={() => setCount(count + 1)}>Increment</button>
      </CountContext.Provider>
     );
     }
     export default App;