ES5 클래스 기반 React 구성요소

대부분의 튜토리얼은 후크 또는 ES6 클래스로 React 구성 요소를 만드는 방법을 보여주지만 ES5 클래스를 사용하는 것을 찾지 못했습니다. 이제 "왜 ES5로 귀찮게 합니까?"라고 물을 수 있지만 저는 여전히 직장에서 IE11과 IE 2 이전 버전을 지원해야 합니다(작성 ​​당시).

숫자 스피너를 보여드리겠습니다. 다음은 ES5 React 구성 요소의 기본 골격입니다.

// The constructor cum class declaration
function NumberSpinner(props) {
    // equivalent to super(props)
    React.Component.call(this,props);
}

// These 2 lines together form the equivalent of
// extends React.Component
NumberSpinner.prototype = Object.create(React.Component.prototype);
NumberSpinner.prototype.constructor = NumberSpinner;

NumberSpinner.prototype.render = function() {

};

스피너에는 3가지 사용 사례만 있습니다.
)

스피너의 상태에는 생성자에 추가되는 1개의 속성num만 있습니다.

this.state = {num: 0};

사용자가 스피너에 초기 값을 할당할 수 있으려면 소품initNum이 있어야 합니다. Vue와 달리 React에서는 this.state = {num: this.props.initNum}; 와 같이 직접 소품으로 상태를 초기화하는 것은 권장되지 않습니다. 대신 정적getDerviedStateFromProps을 사용해야 합니다.

NumberSpinner.getDerivedStateFromProps = function(props, state) {
    return {num: props.initNum};
};

증가 값

NumberSpinner.prototype.increment = function() {
    this.setState(function(state, props) {
        return {num: state.num + 1};
    }
}

값 감소

NumberSpinner.prototype.decrement = function() {
    this.setState(function(state, props) {
        return {num: state.num - 1};
    }
};

스피너를 렌더링하려면 3개의 요소가 필요합니다. 1개는 현재 값을 표시하고 2개는 증가 및 감소 버튼입니다.

NumberSpinner.prototype.render = function() {
    var ce = React.createElement;
    var current = ce('div',{key:'current'}, this.state.num);
    var increment = ce('button',{key:'increment', onClick: this.increment}, '+');
    var decrement = ce('button',{key:'decrement', onClick: this.increment}, '-');
    return ce('div',{className:'spinner'}, [current,increment,decrement]);
};

첫 번째 Dev 기사의 초안을 작성한 지 몇 달이 지났고 Internet Explorer는 2일 후에 사라질 것입니다. 그럼 어떤 피드백이든 환영합니다 :)