react初步学习十二

组合式组件开发实践

组件再次分离后，我们就可以根据在现实中的组件形态对其进行任意组合，形成统一层，摆脱在原有组件上扩展的模式，有效提高组件的灵活性。

* 逻辑再抽象*

// 完成 SearchInput 与 List 的交互
const searchDecorator = WrappedComponent => {
    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 (
                <WrappedComponent
                    {...this.props}
                    data={data}
                    keyword={keyword}
                    onSearch={this.handleSearch}
                />
            );
        }
    }