В чем разница между Class и Const при создании пользовательского интерфейса в Reaction-Native?

Question

const App = () => (
  <View>
    <Text>Test</Text>
  </View>
  )

class App extends Component {
  render() {
    return (
      <View>
        <Text>Test</Text>
      </View>
    );
  }
}

Когда я тестирую, две вещи одинаковы.Пожалуйста, скажите мне разницу между этими двумя.

Answer 1

Компонент класса является компонентом с состоянием, а const App является компонентом без состояния (или функциональным).

Компонент с состоянием используется для:

1. инициализации состояния
2. изменения состояния
3. рендеринга чего-либо

Кроме того, у него есть методы жизненного цикла.

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

Вкратце : компонент класса является более мощным, чем функциональный компонент

РЕДАКТИРОВАТЬ:

С React Native 0.59 также функциональные компоненты могут иметь состояние.См. Hooks-Intro для получения дополнительной информации.

Answer 2

Класс будет для контейнеров компонентов. «Умный» функциональный компонент, который связан с государством. и данные и предварительный просмотр "тупых" компонентов представления.

«Тупой» функциональный компонент используется для предварительного просмотра чего-либо или, что лучше сказать сделать то, что обычно отправляется из контейнера.

Теперь, используя хуки, вы можете получить весь жизненный цикл компонента класса в функциональном компоненте. Разница лишь в том, что функционал является состоянием меньше!

Answer 3

Используя класс, вы можете получить доступ к ловушке жизненного цикла и сохранить состояние в классе.Используя класс, вы можете создать компонент с сохранением состояния или интеллектуальный компонент.Это означает, что вы обрабатываете логику в своем компоненте класса, как при выполнении http-запроса

Используя функциональный компонент.В этом случае const вы можете создать компонент дампа или компонент без сохранения состояния (компонент используется только для отображения данных).Это отличный способ обеспечить поддержку и удобство чтения вашего кода реакции.Разбивая его на более мелкие компоненты и передавая реквизиты дочерним компонентам.

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

С уважением