Какие методы жизненного цикла вы знаете?react-14

class ExampleComponent extends React.Component {
  constructor(props) {
    super(props);
    // Инициализация состояния
    this.state = { count: 0 };
  }

  static getDerivedStateFromProps(props, state) {
    // Возвращает обновленное состояние на основе props
    return null; // или объект для обновления state
  }

  componentDidMount() {
    // Вызывается после первого рендера
    // Идеальное место для AJAX-запросов, подписок
  }

  render() {
    return <div>Пример компонента</div>;
  }
}

class UpdateExample extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    // Оптимизация: определяет нужно ли делать ререндер
    return nextProps.id !== this.props.id;
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    // Позволяет получить информацию из DOM перед обновлением
    return { scrollPosition: window.scrollY };
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    // Вызывается после обновления DOM
    // Можно работать с DOM или делать запросы при изменении props
  }

  render() {
    return <div>Обновляемый компонент</div>;
  }
}

class UnmountExample extends React.Component {
  componentWillUnmount() {
    // Вызывается перед удалением компонента
    // Очистка таймеров, отписок от событий
    clearInterval(this.timerID);
  }

  render() {
    return <div>Компонент для удаления</div>;
  }
}

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError(error) {
    // Обновляет состояние при ошибке в дочерних компонентах
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Логирование ошибок
    logErrorToService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Что-то пошло не так.</h1>;
    }
    return this.props.children;
  }
}

function FunctionalComponent() {
  // Аналог constructor + state
  const [state, setState] = useState(initialState);

  // Аналог componentDidMount + componentDidUpdate + componentWillUnmount
  useEffect(() => {
    // Код для mount/update
    return () => {
      // Код для unmount (cleanup)
    };
  }, [dependencies]); // Массив зависимостей

  return <div>Функциональный компонент</div>;
}