javascript - Lors de l'utilisation de composants d'ordre supérieur React, l'état et les accessoires nouvellement développés doivent-ils être implémentés en revenant aux composants de niveau le plus bas ? Quel est le but de ceci ?

Question

Des composants de haut niveau sont-ils utilisés pour remplacer les Mixins ? J'ai vérifié les informations sur Internet et ils ont tous dit que l'idée principale des composants d'ordre élevé est d'étendre les méthodes fonctionnelles des composants, mais les nouveaux accessoires ou états qui sont finalement étendus ne doivent-ils pas encore être transmis à le niveau de contrôle le plus bas pour la mise en œuvre ? Ne trouvez-vous pas cela étrange ? Évidemment, les accessoires ou l'état ne sont disponibles que pour les composants développés, mais ils nécessitent les composants de niveau le plus bas pour les implémenter (dois-je revenir au niveau le plus bas chaque fois que je développe de nouveaux accessoires pour me soucier de la façon de les implémenter ? Ou dois-je faut-il planifier à l'avance pour être étendu ? Comment puis-je étendre les composants à l'avenir )

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

Dois-je revenir au composant inférieur pour implémenter les propriétés que je développerai à l'avenir ?

Answer 1

1. Comprendre les concepts de programmation fonctionnelle est la base. Vous pouvez découvrir ce qu'est la programmation fonctionnelle, ce que sont les fonctions d'ordre supérieur et pourquoi devrions-nous utiliser des fonctions d'ordre supérieur ?

2. Les composants d'ordre supérieur et les fonctions d'ordre supérieur fonctionnent de la même manière. Le rôle des composants d'ordre supérieur : saisir des paramètres et générer de nouveaux composants après traitement par des composants d'ordre supérieur. Par exemple : différents types de boîtes modales, React-Redux Connect, etc.

3. Un composant d'ordre supérieur est une fonction. Une entrée correspond à un composant de sortie et une autre entrée correspond à un autre composant de sortie. Par conséquent, les développeurs doivent uniquement se soucier de votre contribution, plutôt que d’étendre nécessairement l’implémentation du composant inférieur.