Какова цель использования классов в React? - PullRequest
2 голосов
/ 15 марта 2019

Я в основном вижу, как JavaScript использует классы в качестве конструктора следующим образом:

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  // Getter
  get area() {
    return this.calcArea();
  }
  // Method
  calcArea() {
    return this.height * this.width;
  }
}

В чем причина React использует классы без использования функции contructor(), например:Я не вижу классов, используемых для создания экземпляров.

class App extends Component {

    render() {
        return (
            <div className="app-content">
            </div>
        )
    }
}

Ответы [ 3 ]

4 голосов
/ 15 марта 2019

Прямо сейчас вы должны использовать классы в React, если вам нужно использовать «продвинутые» методы жизненного цикла компонентов, такие как shouldComponentUpdate() или подобные.

Ранее компоненты класса использовались для обработки локального состояния в них. Прямо сейчас у нас есть Hooks API , который позволяет использовать состояние более элегантно и без необходимости использования компонентов класса.

Если вам нужны подробности, вы можете прочитать статью Дана Абрамова: Чем функциональные компоненты отличаются от классов? .

Независимо от вашего примера, вы правы, этот код:

class App extends Component {

    render() {
        return (
            <div className="app-content">
            </div>
        )
    }
}

можно записать как:

function App() {
  return <div className="app-content"></div>
}
1 голос
/ 15 марта 2019

В чем причина React использует классы без использования функции contructor()

Из JavaScript класса doc :

Если вы не укажете метод конструктора, используется конструктор по умолчанию.

Таким образом, constructor существует для каждого class независимо от того, указан метод конструктора или нет.


Я не вижу классов, используемых для создания экземпляров.

React компоненты, реализованные в виде классов , создаются React как часть процесса рендеринга.

В частности, в новой React Fiber создание экземпляра компонента класса React происходит на этой строке исходного кода .


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

использовать состояние и другие функции React без написания класса.

1 голос
/ 15 марта 2019

В React состояние используется в компоненте класса React. Там вы можете установить начальное состояние в конструкторе класса, а также получить к нему доступ и обновить его с помощью this.state и this.setState, поскольку у вас есть доступ к экземпляру класса с помощью объекта this.

Если вы используете класс в компоненте React, даже без использования constructor() вы можете установить начальное состояние, как показано ниже:

class App extends Component {
  state = {
    hello: 'Hello'
  };

  onClickHello = value => {
    this.setState({ hello: 'Why did you clicked?' });
  };

  render() {
    return (
      <div className="app-content" onClick={this.onClickHello}>
        {this.state.hello}
      </div>
    )
  }
}

Вы можете использовать все Методы жизненного цикла React

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