Reagir Component API

Nesta seção, vamos discutir Reagir componente API. Vamos explicar os seguintes sete métodos:

• Set Status: setState
• Substitua Status: replaceState
• Definindo Propriedades SetProps
• Substitua replaceProps propriedade
• Update: ForceUpdate
• Obter DOM Nó findDOMNode
• Analisando os componentes de estado montado: isMounted

Set Status: setState

setState(object nextState[, function callback])

parâmetro Descrição

• nextState, o novo estado a ser definida, o status ea corrente merge estado
• callback, parâmetros opcionais, a função de retorno. Esta função será fornecido no sucesso setState Chamado após a montagem re-processamento.

Mesclar nextState e estado atual, e um componente de renderização re-. setState são Reagir método manipulador de eventos e solicitar importante função de retorno de atualização UI acionado.

Sobre setState

Você não pode modificar os componentes internos por this.state Estado, porque o Estado irá substituir o setState chamada () depois.

O setState () não alterar this.state imediatamente, mas em breve criar um tratamento Estado. setState () não é necessariamente sincronizados, a fim de melhorar o desempenho reagiria estado de execução em lotes e renderização DOM.

setState () sempre desencadeia um conjunto de redesenho, a menos que uma série de condições para alcançar shouldComponentUpdate () na prestação de lógica.

Exemplos

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')
);

tente »

Exemplos clicando sobre as tags h2 para fazer um contador de visitas é incrementado.

Substitua Status: replaceState

replaceState(object nextState[, function callback])

• nextState, o novo estado será configurado, que irá substituir o actual estado do estado.
• callback, parâmetros opcionais, a função de retorno. Esta função será fornecido em replaceState sucesso chamado após a montagem re-processamento.

replaceState () Método setState () é similar, mas o método só manteve estado nextState, o estado original não é estatuto nextState serão apagados.

Configuração de propriedades: SetProps

setProps(object nextProps[, function callback])

• nextProps, a nova propriedade será definido, eo estado atual dos adereços de fusão
• callback, parâmetros opcionais, a função de retorno. Esta função será fornecido em SetProps sucesso chamado após a montagem re-processamento.

Definindo propriedades do componente, e re-renderização de componentes.

fluxo de dados adereços componentes equivalentes, será sempre ser passado de pai para todos os componentes de sub-montagem. Quando um JavaScript externo e integração de aplicações, podemos precisar passar dados para o componente ou notar React.render () componentes precisam para re-render, você pode usar SetProps ().

Atualização React.render componente I pode chamar novamente no nó () para ser o método () para alterar as propriedades do componente por SetProps, disparador re-renderização de componentes.

Substituir Atributo: replaceProps

replaceProps(object nextProps[, function callback])

• nextProps, a nova propriedade a ser definida, esta propriedade irá substituir os suportes atuais.
• callback, parâmetros opcionais, a função de retorno. Esta função será fornecido em replaceProps sucesso chamado após a montagem re-processamento.

replaceProps () método é SetProps semelhantes, mas vai excluir o original

props

Update: ForceUpdate

forceUpdate([function callback])

parâmetro Descrição

• callback, parâmetros opcionais, a função de retorno. Esta função será chamado após o componente render () chamada de método.

ForceUpdate () método faz com que o componente que chama a si mesmo método render () para voltar a tornar o componente sub-montagem, o componente irá chamar de seu render (). No entanto, quando o conjunto de re-renderizado, e ainda lê this.props this.state, se o Estado não mudar, então reagir apenas atualizada DOM.

ForceUpdate () método é adequado para this.props fora e redesenhar this.state componentes (tais como: mudanças this.state depois), notificado pelo método Reagir chamada render ()

Em geral, você deve evitar usar ForceUpdate () e lido apenas this.props e this.state estado desencadeada por Reagir render () chama.

Obter DOM Nó findDOMNode

DOMElement findDOMNode()

• Valor de retorno: DOM elemento DOMElement

Se o componente foi montado no DOM, o método retorna o navegador local elementos DOM correspondentes. Ao tornar retorno nulo ou falsa quando, this.findDOMNode () irá retornar nulo. Leia a partir do valor DOM, esta abordagem é útil, tais como: Obtém o valor do campo de formulário e fazer alguma manipulação DOM.

Analisando os componentes de estado montado: isMounted

bool isMounted()

• Valor de retorno: verdadeiro ou falso, que indica se o componente é montado para o DOM

método isMounted () é utilizado para determinar se os componentes são montados para o DOM. Você pode usar esse método para garantir que a chamada setState () e ForceUpdate () no cenário assíncrona não pode dar errado.

Aqui por referência: http: //itbilu.com/javascript/react/EkACBdqKe.html