리액트 컴포넌트 API


이 장에서는 React Component API에 대해 논의하겠습니다. 다음 7가지 방법에 대해 설명하겠습니다.

  • 상태 설정: setState

  • 상태 바꾸기: replacementState

  • 속성 setProps 설정

  • 속성 바꾸기 교체

  • 강제 업데이트: forceUpdate

  • DOM 노드 가져오기: findDOMNode

  • 구성요소 장착 상태 판단: isMounted

상태 설정: setState

setState(object nextState[, function callback])

매개변수 설명

  • nextState, 설정할 새 상태는 동일합니다. 현재 상태 stateMerge

  • callback, 선택적 매개변수, 콜백 함수. 이 함수는 setState가 성공적으로 설정되고 구성 요소가 다시 렌더링된 후에 호출됩니다.

nextState와 현재 상태를 병합하고 구성 요소를 다시 렌더링합니다. setState는 React 이벤트 처리 함수에서 UI 업데이트를 트리거하고 콜백 함수를 요청하는 주요 방법입니다.

setState에 대하여

setState()를 호출한 후에 상태가 교체되기 때문에 컴포넌트 내부에서 this.state를 통해 상태를 수정할 수 없습니다.

setState()는 this.state를 즉시 변경하지 않지만 곧 처리될 상태를 생성합니다. setState()는 반드시 동기식일 필요는 없습니다. 성능을 향상시키기 위해 React는 상태 및 DOM 렌더링을 일괄적으로 수행합니다.

setState()는 shouldComponentUpdate()에 일부 조건부 렌더링 로직이 구현되지 않는 한 항상 구성 요소 다시 그리기를 트리거합니다.

Instance

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>php中文网 React 实例</title>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react.js"></script>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.js"></script>
    <script src="http://static.php.cn/assets/react/browser.min.js"></script>
  </head>
 <body>
    <div id="message" align="center"></div>

    <script type="text/babel">
      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')
      );
    </script>
  </body>
</html>

인스턴스 실행 »

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

예제에서 h2 태그를 클릭하면 클릭 카운터가 1 증가합니다.

상태 바꾸기: replacementState

replaceState(object nextState[, function callback])

  • nextState, 설정할 새 상태로 현재 state를 대체합니다.

  • callback, 선택적 매개변수, 콜백 함수. 이 함수는 replaceState가 성공적으로 설정되고 구성 요소가 다시 렌더링된 후에 호출됩니다.

replaceState() 메서드는 setState()와 유사하지만 이 메서드는 nextState의 상태만 유지하고 nextState에 없는 원래 state의 상태는 유지합니다. 삭제됩니다.

속성 설정: setProps

setProps(object nextProps[, function callback])

  • nextProps, 설정할 새 속성, 상태는 현재 props

  • callback, 선택적 매개변수, 콜백 함수와 병합됩니다. 이 함수는 setProps가 성공적으로 설정되고 구성 요소가 다시 렌더링된 후에 호출됩니다.

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

props는 항상 상위 구성 요소에서 모든 하위 구성 요소로 전달되는 구성 요소의 데이터 흐름과 동일합니다. 외부 JavaScript 애플리케이션과 통합할 때 데이터를 전달하거나 구성 요소에 React.render()알려야 할 수 있습니다. 구성 요소를 다시 렌더링해야 하는 경우 setProps()를 사용할 수 있습니다.

구성 요소를 업데이트하려면 노드에서 React.render()를 다시 호출하거나 setProps() 메서드를 통해 구성 요소 속성을 변경하여 구성 요소가 다시 렌더링되도록 트리거할 수 있습니다.

속성 바꾸기: replacementProps

replaceProps(object nextProps[, function callback])

  • nextProps, 설정할 새 속성으로 현재 props를 대체합니다.

  • callback, 선택적 매개변수, 콜백 함수. 이 함수는 replaceProps가 성공적으로 설정되고 구성 요소가 다시 렌더링된 후에 호출됩니다. rreplaceprops ()

    메소드는
    • setprops
와 유사하지만 원래 

props
force 업데이트를 삭제합니다 : ForceUpdate
forceUpdate([function callback])
parameter description

callback

, 옵션 매개 변수, 콜백 함수 . 이 함수는 구성 요소
    render()
  • 메서드가 호출된 후에 호출됩니다.

    forceUpdate() 메서드는 구성 요소가 자체 render() 메서드를 호출하여 구성 요소를 다시 렌더링하도록 하며, 구성 요소의 하위 구성 요소도 자체 render()를 호출합니다. 그러나 컴포넌트가 다시 렌더링될 때 this.props 및 this.state는 계속 읽혀집니다. 상태가 변경되지 않은 경우 React는 DOM만 업데이트합니다.

    forceUpdate() 메서드는 this.props 및 this.state 이외의 구성 요소를 다시 그리는 데 적합합니다(예: this.state를 수정한 후). 이 메서드는 React에 render()를 호출해야 함을 알리는 데 사용됩니다
일반적으로 , forceUpdate()를 사용하지 말고, 대신 this.props 및 this.state에서 상태를 읽고 React가 render() 호출을 트리거하도록 하세요.

DOM 노드 가져오기: findDOMNode

DOMElement findDOMNode()

  • 반환 값: DOM 요소 DOMElement

구성 요소가 DOM에 마운트된 경우 이 메서드는 해당 로컬 브라우저 DOM 요소를 반환합니다. render가 null 또는 false을 반환하면 this.findDOMNode()도 null을 반환합니다. 이 방법은 양식 필드의 값을 가져오고 일부 DOM 작업을 수행하는 등 DOM에서 값을 읽을 때 유용합니다.

구성 요소 탑재 상태 확인: isMounted

bool isMounted()

  • 반환 값: true 또는 false, 구성 요소가 DOM에 탑재되었는지 여부를 나타냅니다

isMounted() 메서드를 사용하여 확인합니다. 컴포넌트가 DOM에 마운트되었는지 여부. 이 메서드를 사용하면 setState() 및 forceUpdate() 호출이 비동기 시나리오에서 잘못되지 않도록 할 수 있습니다.

이 기사에 대한 참조: http://itbilu.com/javascript/react/EkACBdqKe.html