javascript - When using React high-order components, newly expanded state and props must be implemented by returning to the lowest-level components? What's the point of this?

Question

Is using high-order components to replace Mixins? I checked the information on the Internet and they all said that the core idea of ​​high-order components is to expand the functional methods of components, but don't the new props or states that are finally expanded still have to be passed to the lowest level control for implementation? Don't you think this is strange? Obviously props or state are only available to expanded components, but they require the lowest-level components to implement them (do I have to go back to the lowest-level to care about how to implement them every time I expand new props? Or do I need to plan in advance to be expanded? How should I expand the components in the future?)

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

Do I have to go back to the bottom component to implement any properties I expand in the future?

Answer 1

1. Understanding the concepts of functional programming is the foundation. You can learn about what functional programming is, what are higher-order functions, and why should we use higher-order functions?

2. Higher-order components and higher-order functions work similarly. The role of high-order components: input parameters, and generate new components after processing by high-order components. For example: different types of modal boxes, react-redux connect, etc.

3. A higher-order component is a function. One input corresponds to one output component, and another input corresponds to another output component. Therefore, developers only need to care about your input, rather than necessarily expanding the implementation of the bottom component.