Реагує код "після візуалізації"?

У мене є додаток, де мені потрібно встановити висоту елемента (давайте скажемо "додаток-вміст") динамічно. Він приймає висоту "хромування" додатка і віднімає його, а потім встановлює висоту "вмісту програми", щоб вона відповідала 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;

компонентDidMount ()

Цей метод викликається один раз після надання вашого компонента. Так ваш код виглядав би так.

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та, window.requestAnimationFrameщоб забезпечити очищення поточного стека React перед тим, як зареєструватися для візуалізації наступного кадру.

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

Якби мені довелося міркувати, чому це відбувається / необхідне, я міг би побачити Реагувати пакетні оновлення 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, компонентWillMount, компонентDidMount тощо.

У вашому випадку та випадках, які потребують взаємодії з елементами DOM, потрібно дочекатися, коли домівка буде готова, тому використовуйте компонентDidMount, як показано нижче:

/** @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

Я зіткнувся з тією ж проблемою.

У більшості сценаріїв, що використовують hack-ish 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 висоти головного діва компонента з фіксованою шириною, а потім висоту головного компонента третього компонента за допомогою автоматичного. Отже, виходячи із вмісту третього дива буде присвоєно висоту.

У мене насправді виникають проблеми з подібною поведінкою, я відображаю відео елемент в компоненті з атрибутом id, тому коли RenderDOM.render () закінчується, він завантажує плагін, який потребує ідентифікатора, щоб знайти заповнювач, і він не зможе його знайти.

SetTimeout з 0ms всередині компонентаDidMount () виправив його :)

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 змінної).

Насправді є набагато простіша і чистіша версія, ніж використання анімаційного анімаційного кадру або таймаутів. Я здивувався, що ніхто не підніс це: обробник ванільної завантаження. Якщо ви можете, використовуйте компонент зробив монтаж, якщо ні, просто прив’яжіть функцію до пристрою завантаження компонента 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 браузера