1. Компоненты

Компоненты — это строительные блоки React-приложений. Они могут быть функциональными или классовыми.

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

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

• Классовые компоненты:

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

2. Свойства (Props)

Props (свойства) — это данные, передаваемые в компоненты. Они доступны только для чтения и помогают компонетам взаимодействовать друг с другом.

• Передача props:

  function App() {
    return <Greeting name="Alice" />;
  }
  
  

• Использование props в компоненте:

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

3. Состояние (State)

Состояние (state) — это данные, которые могут изменяться в течение времени и определяют поведение компонента.

• Использование состояния в классовом компоненте:

  class Counter extends React.Component {
    constructor(props) {
      super(props);
      this.state = { count: 0 };
    }
  
    increment = () => {
      this.setState({ count: this.state.count + 1 });
    };
  
    render() {
      return (
        <div>
          <p>Count: {this.state.count}</p>
          <button onClick={this.increment}>Increment</button>
        </div>
      );
    }
  }
  
  

• Использование состояния в функциональном компоненте с хуками:

  function Counter() {
    const [count, setCount] = React.useState(0);
  
    return (
      <div>
        <p>Count: {count}</p>
        <button onClick={() => setCount(count + 1)}>Increment</button>
      </div>
    );
  }
  
  

4. Жизненный цикл компонентов

Жизненный цикл компонентов определяет различные этапы, через которые проходит компонент от создания до удаления. Основные методы жизненного цикла (для классовых компонентов):

• componentDidMount: вызывается после монтирования компонента.
• componentDidUpdate: вызывается после обновления компонента.
• componentWillUnmount: вызывается перед удалением компонента.

Пример:

class LifeCycleComponent extends React.Component {
  componentDidMount() {
    console.log('Component did mount');
  }

  componentDidUpdate(prevProps, prevState) {
    console.log('Component did update');
  }

  componentWillUnmount() {
    console.log('Component will unmount');
  }

  render() {
    return <div>Life Cycle Example</div>;
  }
}

5. Хуки (Hooks)