Инициализировать компонент инициализации компонента из реквизита

В React есть ли какие-либо реальные различия между этими двумя реализациями? Некоторые друзья говорят мне, что FirstComponent – это образец, но я не понимаю, почему. SecondComponent кажется более простым, потому что рендер вызывается только один раз.

Первый:

import React, { PropTypes } from 'react' class FirstComponent extends React.Component { state = { description: '' } componentDidMount() { const { description} = this.props; this.setState({ description }); } render () { const {state: { description }} = this; return (  ); } } export default FirstComponent; 

Во-вторых:

 import React, { PropTypes } from 'react' class SecondComponent extends React.Component { state = { description: '' } constructor (props) => { const { description } = props; this.state = {description}; } render () { const {state: { description }} = this; return (  ); } } export default SecondComponent; 

Обновление: я изменил setState () на this.state = {} (спасибо joews). Тем не менее, я до сих пор не вижу разницы. Лучше другого?

Следует отметить, что это анти-шаблон для копирования свойств, которые никогда не изменяются в состоянии (просто нажмите .props непосредственно в этом случае). Если у вас есть переменная состояния, которая в конечном итоге изменится, но начнется со значения из .props, вам даже не понадобится вызов конструктора – эти локальные переменные инициализируются после вызова конструктора родителя:

 class FirstComponent extends React.Component { state = { x: this.props.initialX, // You can even call functions and class methods: y: this.someMethod(this.props.initialY), }; } 

Это сокращенный эквивалент ответа от @joews ниже. Кажется, он работает только в более поздних версиях transpilers es6, у меня были проблемы с ним в некоторых настройках webpack. Если это не сработает для вас, это будет неконкретная версия @joews.

Вам не нужно вызывать setState в конструкторе компонента – идиоматично устанавливать this.state напрямую:

 class FirstComponent extends React.Component { constructor(props) { super(props); this.state = { x: props.initialX }; } // ... } 

См. React docs – Добавление локального состояния в class .

Нет никакого преимущества для первого метода, который вы описываете. Это приведет к повторному обновлению сразу перед установкой компонента в первый раз.

Обновление для React 16.3 alpha вводило static getDerivedStateFromProps(nextProps, prevState) ( docs ) в качестве замены для componentWillReceiveProps .

getDerivedStateFromProps вызывается после создания экземпляра компонента, а также при получении новых реквизитов. Он должен вернуть объект для обновления состояния или null, чтобы указать, что новые реквизиты не требуют каких-либо обновлений состояния.

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

Он статичен, поэтому он не имеет прямого доступа к this (однако у него есть доступ к prevState , который может хранить вещи, обычно прикрепленные к this например, refs )

отредактирован, чтобы отразить коррекцию корректора нерва в комментариях

Вы можете использовать короткую форму, как показано ниже, если вы хотите добавить все реквизиты в состояние и сохранить те же имена.

 constructor(props) { super(props); this.state = { ...props } //... } 
  • Бесплатный API штрих-кода для .NET
  • Как передать пользовательские параметры компонента в java и xml
  • Interesting Posts

    Как отменить последние коммиты в Git?

    Я отменил резервирование Microsoft 10 и удалил KB3035583, но Window 10 все еще пытается установить

    В чем разница между пространством ядра и пользовательским пространством?

    Мне нужен альтернативный вариант для HttpClient в Android для отправки данных на PHP, поскольку он больше не поддерживается

    Сканирование Brother 8880DN

    Подключите жесткий диск объемом 2,5 "(жесткий диск для ноутбука) SATA на настольный ПК

    Как проверить, какой class является объектом Objective-C?

    Вы можете обнаружить ошибку в этой функции excel?

    Никаких архитектур для компиляции для (ONLY_ACTIVE_ARCH = YES, active arch = x86_64, VALID_ARCHS = armv7 armv7s)

    16 ГБ флэш-накопитель USB превратился в 1 ГБ после записи образа ISO на него

    Как добавить второй жесткий диск к предварительно настроенной машине UEFI / ACHI Windows 8?

    Что такое нелексические времена жизни?

    ConcurrentModificationException, несмотря на использование синхронизированного

    Запрос Linq, построенный в цикле foreach, всегда принимает значение параметра из последней итерации

    Как я могу заблокировать доступ к некоторым пользователям только в Linux

    Давайте будем гением компьютера.