javascript - Wenn React-Komponenten höherer Ordnung verwendet werden, müssen neu erweiterte Status und Requisiten durch die Rückkehr zu Komponenten der niedrigsten Ebene implementiert werden? Was ist der Sinn hiervon?

Question

Werden höherwertige Komponenten als Ersatz für Mixins verwendet? Ich habe die Informationen im Internet überprüft und alle sagten, dass die Kernidee von Komponenten höherer Ordnung darin besteht, die Funktionsmethoden von Komponenten zu erweitern, aber die neuen Requisiten oder Zustände, die schließlich erweitert werden, müssen nicht noch übergeben werden die unterste Kontrollebene für die Umsetzung? Finden Sie das nicht seltsam? Offensichtlich sind Requisiten oder Zustände nur für erweiterte Komponenten verfügbar, aber sie erfordern die Komponenten der untersten Ebene, um sie zu implementieren (muss ich jedes Mal, wenn ich neue Requisiten erweitere, zur untersten Ebene zurückkehren, um mich darum zu kümmern, wie sie implementiert werden? Oder muss ich das tun? Müssen Sie die Erweiterung im Voraus planen? Wie kann ich die Komponenten in Zukunft erweitern?

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

Muss ich zur untersten Komponente zurückkehren, um Eigenschaften zu implementieren, die ich in Zukunft erweitere?

Answer 1

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

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

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