react js 学习（五）- 组件间抽象

mixin

在React中使用mixin

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

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

ES6 Classes与decorator

使用我们推荐的ES6 classes形成构建组件时，它并不支持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 (