React
반응의 주

기본 상태

React 구성 요소의 상태는 응용 프로그램에서 데이터를 관리하고 전달하는 데 필수적입니다. JavaScript 객체로 표시되며 구성 요소 수준의 범위를가집니다. 이는 구성 요소 의 개인 데이터로 볼 수 있습니다.

아래 예제에서는 컴포넌트의 constructor 함수에서 초기 상태를 정의하고 render 함수에서이를 render 합니다.

class ExampleComponent extends React.Component {
  constructor(props){
    super(props);

    // Set-up our initial state
    this.state = {
      greeting: 'Hiya Buddy!'
    };
  }

  render() {
    // We can access the greeting property through this.state
    return(
      <div>{this.state.greeting}</div>
    );
  }
}

setState ()

React 애플리케이션에 UI 업데이트를하는 주요 방법은 setState() 함수를 호출하는 것입니다. 이 함수는 사용자가 제공 한 새 상태와 이전 상태 간의 얕은 병합 을 수행하고 구성 요소와 모든 사망자를 다시 렌더링하도록 트리거합니다.

매개 변수

1. updater : 이것은 상태로 병합되어야하는 많은 키 - 값 쌍 또는 그러한 객체를 반환하는 함수가있는 객체 일 수 있습니다.
2. callback (optional) : setState() 가 성공적으로 실행 된 후에 실행될 함수. setState() 대한 호출이 React에 의해 원자 적으로 보장되지 않는다는 사실 setState() 가 성공적으로 실행되었음을 알리는 긍정적 인 결과를 setState() 경우이 작업이 유용 할 때가 있습니다.

용법:

setState 메서드는 상태로 병합되어야하는 키 - 값 쌍의 수를 가진 객체 prevState 및 props 에서 계산 된 객체를 반환하는 함수가 될 수있는 updater 인수를 허용합니다.

객체를 updater 로 사용하여 setState() 사용

//
// An example ES6 style component, updating the state on a simple button click.
// Also demonstrates where the state can be set directly and where setState should be used.
//
class Greeting extends React.Component {
    constructor(props) {
        super(props);
        this.click = this.click.bind(this);
        // Set initial state (ONLY ALLOWED IN CONSTRUCTOR)
        this.state = {
            greeting: 'Hello!'
        };
    }
    click(e) {
        this.setState({
              greeting: 'Hello World!'
        });
    }
    render() {
        return(
            <div>
                <p>{this.state.greeting}</p>
                <button onClick={this.click}>Click me</button>
            </div>
        );
    }
    
}

updater 로 함수와 함께 setState() 사용하기

//
// This is most often used when you want to check or make use 
// of previous state before updating any values.
//

this.setState(function(previousState, currentProps) {
  return {
    counter: previousState.counter + 1
  };
});

이것은 setState() 대한 여러 호출이 사용되는 객체 인자를 사용하는 것보다 안전 할 수 있습니다. 왜냐하면 여러 호출이 React에 의해 일괄 처리되고 동시에 실행되기 때문에 현재의 소품을 사용하여 상태를 설정할 때 선호되는 방법입니다.

this.setState({ counter: this.state.counter + 1 });
this.setState({ counter: this.state.counter + 1 });
this.setState({ counter: this.state.counter + 1 });

이 호출은 Object.assign() 사용하여 React에 의해 일괄 적으로 배치 될 수 있으므로 카운터가 3이 아닌 1 씩 증가합니다.

기능적 접근법은 또한 구성 요소 외부에서 상태 설정 논리를 이동하는 데 사용될 수 있습니다. 이는 상태 논리의 분리 및 재사용을 허용합니다.

// Outside of component class, potentially in another file/module

function incrementCounter(previousState, currentProps) {
    return {
        counter: previousState.counter + 1
    };
}

// Within component

this.setState(incrementCounter);

Object와 콜백 함수로 setState() 호출하기

//
// 'Hi There' will be logged to the console after setState completes
//

this.setState({ name: 'John Doe' }, console.log('Hi there'));

공통 반 패턴

props 을 state 저장하면 안됩니다. 그것은 안티 패턴으로 간주됩니다. 예 :

export default class MyComponent extends React.Component {
    constructor() {
        super();

        this.state = {
            url: ''
        }

        this.onChange = this.onChange.bind(this);
    }

    onChange(e) {
        this.setState({
            url: this.props.url + '/days=?' + e.target.value
        });
    }

    componentWillMount() {
        this.setState({url: this.props.url});
    }

    render() {
        return (
            <div>
                <input defaultValue={2} onChange={this.onChange} />

                URL: {this.state.url}
            </div>
        )
    }
}

소품 url 은 state 저장되고 수정됩니다. 대신 변경 사항을 상태에 저장하도록 선택한 다음 state 와 props 을 모두 사용하여 전체 경로를 작성하십시오.

export default class MyComponent extends React.Component {
    constructor() {
        super();

        this.state = {
            days: ''
        }

        this.onChange = this.onChange.bind(this);
    }

    onChange(e) {
        this.setState({
            days: e.target.value
        });
    }

    render() {
        return (
            <div>
                <input defaultValue={2} onChange={this.onChange} />

                URL: {this.props.url + '/days?=' + this.state.days}
            </div>
        )
    }
}

이것은 React 애플리케이션에서 단일 진실을 원하기 때문입니다. 즉 모든 데이터가 단일 구성 요소의 책임이며 하나의 구성 요소 만 담당하기 때문입니다. 데이터를 상태에 저장하고 소품을 통해 다른 구성 요소에 데이터를 배포하는 것은이 구성 요소의 책임입니다.

첫 번째 예에서 MyComponent 클래스와 그 부모는 모두 자신의 상태 내에서 'url'을 유지 관리하고 있습니다. MyComponent에서 state.url을 업데이트하면 이러한 변경 사항이 상위에 반영되지 않습니다. 우리는 단일 진실을 잃어 버렸고 응용 프로그램을 통해 데이터 흐름을 추적하는 것이 점점 어려워졌습니다. 이것을 두 번째 예제와 비교해보십시오. url은 오직 부모 구성 요소의 상태에서만 유지되고 MyComponent에서 소품으로 활용되므로 단일 진리를 유지합니다.

상태, 이벤트 및 관리되는 컨트롤

다음은 "관리되는"입력 필드가있는 React 구성 요소의 예입니다. 입력 필드의 값이 변경 될 때마다 입력 필드의 새 값으로 구성 요소의 상태를 업데이트하는 이벤트 핸들러가 호출됩니다. 이벤트 핸들러에서 setState 를 호출하면 dom의 구성 요소 업데이트를 render 하는 호출이 트리거됩니다.

import React from 'react';
import {render} from 'react-dom';


class ManagedControlDemo extends React.Component {

  constructor(props){
    super(props);
    this.state = {message: ""};
  }

  handleChange(e){
    this.setState({message: e.target.value});
  }

  render() {
    return (
      <div>
        <legend>Type something here</legend>
          <input 
            onChange={this.handleChange.bind(this)} 
            value={this.state.message} 
            autoFocus />
        <h1>{this.state.message}</h1>
      </div>
   );
  } 
}


render(<ManagedControlDemo/>, document.querySelector('#app'));

런타임 동작을 기록하는 것이 매우 중요합니다. 사용자가 입력 필드의 값을 변경할 때마다

• handleChange 가 호출되므로
• setState 가 호출 될 것이므로
• render 이 호출됩니다.

입력란에 문자를 입력하면 DOM 퀴즈가 변경됩니다.

1. 이 모든 것들 - 최고 수준의 div, 범례, 입력, h1
2. 오직 입력과 h1
3. 아무것도
4. DOM이란 무엇입니까?

이 질문에 대한 답변을 찾으려면 여기 를 클릭하십시오.