@The_good_game

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

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

// отрывок кода
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>
 )
}
  • Вопрос задан
  • 82 просмотра
Решения вопроса 2
Реакт сам создает екземпляр класса и сам вызывает метод рендер, более того он сам вызывает кучу методов жизненного цикла, но я рекомендую пользоваться функциональными компонентами и хуками.
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 компонент прочитайте внимательно пару (десятков) раз, чтобы запомнить и просто разбираться в чужом коде.
Ответ написан
@Sun_Day
Это логика, которую обрабатывает движок реакта. Ты просто следуешь абстракциям, которые предоставляет либа. Наследуясь от React.Component ты вызываешь метод render, который реализован в базовом классе React. Далее тебе не нужно у каждого дочернего компонента вызывать render, это детали внутреннего исполнения. В данном случае ты просто работаешь с jsx. Чтобы скрупулезно проследить за деталями внутренней реализации - нужно смотреть исходный код.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы