react js 学习(五)- 组件间抽象

发布时间:2019-06-07 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了react js 学习(五)- 组件间抽象脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

mixin

React中使用Mixin

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

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

ES6 Classes与decorator

使用我们推荐的ES6 classes形成构建组件时,它并不支持mixin.

高阶组件

属性代理

import React, {Component} from 'React';

const MyContainer = (WrapperComponent) =>

 class extends Component {
    render() {
        render <WrapperComponent {...this.PRos} />;
    }
 }

组合式组件开发实践

组件再分离

class SelectInput extends Component {
    static displayName = 'SelectInput';
    
    render() {
        const {selectedItem, isActive, onClickHeader, placeholdler} = this.props;
        const {text} = seletedItem;
        
        return (
            <div>
                <div onclick={onClickHeader}>
                    <input type="text" disabled value={text} placeholder={placeholder} />
                    <Icon classname={isActive} name="angle-down" />
                </div>
            </div>
        );
    }
}

组件再抽象

// 完成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 (
                <WrapperComponent 
                    {...this.props}
                    data={data}
                    keyword={keyword}
                    onSearch={this.handleSearch}
                  />
            );
        }
    }
    
    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 (<WrapperComponent {...this.props} data={this.state.data} />);
        }
    }
    
    return AsyncSelectDecorator;
}

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

class SearchSelect extends Component {
    render(){
        return (
            <FinalSelector {...this.props}>
                <SelectInput />
                <SearchInput />
                <List />
            </FinalSelector.
        );
    }
}

脚本宝典总结

以上是脚本宝典为你收集整理的react js 学习(五)- 组件间抽象全部内容,希望文章能够帮你解决react js 学习(五)- 组件间抽象所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。