javascript - 使用React高階元件新拓展的state和props都還要回歸到最底層的元件去實現？這樣意義何在?

Question

使用高階元件就是用來取代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 (
            <p className = {className}>this.props.text</p>
        );
    }
});

//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('p'));

我以後再拓展什麼屬性都又要回到最下面的元件去實現？

Answer 1

1. 理解函數式程式設計的概念是基礎。可以去了解什麼是函數式編程，什麼是高階函數，為什麼要用高階函數？

2. 高階組件和高階函​​數作用類似。高階組件的作用：輸入參數，經過高階組件的處理，產生新的組件。舉個例子：不同類型的模態框，react-redux的connect等。

3. 高階組件就是個函數，一種輸入對應一種輸出組件，另一種輸入對應另一種輸出組件。所以對於開發者只用關心你的輸入，而不是一定會去拓展最下面元件的實作。