반응을 어떻게 사용하나요? 반응 사용법에 대한 자세한 설명(예제 포함)

이 글은 주로 react의 사용법을 소개합니다. 관심 있는 학생들은 클릭하여 이 글의 내용을 함께 살펴보세요

1. React Props

상태와 소품의 주요 차이점은 소품은 불변인 반면 상태는 사용자와의 상호 작용에 따라 변경될 수 있다는 것입니다. 이것이 바로 일부 컨테이너 구성 요소가 데이터를 업데이트하고 수정하기 위해 상태를 정의해야 하는 이유입니다. 하위 구성 요소는 props를 통해서만 데이터를 전달할 수 있습니다.

인스턴스의 name 속성은 this.props.name을 통해 가져옵니다.

2. 기본 소품

getDefaultProps() 메서드를 통해 소품의 기본값을 설정할 수 있습니다.

2. 구성 요소 API

1. 상태 설정: setState

setState(objectnextState[, function callback])

(1) 매개변수 설명:

nextState, 설정할 새 상태입니다. 현재 상태와 동일 상태는

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

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

(2) setStaate에 대하여

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

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

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

2. 대체 상태: replacementState

replaceState(object nextState[, functioncallback])

nextState, 현재 상태를 대체할 새로운 상태입니다.

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

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

3. 속성 설정: setProps

setProps(object nextProps[, functioncallback])

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

콜백과 병합됩니다. , 매개변수 및 콜백 기능을 선택할 수 있습니다. 이 함수는 setProps가 성공적으로 설정되고 구성 요소가 다시 렌더링된 후에 호출됩니다.

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

4. 대체 속성: replacementProps

replaceProps(object nextProps[, functioncallback])

nextProps, 현재 props를 대체할 새 속성입니다.

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

replaceProps() 메소드는 setProps와 유사하지만 원본 props

5를 삭제합니다. 강제 업데이트: forceUpdate

forceUpdate([함수 콜백])

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

forceUpdate() 메서드는 this.props 및 this.state 이외의 구성 요소를 다시 그리는 데 적합합니다(예: this.state를 수정한 후). 이 메서드를 통해 React는 render()를 호출해야 한다는 알림을 받습니다

6.         DOM 노드 가져오기: findDOMNode

DOMElement findDOMNode()

반환 값: DOM 요소 DOMElement

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

7. 구성요소 장착 상태 확인: isMounted

bool isMounted()

반환 값: true 또는 false, 구성 요소가 DOM에 마운트되었는지 여부를 나타냅니다(자세한 내용을 보려면 PHP 중국어 웹사이트 React 참조 설명서 열로 이동하여 알아보세요).

isMounted() 메서드는 다음과 같이 사용됩니다. 구성요소가 DOM에 마운트되었는지 확인합니다. 이 메서드를 사용하면 비동기 시나리오에서 setState() 및 forceUpdate() 호출이 잘못되지 않도록 할 수 있습니다.

3. React 구성 요소 수명 주기

1. 구성 요소의 수명 주기는 세 가지 상태로 나눌 수 있습니다.

마운팅: 실제 DOM에 삽입

업데이트: 다시 렌더링 중

마운트 해제: 제거 실제 DOM

2. 라이프 사이클 메서드는 다음과 같습니다.

1) comComponentWillMount은 클라이언트와 서버 모두에서 렌더링 전에 호출됩니다.

2) comComponentDidMount : 첫 번째 렌더링 후에 호출되며 클라이언트 측에서만 호출됩니다. 그 후 구성 요소는 this.getDOMNode()를 통해 액세스할 수 있는 해당 DOM 구조를 생성했습니다. 다른 JavaScript 프레임워크와 함께 사용하려면 setTimeout, setInterval을 호출하거나 이 메서드에서 AJAX 요청 및 기타 작업을 보낼 수 있습니다(외부 작업이 UI를 차단하는 것을 방지하기 위해).

3) comComponentWillReceiveProps은 구성 요소가 새 prop을 받으면(업데이트 후) 호출됩니다. 이 메서드는 렌더링을 초기화할 때 호출되지 않습니다.

4) shouldComponentUpdate 부울 값을 반환합니다. 구성 요소가 새 소품이나 상태를 받을 때 호출됩니다. 초기화 중이나 forceUpdate를 사용할 때는 호출되지 않습니다.
구성요소를 업데이트할 필요가 없음을 확인한 경우 사용할 수 있습니다.

5) comComponentWillUpdate은 구성 요소가 새 prop이나 상태를 받았지만 아직 렌더링되지 않은 경우 호출됩니다. 초기화 중에는 호출되지 않습니다.

6) comComponentDidUpdate은 구성 요소가 업데이트를 완료한 직후에 호출됩니다. 초기화 중에는 호출되지 않습니다.

7) comComponentWillUnmount은 구성 요소가 DOM에서 제거되면 즉시 호출됩니다.

IV.React 양식 및 이벤트

예 1: 입력 상자 값이 변경되면 상태를 업데이트할 수 있습니다. onChange 이벤트를 사용하여 입력 변경 사항을 모니터링하고 상태를 수정할 수 있습니다.

5. React Refs

1.

메소드를 사용하여 ref 속성을 render의 반환 값에 바인딩합니다:

d3bfe32e4194384353a607068085f4c8

다른 코드에서는 this.refs를 통해 지원 인스턴스를 얻습니다.

var inputValue = input.value;

var inputRect = input.getBoundingClientRect()

2.

버튼을 클릭하면 입력 상자에 포커스가 맞춰집니다.

v

ar MyComponent = React.createClass({
      handleClick: function() {
        // 使用原生的 DOM API 获取焦点
        this.refs.myInput.focus();
      },
      render: function() {
        // 当组件插入到 DOM 后，ref 属性添加一个组件的引用于到 this.refs
        return (
          <p>
            <input type="text"ref="myInput" />
            <input
              type="button"
              value="点我输入框获取焦点"
              onClick={this.handleClick}
            />
          </p>
        );
      }
    });
 
    ReactDOM.render(
      <MyComponent />,
      document.getElementById(&#39;example&#39;)
    );

이 기사는 여기에서 끝납니다. (자세한 내용을 보려면 PHP 중국어 웹사이트

React 사용자 매뉴얼

컬럼을 방문하세요.) 궁금한 점이 있으면 아래에 메시지를 남겨주세요.

위 내용은 반응을 어떻게 사용하나요? 반응 사용법에 대한 자세한 설명(예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!