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
    }
});

반응에는 믹스인이 있습니다.이러한 믹스인을 사용하면 위의 예에 어느 정도 근접할 수 있습니다.

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 방식만큼 유연하지는 않은 것 같습니다.예를 들어 mixin 중 하나에 존재하는 메서드를 재정의/덮어쓰려고 하면 오류가 발생합니다.게다가 React.js 방식은 제가 쓰기에는 더 많은 코드입니다.

리액션에는 매우 영리한 것이 몇 가지 있습니다.리액션의 기능이 결여되어 있는 것처럼 느껴지기보다는, 이 기능을 제대로 사용할 수 없는 경우가 더 많은 것 같습니다.

어떤 조언이라도 대단히 감사합니다.

상속과 유사한 것(댓글에서 지적된 대로 실제 구성)을 얻으려면Airplane이 예에서는, 그 자체를Vehicle에 메서드를 공개하는 경우Vehicle에서Airplane참조를 사용하여 하나씩 연결할 수 있습니다.이는 정확히 상속(실제로 구성)이 아닙니다.특히, 그 이유는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를 사용하고 있지만 컴포넌트 상속 계층을 만들 것을 권장하는 사용 사례는 발견되지 않았습니다.

소품과 구성은 컴포넌트의 모양과 동작을 명확하고 안전하게 커스터마이즈하는 데 필요한 모든 유연성을 제공합니다.구성요소는 기본 값, 반응 요소 또는 함수를 포함한 임의 소품을 사용할 수 있습니다.

컴포넌트 간에 UI 이외의 기능을 재사용할 경우 별도의 JavaScript 모듈에 압축을 푸는 것이 좋습니다.컴포넌트는 함수, 객체 또는 클래스를 확장하지 않고 Import하여 사용할 수 있습니다.

하면 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

React 활용OO님, 상속 사용도 간편합니다(해고자:리액트 작가입니다OO):

(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