Реакция запуска полного жизненного цикла, когда реквизиты детей передаются вне метода рендеринга - PullRequest
Новая
       55

Реакция запуска полного жизненного цикла, когда реквизиты детей передаются вне метода рендеринга

2 голосов
/ 09 марта 2020

У меня есть ситуация, когда мне нужно, чтобы компоненты моего приложения отображались в одном из двух состояний на основе нажатия пользователем кнопки. Проблема, с которой я столкнулся, заключается в том, что React запускает полный жизненный цикл этих компонентов, хотя все, что я изменяю, - это состояние / свойства компонентов. Я использую React 15.6, из-за устаревших ограничений (это приложение на самом деле является магистралью со встроенным реагированием), также я не могу использовать JSX.

props.viewMode === 'ux' || 'dnd' (на основе нажатий кнопок пользователя)

Вот соответствующий код: 

      render() {
        return this[this.props.viewMode]();
      }

      ux: function() {
        return React.createElement(
          "div",
          {
            "id":         this.props.node.type,
            "name":       this.props.node.component
          },
          **this.props.children**
        );  
      },

      dnd: function() {
        return React.createElement(
          "div",
          {
            "id":         this.props.node.type,
            "name":       this.props.node.component
          },
          return React.createElement(
            "div",
            {
              "id":         this.props.node.type,
              "name":       this.props.node.component
            },
            **this.props.children**
          )
        );  
      },

Когда этот код запускается, он вызывает метод getInitialState () в дочерних элементах, даже хотя единственное, что изменяется, это viewMode, который передается как подпорки от компонента высшего порядка вниз по цепочке к дочерним компонентам.

Кажется, что любая ссылка на props.children вне метода render () запускает полный жизненный цикл, уничтожая компонент и создавая новый.

Если я произвожу рефакторинг кода, например this: 

      render() {
        const children = this.props.children.sort((a, b) => { return a.order > b.order });
        const elem     = this[this.props.viewMode]();

        //assign children to elem, e.g. elem.props.children = children;

        return elem;
      }

      ux: function() {
        return React.createElement(
          "div",
          {
            "id":         this.props.node.type,
            "name":       this.props.node.component
          },
          **null**
        );  
      },

      dnd: function() {
        return React.createElement(
          "div",
          {
            "id":         this.props.node.type,
            "name":       this.props.node.component
          },
          return React.createElement(
            "div",
            {
              "id":         this.props.node.type,
              "name":       this.props.node.component
            },
            **null**
          )
        );  
      },

React не вызывает метод getInitialState () у дочерних элементов.

Кто-нибудь знает, почему это будет? Чего мне не хватает?

...