react js学習(五)-コンポーネント間の抽象

mixin
Reactではmixinを使用します.

import React from 'react';
import PureRenderMinxin from 'react-addons-pure-render-mixin';

React.createClass({
    mixins: [PureRenderMinxin],
    
    render(){
        render 
foo
;
    }
});

ES 6クラスとdecorator
私達が推薦したES 6 clasesを使って構成部品を形成する時、mixinを支持しません.
高次コンポーネント
属性プロキシ

import React, {Component} from 'React';

const MyContainer = (WrapperComponent) =>

 class extends Component {
    render() {
        render ;
    }
 }

組合せコンポーネント開発実践
コンポーネントを再分離

class SelectInput extends Component {
    static displayName = 'SelectInput';
    
    render() {
        const {selectedItem, isActive, onClickHeader, placeholdler} = this.props;
        const {text} = seletedItem;
        
        return (
            

                

                    
                    
                
            
        );
    }
}

コンポーネント再抽象

//   SearchInput List   
const searchDecorator = WrapperComponent => {
    class SearchDecorator extends Component {
        constructor(props) {
            super(props);
            this.handleSearch = this.handleSearch.bind(this);
        }
        
        handleSearch(keyword) {
            this.setState({
                data: this.props.data,
                keyword,
            });
            this.props.onSearch(keyword);
        }
        
        render(){
            const {data, keyword} = this.state;
            return (
                
            );
        }
    }
    
    return searchDecorator;
}

//  List    
const asyncSelectDecorator = WrapperComponent => {
    class AsyncSelectDecorator extends Component {
        componentDidMount(){
            const {url, params} = this.props;
            
            fetch(url, {params}).then(data => {
                this.setState({
                    data,
                });
            });
        }
        
        render(){
            return ();
        }
    }
    
    return AsyncSelectDecorator;
}

//   
const FinalSelector = compose(asyncSelectDecrator, searchDecorator, selectedItemDecorator)(Selector);

class SearchSelect extends Component {
    render(){
        return (