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 (
<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'));我以後再拓展什麼屬性都又要回到最下面的元件去實現？
