Latest web development tutorials

구성 요소 API 반응

이 섹션에서 우리는 컴포넌트 API 반응에 대해 설명합니다. 우리는 다음과 같은 일곱 가지 방법을 설명합니다 :

  • 설정 상태 : setState를
  • 교체 상태 : replaceState
  • 등록 setProps 설정
  • 속성 replaceProps 교체
  • 업데이트 : forceUpdate
  • DOM 노드를 가져옵니다 : findDOMNode을
  • 구성 요소를 분석하는 것은 상태를 마운트 : isMounted

설정 상태 : setState를 

setState(object nextState[, function callback])

매개 변수 설명

  • nextState 새로운 상태로 설정되는 상태와 현재 상태 병합
  • 콜백, 선택적 매개 변수, 콜백 함수. 이 기능은 어셈블리 재 렌더링 후에 호출 setState를 성공적으로 제공됩니다.

nextState 및 현재 상태, 다시 렌더링 구성 요소를 병합합니다. setState를 이벤트 핸들러 메서드 반응하고 주요 UI 업데이트 콜백 함수가 트리거 요청합니다.

setState를 소개

상태가 통화 setState를 교체하기 때문에 당신은 후 (), this.state 상태로 내부 구성 요소를 수정할 수 없습니다.

setState를 ()는 즉시 this.state을 변경하지 않습니다,하지만 곧 주 치료를 만듭니다. setState를 ()는 반드시 배치 실행 상태 및 DOM 렌더링 반응 할 성능을 향상시키기 위해 동기화되지 않는다.

조건의 수는 논리를 렌더링에 shouldComponentUpdate ()을 달성하지 않는 setState를 ()는 항상 다시 그리기 어셈블리를 트리거합니다.

예 

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 성공에 제공됩니다.

원래의 상태는 nextState 상태가 삭제됩니다 아니다, replaceState () 메서드 setState를 ()는 유사하지만,이 방법은 nextState 상태를 유지했다.

설정 속성 : setProps 

setProps(object nextProps[, function callback])
  • nextProps, 새로운 속성을 설정하고, 합병 소품의 현재 상태됩니다
  • 콜백, 선택적 매개 변수, 콜백 함수. 이 기능은 어셈블리 재 렌더링 후에 호출 setProps 성공에 제공됩니다.

구성 요소 속성을 설정하고 구성 요소를 다시 렌더링.

데이터 흐름은 항상 모든 서브 어셈블리 컴포넌트 부모로부터 계승한다 동등한 요소 소품. 외부 자바 스크립트와 애플리케이션 통합, 우리는 구성 요소가 다시 렌더링 할 필요) (구성 요소에 데이터를 전달하거나 React.render을 통지해야합니다 때 setProps을 사용할 수 있습니다 ().

내가 노드에서 다시 호출 할 수 있습니다 업데이트 구성 요소 React.render ()가 setProps에 의해 구성 요소 속성을 변경하려면 () 방법으로, 트리거는 구성 요소를 다시 렌더링.

속성 바꾸기 : replaceProps을 

replaceProps(object nextProps[, function callback])
  • nextProps, 새로운 속성이 설정되는,이 속성은 현재 소품을 대체합니다.
  • 콜백, 선택적 매개 변수, 콜백 함수. 이 기능은 어셈블리 재 렌더링 후에 호출 replaceProps 성공에 제공됩니다.

replaceProps () 메서드는 비슷한 setProps이지만, 원래 삭제됩니다 

props

업데이트 : forceUpdate 

forceUpdate([function callback])

매개 변수 설명

  • 콜백, 선택적 매개 변수, 콜백 함수. 이 기능은 구성 요소 렌더링 () 메서드 호출 후 호출됩니다.

forceUpdate () 메소드 자체가 서브 어셈블리 구성 요소를 다시 렌더링 () 메서드를 렌더링 호출하는 구성 요소가 발생, 구성 요소)는 (자신의 렌더링 호출합니다. 그러나, 어셈블리 재 렌더링, 그리고 국가는 DOM을 갱신 반응 후, 변경되지 않는 경우 여전히 this.props this.state을 읽습니다.

forceUpdate () 메서드는 외부 this.props에 적합하며 (예 : 변경 후 this.state) this.state 구성 요소를 다시 그리기의 방법으로 통지 렌더링 호출 반작용 ()

일반적으로, 당신은 () 렌더링 반작용 호출에 의해 트리거 만 this.props 및 this.state 상태를 forceUpdate ()를 사용하지 않도록하고 읽어야합니다.

DOM 노드를 가져옵니다 : findDOMNode을 

DOMElement findDOMNode()
  • 반환 값 : DOM 요소 DOMElement

구성 요소가 DOM에 장착 한 경우에있어서 해당 로컬 브라우저 DOM 요소를 반환한다. 반환 null 또는 거짓을 렌더링 할 때 때 this.findDOMNode () null을 반환합니다. 양식 필드의 값을 가져옵니다 일부 DOM 조작을 수행하십시오 DOM 값에서 읽기,이 방법은 같은 유용하다.

구성 요소를 분석하는 것은 상태를 마운트 : isMounted 

bool isMounted()
  • 반환 값 : true 또는 false, 구성 요소가 DOM에 탑재되어 있는지 여부를 나타내는

isMounted () 메소드는 컴포넌트가 DOM 장착 여부를 결정하기 위해 사용된다. 당신은 비동기 시나리오에서 setState를 ()와 forceUpdate () 호출이 잘못 갈 수 있도록하기 위해이 방법을 사용할 수 있습니다.

본 명세서 : HTTP : //itbilu.com/javascript/react/EkACBdqKe.html