React.js 구성 요소 확장

React.js 구성 요소 확장

---

Backbone.js에 대해 가장 감사하게 생각하는 것 중 하나는 간단하고 우아한 상속이 작동하는 방식입니다. 나는 React를 이해하기 시작했고,이 Backbone 코드와 유사한 반응을 찾을 수 없습니다.

var Vehicle = Backbone.View.extend({
    methodA: function() { // ... }
    methodB: function() { // ... }
    methodC: function() { // ... }
});

var Airplane = Vehicle.extend({
    methodC: function() {
        // Overwrite methodC from super
    }
});

반응에서 우리 는 mixin 을 가지고 있으며 , 이것을 사용하면 위의 예와 같이 가면 다소 가까워 질 수 있습니다.

var vehicleMethods = {
    methodA: function() { // ... }
    methodB: function() { // ... }
}

var Vehicle = React.createClass({
    mixins: [vehicleMethods]
    methodC: function() { 
        // Define method C for vehicle
    }
});

var Airplane = React.createClass({
    mixins: [vehicleMethods]
    methodC: function() {
        // Define method C again for airplane
    }
});

이것은 동일한 것을 반복해서 정의하는 것보다 덜 반복적이지만 Backbone 방식만큼 유연하지 않은 것 같습니다. 예를 들어, 믹스 인 중 하나에 존재하는 메서드를 재정의 / 덮어 쓰려고하면 오류가 발생합니다. 게다가 React.js 방식은 제가 작성하기에 더 많은 코드입니다.

반응에는 엄청나게 영리한 것들이 있는데, 이것이 React에서 누락 된 기능처럼 느껴지는 것보다 제대로 수행하는 방법을 얻지 못하는 경우가 더 많다고 느낍니다.

어떤 포인터라도 대단히 감사합니다.

---

상속과 유사한 것을 얻으려면 (실제로 주석에서 지적한대로 구성 ) Airplane예제에서를 Vehicle. 컴포넌트 Vehicle에서 메소드를 노출 Airplane하려면 ref 를 사용하여 하나씩 연결할 수 있습니다. 이것은 정확히 상속이 아닙니다 (실제로는 composition입니다 ). 특히 this.refs.vehicle컴포넌트가 마운트 될 때까지 접근 할 수 없기 때문 입니다.

var Vehicle = React.createClass({
    ...
});

var Airplane = React.createClass({
    methodA: function() {
      if (this.refs != null) return this.refs.vehicle.methodA();
    },
    ...
    render: function() {
        return (
            <Vehicle ref="vehicle">
                <h1>J/K I'm an airplane</h1>
            </Vehicle>
        );
    }
});

또한 React 공식 문서 에서 상속보다 구성을 선호 한다는 점을 언급 할 가치가 있습니다 .

그렇다면 상속은 어떻습니까? Facebook에서는 수천 개의 구성 요소에서 React를 사용하고 있으며 구성 요소 상속 계층을 생성하도록 권장하는 사용 사례를 찾지 못했습니다.

소품 및 구성은 명시적이고 안전한 방식으로 구성 요소의 모양과 동작을 사용자 정의하는 데 필요한 모든 유연성을 제공합니다. 컴포넌트는 프리미티브 값, React 요소 또는 함수를 포함하여 임의의 소품을 허용 할 수 있습니다.

구성 요소간에 비 UI 기능을 재사용하려면 별도의 JavaScript 모듈로 추출하는 것이 좋습니다. 구성 요소는이를 가져 와서 확장하지 않고 해당 함수, 개체 또는 클래스를 사용할 수 있습니다.

ES2015 / ES6 +를 사용 Airplane하면 Vehicle구성 요소 에서 구성 요소로 개체 소품을 분산 할 수도 있습니다.

render: function() {
    return (
        <Vehicle {...this.props}>
            <h1>J/K I'm an airplane</h1>
        </Vehicle>
    );
}

---

프로젝트에 설정된 webpack + babel + react NPM 패키지를 사용하는 경우 ES6 OOP 구현에서 다음과 같이 간단해야합니다.

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class BaseComponentClass extends Component {
  componentDidMount() {} 
  render() { return (<div>Base Component</div>) }
}
class InheritedComponentClass extends BaseComponentClass {
  // componentDidMount is inherited
  render() { return (<div>Inherited Component</div>) } // render is overridden 
}
ReactDOM.render(<InheritedComponentClass></InheritedComponentClass>, 
     document.getElementById('InheritedComponentClassHolder'));

참고 : 다음은 이러한 설정이 포함 된 간단한 시작 키트입니다. https://github.com/alicoding/react-webpack-babel

---

ReactOO 를 활용 하면 상속을 쉽게 사용할 수 있습니다 ( 면책 조항 : 저는 ReactOO 의 작성자입니다 ).

(function () {

    // Class definitions. ReactOO requires class definition first just like you did in an OO way.

    window.Vehicle = window.ReactOO.ReactBase.extend({
        getReactDisplayName: function () {
            return 'Vehicle';
        },

        onReactRender: function (reactInstance) {
            var self = this;

            var text = self.methodC();

            return React.createElement('div', {}, text);
        },

        methodA: function () {
            console.log('Vehicle method A');
        },

        methodB: function () {
            console.log('Vehicle method B');
        },

        methodC: function () {
            return 'Vehicle method C';
        }
    });

    window.Airplane = window.Vehicle.extend({
        getReactDisplayName: function () {
            return 'Airplane';
        },

        methodC: function () {
            // Call this._super() to execute parent method.
            //this._super();
            return 'Airplane method C';
        }
    });

    var vehicle = new window.Vehicle();
    vehicle.render({}, '#vehicle');

    var airPlane = new window.Airplane();
    airPlane.render({}, '#airPlane');
})();

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>ReactOO Vehicle-Aireplane Example</title>
    <link rel="stylesheet" href="css/base.css" />
    <script src="scripts/react.js"></script>
    <script src="scripts/react-dom.js"></script>
    <script src="../src/reactoo.js"></script>
</head>
<body>
    <div id="vehicle">
    </div>
    <div id="airPlane">
    </div>
    <script src="scripts/vehicleAirplane.js">
    </script>
</body>
</html>

---

확장은 사용 jQuery.extend하거나 유사 하게 할 수 있다고 생각 합니다.

Base.jsx

module.exports = {
    methodA:function(){
        ...
    }
}

Child.jsx

var Base = require('./Base.jsx');

module.exports = React.createClass($.extend({},Base,{
    methodB:function(){
        ...
        this.methodA();
        ...
    },
    render:function(){
        return ...
    }
}));

참고 URL : https://stackoverflow.com/questions/25720595/extending-react-js-components