Статьи / JavaScript / Reactjs (документация, руководство, примеры, flux) / Справочник (Reference)

Спецификация компонента и жизненный цикл (Component Specs and Lifecycle)

Технические характеристики Компонента

При создании класса компонента вызовом React.createClass(), вы должны обеспечить объект спецификации, который включает метод render и опционально может содержать другие методы жизненного цикла, описанные здесь.

render

ReactComponent render () 

Требуется метод render().

При вызове, он должен изучить this.props и this.state и вернуть один дочерний компонент. Этот дочерний компонент может быть виртуальным представлением родного компонента DOM (такого как <div /> или React.DOM.div()) или другим составным компонентом, который вы себе определили.

Вы также можете вернуться null или false указывающий, что вы ничего не хотите рендерить. За сценой, React рендерит тег <noscript>, чтобы работать с нашим текущим отличающимся алгоритмом. При возврате null или false, this.getDOMNode() вернет null.

Функция render() должна быть чистой, это означает, что она не изменяет состояние компонента, она возвращает тот же результат каждый раз, когда вызывается, и она не читает или записывает в DOM или иным образом взаимодействует с браузером (в том числе и с помощью setTimeout). Если вам нужно взаимодействовать с браузером, выполните свою работу в componentDidMount() или в другом методе жизненного цикла. Поддержание render() чистым делает рендеринг сервер более практичным и позволяет проще думать о создании компонентов.

getInitialState

object getInitialState()

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

getDefaultProps

object getDefaultProps() 

Вызывается один раз и кэшируется, когда создается класс. Значения в mapping будут установлены на this.props если это свойство не определено родительским компонентом (т.е. с использованием in проверки).

Этот метод вызывается до того, как экземпляры создаются и таким образом, нельзя полагаться на this.props. Кроме того, имейте в виду, что любые сложные объекты, возвращаемые getDefaultProps() будет общими для экземпляров, некопированными.

propTypes

object propTypes

propTypes объект позволяет проверять свойства передаваемые к компонентам. Для получения более подробной информации о propTypes см. повторно используемые компоненты.

mixins (примеси)

array mixins

Массив mixins позволяет вам использовать примеси, чтобы распространить(share) поведение среди нескольких компонентов. Для получения более подробной информации о Mixins см повторно используемые компоненты.

statics

object statics

statics объект позволяет определить статические методы, которые могут быть вызваны в классе компонента. Например:

var MyComponent = React.createClass({
  statics: {
    customMethod: function(foo) {
      return foo === 'bar';
    }
  },
  render: function() {
  }
});

MyComponent.customMethod('bar');  // true

Методы, определенные в этом блоке являются статическими, это означает, что вы можете запустить их, прежде чем создаются любые экземпляры компонента и методы не имеют доступа к свойствам или состоянию ваших компонентов. Если вы хотите проверить значение свойств в статическом методе, передавайте caller в свойства как аргумент статического метода. (прим. переводчика: передаем 'bar' как foo аргумент, чтобы затем сравнить).

displayName

string displayName

Строка displayName используется в сообщениях отладки. JSX создает это значение автоматически; см. Углубленное изучение JSX.

Методы жизненного цикла

Различные методы выполняются в определенных местах жизненного цикла компонента.

Mounting: componentWillMount

componentWillMount()

Вызывается один раз, на клиенте и сервере, непосредственно перед началом рендеринга. Если вы вызовите setState внутри этого метода, render() будет видеть обновленное состояние и будет выполнен только один раз, несмотря на изменение состояния.

Mounting: componentDidMount

componentDidMount()

Вызывается один раз, только на клиенте (не на сервере), сразу же после того, как происходит инициализация рендеринга. На данном этапе в жизненном цикле компонент имеет представление DOM, к которому вы можете получить доступ с помощью this.getDOMNode().

Если вы хотите интегрироваться с другими фреймворками JavaScript, установите таймеры используя setTimeout или setInterval, или отправьте AJAX запросы, выполняйте эти операции в этом методе.

Примечание:
До v0.9, DOM узел передавался в качестве последнего аргумента. Если вы используете эту версию, вы все равно можете получить доступ к DOM узлу вызвав this.getDOMNode().

Updating: componentWillReceiveProps

componentWillReceiveProps(object nextProps)

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

Используйте это как возможность реагировать на перемещение свойства до вызова render() путем обновления состояния с помощью this.setState(). Старые свойства могут быть доступны через this.props. Вызов this.setState() в этой функции не будет вызывать дополнительный рендеринг.

componentWillReceiveProps: function(nextProps) {
  this.setState({
    likesIncreasing: nextProps.likeCount > this.props.likeCount
  });
}

Примечание:
Не существует аналогичного метода componentWillReceiveState. Входящий передача свойств может вызвать изменение состояния, но обратное не верно. Если вам необходимо выполнить операции в ответ на изменения состояния, используйте componentWillUpdate.

Updating: shouldComponentUpdate

boolean shouldComponentUpdate(object nextProps, object nextState)

Вызывается перед рендерингом при получени новых свойств или состояния. Этот метод не вызывается для начального рендеринга или когда используется forceUpdate.

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

shouldComponentUpdate: function(nextProps, nextState) {
  return nextProps.id !== this.props.id;
}

Если shouldComponentUpdate возвращает false, то render() будет полностью пропускается до следующего изменения состояния. Кроме того, componentWillUpdate и componentDidUpdate не будет вызываться.

По умолчанию, shouldComponentUpdate всегда возвращает true, чтобы предотвратить коварные ошибки, когда state мутирует на месте, но если вы внимательны, чтобы всегда относиться к state как к неизменному и читать только из props и state в render(), то вы можете переопределить shouldComponentUpdate в реализацию, которая сравнивает старые свойства и состояние с их заменой.

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

Updating: componentWillUpdate

componentWillUpdate(object nextProps, object nextState)

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

Используйте это как возможность выполнить подготовку перед обновлением.

Примечание:
Вы не можете использовать this.setState() в этом методе. Если вам нужно обновить состояние в ответ на изменение свойства, используйте componentWillReceiveProps.

Updating: componentDidUpdate

componentDidUpdate(object prevProps, object prevState)

Вызывается сразу после возникновения обновление. Этот метод не вызывается для начала рендеринга.

Используйте это как возможность работать с DOM, когда компонент уже обновлен.

Примечание:
До v0.9, DOM узел принимался в качестве последнего аргумента. Если вы используете это, вы все равно можете получить доступ к DOM узлу вызвав this.getDOMNode().

Unmounting: componentWillUnmount

componentWillUnmount()

Вызывается непосредственно перед тем, как компонент демонтируется из DOM.

Выполняйте любую необходимую очистку в этом методе такие как: отключение таймеров или очистки любых DOM элементов, которые были созданы в componentDidMount.