Реагировать «после рендеринга» кода?

У меня есть приложение, в котором мне нужно динамически установить высоту элемента (скажем, «app-content»). Он берет высоту "хрома" приложения и вычитает его, а затем устанавливает высоту "контента приложения", чтобы он соответствовал 100% в рамках этих ограничений. Это очень просто с ванильными представлениями JS, jQuery или Backbone, но я изо всех сил пытаюсь выяснить, каким будет правильный процесс для этого в React?

Ниже приведен пример компонента. Я хочу иметь возможность установить app-contentвысоту 100% окна минус размер ActionBarи BalanceBar, но как я узнаю, когда все отрисовано и куда я помещу расчетные вещи в этот класс React?

/** @jsx React.DOM */
var List = require('../list');
var ActionBar = require('../action-bar');
var BalanceBar = require('../balance-bar');
var Sidebar = require('../sidebar');
var AppBase = React.createClass({
  render: function () {
    return (
      <div className="wrapper">
        <Sidebar />
        <div className="inner-wrapper">
          <ActionBar title="Title Here" />
          <BalanceBar balance={balance} />
          <div className="app-content">
            <List items={items} />
          </div>
        </div>
      </div>
    );
  }
});

module.exports = AppBase;

componentDidMount ()

Этот метод вызывается один раз после визуализации вашего компонента. Так что ваш код будет выглядеть так.

var AppBase = React.createClass({
  componentDidMount: function() {
    var $this = $(ReactDOM.findDOMNode(this));
    // set el height and width etc.
  },

  render: function () {
    return (
      <div className="wrapper">
        <Sidebar />
          <div className="inner-wrapper">
            <ActionBar title="Title Here" />
            <BalanceBar balance={balance} />
            <div className="app-content">
              <List items={items} />
          </div>
        </div>
      </div>
    );
  }
});

Один недостаток использования componentDidUpdate, илиcomponentDidMount является то, что они на самом деле выполняются до того, как элементы dom завершены, но после того, как они были переданы из React в DOM браузера.

Скажем, например, если вам нужно было установить node.scrollHeight для визуализированного node.scrollTop, то элементов DOM React может быть недостаточно. Вам нужно подождать, пока элементы будут окрашены, чтобы получить их высоту.

Решение:

Используйте, requestAnimationFrameчтобы гарантировать, что ваш код запускается после рисования вашего недавно отрендеренного объекта

scrollElement: function() {
  // Store a 'this' ref, and
  var _this = this;
  // wait for a paint before running scrollHeight dependent code.
  window.requestAnimationFrame(function() {
    var node = _this.getDOMNode();
    if (node !== undefined) {
      node.scrollTop = node.scrollHeight;
    }
  });
},
componentDidMount: function() {
  this.scrollElement();
},
// and or
componentDidUpdate: function() {
  this.scrollElement();
},
// and or
render: function() {
  this.scrollElement()
  return [...]

По моему опыту, этого window.requestAnimationFrameбыло недостаточно, чтобы убедиться, что DOM был полностью обработан componentDidMount. У меня работает код, который обращается к DOM сразу после componentDidMountвызова, и использование только window.requestAnimationFrameприведет к тому, что элемент будет присутствовать в DOM; однако обновления размеров элемента еще не отражены, поскольку перекомпоновка еще не произошла.

Единственный действительно надежный способ для этого - заключить мой метод в a setTimeoutи a, window.requestAnimationFrameчтобы гарантировать очистку текущего стека вызовов React перед регистрацией для рендеринга следующего кадра.

function onNextFrame(callback) {
    setTimeout(function () {
        requestAnimationFrame(callback)
    })
}

Если бы мне пришлось размышлять о том, почему это происходит / необходимо, я мог бы увидеть, как React пакетирует обновления DOM и фактически не применяет изменения к DOM до тех пор, пока текущий стек не будет завершен.

В конечном счете, если вы используете измерения DOM в коде, который вы запускаете после обратных вызовов React, вы, вероятно, захотите использовать этот метод.

Просто чтобы немного обновить этот вопрос новыми методами Hook, вы можете просто использовать useEffectловушку:

import React, { useEffect } from 'react'

export default function App(props) {

     useEffect(() => {
         // your post layout code (or 'effect') here.
         ...
     },
     // array of variables that can trigger an update if they change. Pass an
     // an empty array if you just want to run it once after component mounted. 
     [])
}

Также, если вы хотите запустить перед раскраской раскраски, используйте useLayoutEffectкрючок:

import React, { useLayoutEffect } from 'react'

export default function App(props) {

     useLayoutEffect(() => {
         // your pre layout code (or 'effect') here.
         ...
     }, [])
}

Вы можете изменить состояние и затем выполнить свои вычисления в обратном вызове setState . Согласно документации React, это «гарантированно сработает после применения обновления».

Это должно быть сделано в componentDidMountкоде или где-то еще (например, в обработчике событий изменения размера), а не в конструкторе.

Это хорошая альтернатива, window.requestAnimationFrameи у нее нет проблем, о которых упоминали некоторые пользователи (необходимость комбинировать ее setTimeoutили вызывать несколько раз). Например:

class AppBase extends React.Component {
    state = {
        showInProcess: false,
        size: null
    };

    componentDidMount() {
        this.setState({ showInProcess: true }, () => {
            this.setState({
                showInProcess: false,
                size: this.calculateSize()
            });
        });
    }

    render() {
        const appStyle = this.state.showInProcess ? { visibility: 'hidden' } : null;

        return (
            <div className="wrapper">
                ...
                <div className="app-content" style={appStyle}>
                    <List items={items} />
                </div>
                ...
            </div>
        );
    }
}

Я чувствую, что это решение грязное, но здесь мы идем:

componentDidMount() {
    this.componentDidUpdate()
}

componentDidUpdate() {
    // A whole lotta functions here, fired after every render.
}

Теперь я просто сижу здесь и жду поданных голосов.

У React есть несколько методов жизненного цикла, которые помогают в этих ситуациях, списки, включая, но не ограничиваясь, getInitialState, getDefaultProps, componentWillMount, componentDidMount и т. Д.

В вашем случае и в случаях, когда необходимо взаимодействовать с элементами DOM, вам нужно подождать, пока dom не будет готов, поэтому используйте componentDidMount, как показано ниже:

/** @jsx React.DOM */
var List = require('../list');
var ActionBar = require('../action-bar');
var BalanceBar = require('../balance-bar');
var Sidebar = require('../sidebar');
var AppBase = React.createClass({
  componentDidMount: function() {
    ReactDOM.findDOMNode(this).height = /* whatever HEIGHT */;
  },
  render: function () {
    return (
      <div className="wrapper">
        <Sidebar />
        <div className="inner-wrapper">
          <ActionBar title="Title Here" />
          <BalanceBar balance={balance} />
          <div className="app-content">
            <List items={items} />
          </div>
        </div>
      </div>
    );
  }
});

module.exports = AppBase;

Также для получения дополнительной информации о жизненном цикле реакции вы можете посмотреть следующую ссылку: https://facebook.github.io/react/docs/state-and-lifecycle.html.

Я столкнулся с той же проблемой.

В большинстве сценариев используется взлом setTimeout(() => { }, 0)в componentDidMount()работало.

Но не в особом случае; и я не хотел использовать, ReachDOM findDOMNodeтак как документация говорит:

Примечание: findDOMNode - это аварийный штрих, используемый для доступа к базовому узлу DOM. В большинстве случаев использование этого аварийного люка не рекомендуется, поскольку оно пробивает абстракцию компонента.

(Источник: findDOMNode )

Таким образом, в этом конкретном компоненте мне пришлось использовать componentDidUpdate()событие, поэтому мой код оказался таким:

componentDidMount() {
    // feel this a little hacky? check this: http://stackoverflow.com/questions/26556436/react-after-render-code
    setTimeout(() => {
       window.addEventListener("resize", this.updateDimensions.bind(this));
       this.updateDimensions();
    }, 0);
}

А потом:

componentDidUpdate() {
    this.updateDimensions();
}

Наконец, в моем случае мне пришлось удалить слушателя, созданного в componentDidMount:

componentWillUnmount() {
    window.removeEventListener("resize", this.updateDimensions.bind(this));
}

После рендеринга вы можете указать высоту, как показано ниже, и указать высоту для соответствующих компонентов реакции.

render: function () {
    var style1 = {height: '100px'};
    var style2 = { height: '100px'};

   //window. height actually will get the height of the window.
   var hght = $(window).height();
   var style3 = {hght - (style1 + style2)} ;

    return (
      <div className="wrapper">
        <Sidebar />
        <div className="inner-wrapper">
          <ActionBar style={style1} title="Title Here" />
          <BalanceBar style={style2} balance={balance} />
          <div className="app-content" style={style3}>
            <List items={items} />
          </div>
        </div>
      </div>
    );`
  }

или вы можете указать высоту каждого реагирующего компонента, используя sass. Укажите первые 2 основных компонента div реагирования с фиксированной шириной, а затем высоту основного div третьего компонента с помощью auto. Таким образом, на основе содержимого третьего div будет назначена высота.

На самом деле у меня проблемы с похожим поведением, я рендерил элемент видео в компоненте с его атрибутом id, поэтому, когда RenderDOM.render () завершает работу, он загружает плагин, которому нужен идентификатор, чтобы найти заполнитель, и он не может его найти.

SetTimeout с 0 мс внутри componentDidMount () исправил это :)

componentDidMount() {
    if (this.props.onDidMount instanceof Function) {
        setTimeout(() => {
            this.props.onDidMount();
        }, 0);
    }
}

Из документации ReactDOM.render () :

Если предоставляется дополнительный обратный вызов, он будет выполнен после рендеринга или обновления компонента.

Для меня нет комбинации window.requestAnimationFrameилиsetTimeout выдающиеся результаты не дали. Иногда это срабатывало, но не всегда, а иногда было бы слишком поздно.

Я исправил это, повторяя window.requestAnimationFrameстолько раз, сколько необходимо.
(Обычно 0 или 2-3 раза)

Ключ diff > 0: здесь мы можем точно знать, когда страница обновляется.

// Ensure new image was loaded before scrolling
if (oldH > 0 && images.length > prevState.images.length) {
    (function scroll() {
        const newH = ref.scrollHeight;
        const diff = newH - oldH;

        if (diff > 0) {
            const newPos = top + diff;
            window.scrollTo(0, newPos);
        } else {
            window.requestAnimationFrame(scroll);
        }
    }());
}

У меня была странная ситуация, когда мне нужно напечатать реагирующий компонент, который получает большой объем данных и рисует на холсте. Я перепробовал все упомянутые подходы, ни один из них не работал надежно для меня, с requestAnimationFrame внутри setTimeout я получаю пустой холст в 20% случаев, поэтому я сделал следующее:

nRequest = n => range(0,n).reduce(
(acc,val) => () => requestAnimationFrame(acc), () => requestAnimationFrame(this.save)
);

По сути, я создал цепочку из requestAnimationFrame, не уверен, что это хорошая идея или нет, но пока это работает для меня в 100% случаев (я использую 30 в качестве значения для n-переменной).

На самом деле существует намного более простая и чистая версия, чем использование анимации запроса или тайм-аута. Я удивился, что никто не поднял это: обработчик загрузки vanilla-js. Если вы можете использовать компонент mount, если нет, просто привяжите функцию к обработчику загрузки компонента jsx. Если вы хотите, чтобы функция запускала каждый рендер, также запустите его, прежде чем возвращать результаты в функцию рендеринга. код будет выглядеть так:

runAfterRender = () => 
{
  const myElem = document.getElementById("myElem")
  if(myElem)
  {
    //do important stuff
  }
}

render()
{
  this.runAfterRender()
  return (
    <div
      onLoad = {this.runAfterRender}
    >
      //more stuff
    </div>
  )
}

}

Немного обновления с ES6классами вместоReact.createClass

import React, { Component } from 'react';

class SomeComponent extends Component {
  constructor(props) {
    super(props);
    // this code might be called when there is no element avaliable in `document` yet (eg. initial render)
  }

  componentDidMount() {
    // this code will be always called when component is mounted in browser DOM ('after render')
  }

  render() {
    return (
      <div className="component">
        Some Content
      </div>
    );
  }
}

Также - проверьте методы жизненного цикла компонента React: Жизненный цикл компонента

У каждого компонента есть много методов, подобных componentDidMountнапример.

• componentWillUnmount() - компонент собирается удалить из браузера DOM