Как бы выглядел этот код с классовыми компонентами вместо функциональных и без хуков(hooks)?

Question

[ArturPetrov]

Здраствуйте! Изучал построение React приложений только с классовыми компонентами, и не использовал функциональные компоненты, и хуки не очень хорошо понимаю, знаю только что они заменяют как-то state.
Поэтому не знаю как переделать этот код в тот который мне нужно...Прошу у вас помощи.
Вот код в песочнице:
https://codesandbox.io/s/twilight-sky-y74zx

Answer 1

[i1yas]

class FeedPost extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showComments: false
    }
  }
  handler = () => {
    this.setState({
      showComments: !this.state.showComments
    })
  };
  render = () => {
    const {post} = this.props;
    return <li>
      <div>{post.title}</div>
      <div
        onClick={this.handler}
        style={{
          cursor: "pointer",
          color: "blue",
          textDecoration: "underline",
          userSelect: "none"
        }}
      >
        {this.state.showComments ? "Hide comments" : "Show comments"}
      </div>
      {this.state.showComments && (
        <ul>
          {post.comments.map((comment, i) => (
            <li key={i}>{comment.text}</li>
          ))}
        </ul>
      )}
      <Link to={`/post/${post.id}`}>Open</Link>
    </li>
  }
}

Остальные компоненты не нужно трогать.

Comments

[ArturPetrov]

Спасибо) А почему остальные компоненты не нужно трогать? Их невозможно переделать в классовые? Или от этого как-то зависит корректность выполнения кода в целом?

[i1yas]

ArturPetrov, нет смысла переделывать их в классовые, они stateless, то есть просто принимают пропсы и рендерят как-то их.
Вы конечно можете их переписать на классовые компоненты, но это не рекомендуется, код получается громоздким.
В целом они будут одинаково выглядеть

class MyComponent extends Component {
  render () {
    // тут достаем пропсы и возможно как-то их подготавливаем для дальнешего использования
   return <... jsx-шаблон ... />
  }
}

Как видно просто в нагрузку просто добавляются 3 лишние строки и сам синтаксис громоздкий

[ArturPetrov]

i1yas, Тоесть сочетать в одном файле классовые компоненты и функциональные это нормальная практика?
Писать классовые компоненты есть смысл только в том случае если я буду использовать состояние?

[i1yas]

ArturPetrov,

Тоесть сочетать в одном файле классовые компоненты и функциональные это нормальная практика?

Вообще, в одном файле лучше не хранить несколько компонентов.
Но сочетать классовые и функциональные компоненты - нормально.

писать классовые компоненты есть смысл только в том случае если я буду использовать состояние?

Да, при использовании состояния, жизненного цикла и рефов. Без хуков эти штуки возможно использовать только в классах.
Но учтите, что сейчас более современным подходом является написание всех компонентов как функциональных в сочетании с хуками, вы будете вск чаще встречаться с примерами кода на хуках.

[ArturPetrov]

i1yas, Я прислушаюсь к вашему совету переделать только один комопнент в классовый, но просто интересно понять как все же выглядел бы компонент Post если бы был классовым? А то я не очень понимаю где окажется пропс match?

const Post = ({ match }) => {
  const { id } = match.params;
  const post = posts.find(post => post.id === +id);
  return (
    <div>
      <h2>{post.title}</h2>
      <ul>
        {post.comments.map((comment, i) => (
          <li key={i}>{comment.text}</li>
        ))}
      </ul>
      <Link to="/">Back</Link>
    </div>
  );
};

[i1yas]

ArturPetrov,

const Post = ({ match }) => {
  const { id } = match.params;
  const post = posts.find(post => post.id === +id);
  ...
// match "вытаскивается" из props
const Post = (props) => {
  const match = props.match;
  const { id } = match.params;
  const post = posts.find(post => post.id === +id);

класс:

class Post extends Component {
  render () {
    const match = this.props.match;
    // или const {match} = this.props;
    ...
  }
}

Классовый компонент уже имеет в this.props все переданные пропсы

[ArturPetrov]

i1yas, в каком смысле:

match "вытаскивается" из props

Я просто наверное не понимаю что такое match...это объект?
В таком случае здесь:
const match = this.props.match;
Константа match есть обьект которому присваиваем свойства(props) того же же обьекта match. Наверное я бред написал, но что-то я не понимаю как прочитать эту строку.

[i1yas]

ArturPetrov,
const match = this.props.match;
Здесь в this.props.match лежит объект (точнее ссылка на него)
Объекты в js - ссылочный тип данных.
Поэтому когда мы делаем такое присваивание, ссылка на объект из this.props.match копируется в переменную match. Теперь нам легче доступаться до этого объекта.
Эта строка нужна только для удобства, чтобы не писать длинную цепочку this.props.match

[ArturPetrov]

i1yas, другими словами в функциональном компоненте Post такакая запись
const Post = ({ match }) => {
Аналогична записи:

const Post = (props) => {
 const match = props.match;

Правильно?
И вообще запись вот такая "({ match })". Как это называется?

[i1yas]

ArturPetrov,

другими словами в функциональном компоненте Post такакая запись
const Post = ({ match }) => {
Аналогична записи:

Да

И вообще запись вот такая "({ match })". Как это называется?

Деструктуризация аргументов. Здесь написано про деструктуризацию в общем, в конце про аргументы.

[ArturPetrov]

i1yas, и последний вопрос:
const { id } = match.params;
Что делает эта строка? И что такое params?