javascript - Apabila menggunakan komponen tertib tinggi React, keadaan dan prop yang baru dikembangkan mesti dilaksanakan dengan kembali ke komponen peringkat terendah? Apa gunanya ini?

Question

Adakah komponen pesanan tinggi digunakan untuk menggantikan Mixin? Saya menyemak maklumat di Internet dan mereka semua berkata bahawa idea teras komponen pesanan tinggi adalah untuk mengembangkan kaedah fungsi komponen, tetapi bukankah prop atau negeri baru yang akhirnya dikembangkan masih perlu diserahkan kepada kawalan tahap terendah untuk pelaksanaan? Tidakkah anda fikir ini pelik? Jelas sekali prop atau keadaan hanya tersedia untuk komponen yang dikembangkan, tetapi mereka memerlukan komponen peringkat terendah untuk melaksanakannya (adakah saya perlu kembali ke tahap terendah setiap kali saya mengembangkan prop baharu untuk mengambil berat tentang cara melaksanakannya? Atau adakah saya perlu merancang lebih awal untuk diperluaskan?

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

Adakah saya perlu kembali ke komponen bawah untuk melaksanakan mana-mana hartanah yang saya kembangkan pada masa hadapan?

Answer 1

1. Memahami konsep pengaturcaraan berfungsi adalah asasnya. Anda boleh belajar tentang apakah pengaturcaraan berfungsi, apakah fungsi tertib tinggi, dan mengapa kita harus menggunakan fungsi tertib tinggi?

2. Komponen tertib lebih tinggi dan fungsi tertib lebih tinggi berfungsi sama. Peranan komponen tertib tinggi: parameter input, dan menjana komponen baharu selepas diproses oleh komponen tertib tinggi. Contohnya: pelbagai jenis kotak modal, react-redux connect, dsb.

3. Komponen tertib lebih tinggi ialah fungsi Satu input sepadan dengan satu komponen output, dan input lain sepadan dengan komponen output yang lain. Oleh itu, pembangun hanya perlu mengambil berat tentang input anda, dan bukannya perlu mengembangkan pelaksanaan komponen bawah.