javascript - 使用React高阶组件新拓展的state和props都还要回归到最底层的组件去实现？这样意义何在?

问题描述

问 题

使用高阶组件就是用来替代Mixins吗？我查询了网上的资料都说高阶组件的核心思想是拓展组件的功能方法，但是最后拓展的新props或者state不都还是要传给最底层的控件去实现吗？这样不觉得很奇怪吗？明明是拓展后的组件才有的props或者state，但是却需要最底层的组件来实现（难道我每次拓展新props都还要回到最底层去关心怎么实现吗？或者要提前规划好被拓展的组件我以后要怎么拓展？）

//TestComponent.js
/* 比如先定义一个组件，这个组件一开始就要考虑到hide属性？这不可能吧，这个hide是后来才拓展出来的 */
var React = require('react');
 
module.exports = React.createClass({
    render: function() {
        var className = this.props.hide? "h5-widget-hide" : "";
        return (
            <div className = {className}>this.props.text</div>
        );
    }
});

//HideWidgetHOC.js
//这个HOC用于点击隐藏控件
var Test = require('./components/TestComponent');
var React = require('react');
var ReactDOM = require('react-dom');
 
var hoc = function (ComponentClass) {
    return React.createClass({
        getInitialState: function() {
            hide: false
        },
  
        componentDidMount: function() {
            var that = this;
            BaseUtils.createClickEvent($(ReactDOM.findDOMNode(this)), function(e) {
                that.setState({
                    hide: !this.state.hide
                });
            });
        }, // 绑定一个点击事件
 
        render: function() {
            var that = this;
            //给原组件拓展了点击隐藏功能。
            var newProps = Object.asign({}, {this.props}, {hide: that.getHideState()});//明明是新拓展的state，最后却需要到原来被拓展的组件中去考虑怎么实现？不觉得很奇怪吗？
            return <ComponentClass {...this.newProps}/> ;
        },
  
        getHideState: function() {
            return this.state.hide;
        }
    });
};
 
var XX = hoc(Test);
 
ReactDOM.render(<XX text="HelloWorld"/>, document.getElementById('div'));

难道我以后再拓展什么属性都又要回到最下面的组件去实现？

解决方案

1. 理解函数式编程的概念是基础。可以去了解一下什么是函数式编程，什么是高阶函数，为什么要使用高阶函数？

2. 高阶组件和高阶函数作用类似。高阶组件的作用：输入参数，经过高阶组件的处理，生成新的组件。举个例子：不同类型的模态框，react-redux的connect等。

3. 高阶组件就是个函数，一种输入对应一种输出组件，另一种输入对应另一种输出组件。所以对于开发者只用关心你的输入，而不是一定会去拓展最下面组件的实现。

这篇关于javascript - 使用React高阶组件新拓展的state和props都还要回归到最底层的组件去实现？这样意义何在?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！