Реагировать Component API

В этом разделе мы обсудим Реагировать компонент API. Мы объясним следующие семь методов:

• Набор Статус: SetState
• Заменить Статус: replaceState
• Настройка свойств setProps
• Заменить replaceProps недвижимость
• Обновление: forceUpdate
• Получить DOM Node: findDOMNode
• Анализируя компоненты смонтированы состояние: isMounted

Набор Статус: SetState

setState(object nextState[, function callback])

Параметр Описание

• nextState, новое состояние , чтобы установить, состояние и текущее состояние слияния
• Обратный вызов, необязательные параметры, функция обратного вызова. Эта функция будет представлена в SetState успешно Вызывается после сборки повторного рендеринга.

Слияние nextState и текущее состояние и повторного рендеринга компонент. SetState являются Реагировать метод обработчика события и запросить крупное обновление пользовательского интерфейса функции обратного вызова срабатывает.

О SetState

Вы не можете модифицировать его внутренние компоненты от this.state государства, потому что государство заменит SetState вызова () после того, как.

SetState () не меняет this.state сразу, но в скором времени создать государственную лечение. SetState () не обязательно синхронизируются в целях повышения эффективности работы отреагирует пакетного состояния выполнения и рендеринга DOM.

SetState () всегда запускает сборку перерисовки, если ряд условий, для того чтобы достигнуть shouldComponentUpdate () в оказании логики.

примеров

var Counter = React.createClass({
  getInitialState: function () {
    return { clickCount: 0 };
  },
  handleClick: function () {
    this.setState(function(state) {
      return {clickCount: state.clickCount + 1};
    });
  },
  render: function () {
    return (<h2 onClick={this.handleClick}>点我！点击次数为: {this.state.clickCount}</h2>);
  }
});
ReactDOM.render(
  <Counter />,
  document.getElementById('message')
);

Попробуйте »

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

Заменить Статус: replaceState

replaceState(object nextState[, function callback])

• nextState, новое состояние будет создан, который заменит нынешнее состояние государства.
• Обратный вызов, необязательные параметры, функция обратного вызова. Эта функция будет представлена в replaceState успешно Вызывается после сборки повторного рендеринга.

Метод replaceState () SetState () аналогична, но метод только сохранил nextState состояние, первоначальное состояние не будет удален nextState статус.

Настройка свойств: setProps

setProps(object nextProps[, function callback])

• nextProps, новое свойство будет установлено, и текущее состояние слияния реквизита
• Обратный вызов, необязательные параметры, функция обратного вызова. Эта функция будет представлена в setProps успешных Called после сборки повторного рендеринга.

Настройка свойств компонента, и повторно рендеринга компонент.

Поток данных реквизита эквивалентные компоненты, он всегда будет передаваться от родителей ко всем компонентам подсборки. Когда внешний JavaScript и интеграции приложений, нам может понадобиться передать данные к компоненту или уведомление React.render () компоненты должны вновь сделать, вы можете использовать setProps ().

Обновление компонента React.render я могу позвонить еще раз на узле () будет метод () для изменения свойств компонента путем setProps, триггер повторного рендеринга компонент.

Заменить атрибут: replaceProps

replaceProps(object nextProps[, function callback])

• nextProps, новое свойство , чтобы установить это свойство заменит текущие реквизита.
• Обратный вызов, необязательные параметры, функция обратного вызова. Эта функция будет представлена в replaceProps успешных Called после сборки повторного рендеринга.

replaceProps () метод подобен setProps, но это будет удалить оригинал

props

Обновление: forceUpdate

forceUpdate([function callback])

Параметр Описание

• Обратный вызов, необязательные параметры, функция обратного вызова. Эта функция будет вызываться после того, как компонента метода визуализации () вызова.

forceUpdate () метод вызывает компонент, который вызывает сам метод визуализации () для повторной визуализации компонент подузла, компонент будет вызывать свой собственный визуализации (). Тем не менее, когда сборка повторно вынесено, и до сих пор читает this.props this.state, если состояние не изменится, то React обновляется только DOM.

forceUpdate () метод пригоден для внешних this.props и перерисовывать this.state компоненты (такие как: изменения this.state после), уведомление по методу Реагировать вызова визуализации ()

В общем, следует избегать использования forceUpdate (), и читать только this.props и this.state состояния, спровоцированные Реагировать визуализации () вызывает.

Получить DOM Node: findDOMNode

DOMElement findDOMNode()

• Возвращаемое значение: DOM элемент DOMElement

Если компонент был установлен в DOM, метод возвращает соответствующий локальный браузер DOM элементов. При визуализации возвращение NULL или ложь , когда this.findDOMNode () вернет нуль. Чтение из значения DOM, этот подход полезен, например, как: Получает значение поля формы и сделать некоторые DOM манипуляции.

Анализируя компоненты смонтированы состояние: isMounted

bool isMounted()

• Возвращаемое значение: истина или ложь, указывающее на то , должен ли компонент , установленный на DOM

Метод isMounted () используется для определения , являются ли компоненты установлены на DOM. Вы можете использовать этот метод , чтобы гарантировать , что вызов SetState () и forceUpdate () в асинхронном сценарии не может пойти не так.

Здесь в качестве ссылки: HTTP: //itbilu.com/javascript/react/EkACBdqKe.html