Как работают классовые компоненты в React?

Question

[The_good_game]

Добрый день, только начал изучать реакт и пока не могу понять одну вещь. Возьму в пример создание игры крестики нолики.

// отрывок кода
class Board extends React.Component {
  renderSquare(i) {
    return <Square />;
  }

  render() {
    const status = 'Next player: X';

    return (
      <div>
        <div className="status">{status}</div>
        <div className="board-row">
          {this.renderSquare(0)}
          ...
        </div>
        <div className="board-row">...</div>
        <div className="board-row">...</div>
      </div>
    );
  }
}

class Game extends React.Component {
  render() {
    return (
      <div className="game">
        <div className="game-board">
          <Board />
        </div>
        <div className="game-info">
          <div>{/* status */}</div>
          <ol>{/* TODO */}</ol>
        </div>
      </div>
    );
  }
}

ReactDOM.render(
  <Game />,
  document.getElementById('root')
);

Для меня не очевидно, каким образом при вызове Board из класса Game сразу же вызывается метод render. Разве для этого мы не долны вызывать его явно (например, Board.render)? Было бы понятно, если бы Board имел вид функции:

// примерно так
function Board {
 let renderSquare = (i) => <Square />;

 return (
  <div>
        <div className="status">{status}</div>
        <div className="board-row">
          {renderSquare(0)}
          ...
        </div>
        <div className="board-row">...</div>
        <div className="board-row">...</div>
    </div>
 )
}

Comments

[Владимир]

Рекомендую переписать Board как раз в виде функции 1) Это понятее 2) Это логичнее
Class based компоненты это старые уроки

Answer 1

[Владимир]

Реакт сам создает екземпляр класса и сам вызывает метод рендер, более того он сам вызывает кучу методов жизненного цикла, но я рекомендую пользоваться функциональными компонентами и хуками.
https://reactjs.org/docs/hooks-intro.html#complex-...
1) Потому что Fiber лучше работает с функциональными компонентами.
2) Есть полтора случая на 1000000 когда на функциональном компоненте нельзя реализовать то, что на классовом и все они описаны в официальной документации.
3) В реакте единственное возможное наследование это class Board extends React.Component, все, дальше начинается композиция, и в реакте думать в категориях OOP скорее вредно, чем полезно.
https://reactjs.org/docs/composition-vs-inheritanc...

So What About Inheritance?

At Facebook, we use React in thousands of components, and we haven’t found any use cases where we would recommend creating component inheritance hierarchies.

Поэтому забудьте про class based кмопоненты и сами пишите все на функциональных. А жизненный цикл class based компонент прочитайте внимательно пару (десятков) раз, чтобы запомнить и просто разбираться в чужом коде.

Answer 2

[Sun_Day]

Это логика, которую обрабатывает движок реакта. Ты просто следуешь абстракциям, которые предоставляет либа. Наследуясь от React.Component ты вызываешь метод render, который реализован в базовом классе React. Далее тебе не нужно у каждого дочернего компонента вызывать render, это детали внутреннего исполнения. В данном случае ты просто работаешь с jsx. Чтобы скрупулезно проследить за деталями внутренней реализации - нужно смотреть исходный код.