Bereaksi kode "setelah render"?

Saya memiliki aplikasi tempat saya perlu mengatur ketinggian elemen (katakanlah "konten-aplikasi") secara dinamis. Dibutuhkan ketinggian "chrome" dari aplikasi dan kurangi itu dan kemudian atur ketinggian "app-content" agar sesuai dengan 100% dalam batasan itu. Ini super sederhana dengan tampilan vanilla JS, jQuery, atau Backbone, tapi saya berjuang untuk mencari tahu proses apa yang tepat untuk melakukan ini di React?

Di bawah ini adalah contoh komponen. Saya ingin dapat mengatur app-contenttinggi menjadi 100% dari jendela dikurangi ukuran ActionBardan BalanceBar, tetapi bagaimana saya tahu kapan semuanya dirender dan di mana saya akan meletakkan barang perhitungan di Kelas Bereaksi ini?

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

Metode ini dipanggil sekali setelah komponen Anda dirender. Jadi kode Anda akan terlihat seperti itu.

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>
    );
  }
});

Salah satu kelemahan menggunakan componentDidUpdate, atau componentDidMountmereka benar-benar dieksekusi sebelum elemen dom selesai dibuat, tetapi setelah mereka telah diteruskan dari Bereaksi ke DOM browser.

Katakan misalnya jika Anda perlu mengatur node.scrollHeight ke node.scrollTop yang diberikan, maka elemen DOM Bereaksi mungkin tidak cukup. Anda harus menunggu sampai elemen selesai dicat untuk mendapatkan ketinggiannya.

Larutan:

Gunakan requestAnimationFrameuntuk memastikan bahwa kode Anda dijalankan setelah lukisan objek yang baru Anda render

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 [...]

Dalam pengalaman saya window.requestAnimationFrametidak cukup untuk memastikan bahwa DOM telah sepenuhnya diberikan / reflow-complete from componentDidMount. Saya memiliki kode yang menjalankan yang mengakses DOM segera setelah componentDidMountpanggilan dan menggunakan hanya window.requestAnimationFrameakan menghasilkan elemen yang ada di DOM; namun, pembaruan dimensi elemen belum tercermin karena belum ada reflow.

Satu-satunya cara yang benar-benar dapat diandalkan untuk bekerja adalah membungkus metode saya dalam setTimeoutdan window.requestAnimationFrameuntuk memastikan tumpukan panggilan React saat ini akan dihapus sebelum mendaftar untuk render frame berikutnya.

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

Jika saya harus berspekulasi tentang mengapa ini terjadi / perlu saya bisa melihat Bereaksi DOM pembaruan batching dan tidak benar-benar menerapkan perubahan ke DOM sampai setelah tumpukan saat ini selesai.

Pada akhirnya, jika Anda menggunakan pengukuran DOM dalam kode yang Anda jalankan setelah panggilan balik Bereaksi Anda mungkin ingin menggunakan metode ini.

Hanya untuk memperbarui sedikit pertanyaan ini dengan metode Hook baru, Anda cukup menggunakan useEffecthook:

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. 
     [])
}

Juga jika Anda ingin menjalankan sebelum cat tata letak menggunakan useLayoutEffectkait:

import React, { useLayoutEffect } from 'react'

export default function App(props) {

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

Anda dapat mengubah status dan kemudian melakukan perhitungan di callback setState . Menurut dokumentasi Bereaksi, ini "dijamin akan diaktifkan setelah pembaruan diterapkan".

Ini harus dilakukan di componentDidMountatau di tempat lain dalam kode (seperti pada event handler ukuran) daripada di konstruktor.

Ini adalah alternatif yang baik window.requestAnimationFramedan tidak memiliki masalah yang disebutkan beberapa pengguna di sini (perlu untuk menggabungkannya setTimeoutatau menyebutnya beberapa kali). Sebagai contoh:

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>
        );
    }
}

Saya merasa bahwa solusi ini kotor, tetapi kita mulai:

componentDidMount() {
    this.componentDidUpdate()
}

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

Sekarang saya hanya akan duduk di sini dan menunggu suara turun.

Bereaksi memiliki beberapa metode siklus hidup yang membantu dalam situasi ini, daftar termasuk tetapi tidak terbatas pada getInitialState, getDefaultProps, componentWillMount, componentDidMount dll.

Dalam kasus Anda dan kasus-kasus yang perlu berinteraksi dengan elemen DOM, Anda harus menunggu sampai dom siap, jadi gunakan componentDidMount seperti di bawah ini:

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

Juga untuk informasi lebih lanjut tentang siklus hidup dalam reaksi Anda dapat melihat tautan di bawah ini: https://facebook.github.io/react/docs/state-and-lifecycle.html

Saya mengalami masalah yang sama.

Dalam kebanyakan skenario menggunakan hack-ish setTimeout(() => { }, 0)di componentDidMount()bekerja.

Tetapi tidak dalam kasus khusus; dan saya tidak ingin menggunakan ReachDOM findDOMNodekarena dokumentasi mengatakan:

Catatan: findDOMNode adalah jalan keluar yang digunakan untuk mengakses simpul DOM yang mendasarinya. Dalam kebanyakan kasus, penggunaan pintu darurat ini tidak disarankan karena menembus abstraksi komponen.

(Sumber: findDOMNode )

Jadi dalam komponen tertentu saya harus menggunakan componentDidUpdate()acara tersebut, jadi kode saya akhirnya menjadi seperti ini:

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);
}

Lalu:

componentDidUpdate() {
    this.updateDimensions();
}

Akhirnya, dalam kasus saya, saya harus menghapus pendengar yang dibuat di componentDidMount:

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

Setelah render, Anda dapat menentukan ketinggian seperti di bawah ini dan dapat menentukan ketinggian untuk komponen reaksi yang sesuai.

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>
    );`
  }

atau Anda dapat menentukan ketinggian masing-masing komponen reaksi menggunakan sass. Tentukan div 2 utama komponen reaksi pertama dengan lebar tetap dan kemudian tinggi komponen utama 3 reaksi dengan otomatis. Jadi berdasarkan konten div ketiga ketinggian akan ditetapkan.

Saya sebenarnya mengalami masalah dengan perilaku yang serupa, saya membuat elemen video dalam Komponen dengan atribut id itu sehingga ketika RenderDOM.render () mengakhirinya memuat plugin yang memerlukan id untuk menemukan placeholder dan gagal menemukannya.

SetTimeout dengan 0ms di dalam componentDidMount () memperbaikinya :)

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

Dari dokumentasi ReactDOM.render () :

Jika callback opsional diberikan, itu akan dieksekusi setelah komponen diberikan atau diperbarui.

Bagi saya, tidak ada kombinasi window.requestAnimationFrameatausetTimeout hasil yang konsisten. Terkadang itu berhasil, tetapi tidak selalu — atau kadang-kadang akan terlambat.

Saya memperbaikinya dengan mengulang window.requestAnimationFramesebanyak yang diperlukan.
(Biasanya 0 atau 2-3 kali)

Kuncinya adalah diff > 0: di sini kita dapat memastikan kapan halaman diperbarui.

// 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);
        }
    }());
}

Saya punya situasi aneh ketika saya perlu mencetak komponen reaksi yang menerima sejumlah besar data dan melukis di atas kanvas. Saya sudah mencoba semua pendekatan yang disebutkan, tidak ada yang bekerja dengan baik untuk saya, dengan requestAnimationFrame di dalam setTimeout saya mendapatkan kanvas kosong dalam 20% dari waktu, jadi saya melakukan yang berikut:

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

Pada dasarnya saya membuat rantai requestAnimationFrame's, tidak yakin apakah ini ide yang bagus atau tidak, tetapi ini berfungsi dalam 100% kasus untuk saya sejauh ini (saya menggunakan 30 sebagai nilai untuk variabel n).

Sebenarnya ada versi yang jauh lebih sederhana dan lebih bersih daripada menggunakan kerangka animasi permintaan atau batas waktu. Iam mengejutkan tidak ada yang membawanya: pawang vanilla-js onload. Jika Anda bisa, gunakan komponen yang melakukan mount, jika tidak, cukup ikat fungsi pada onload hanlder dari komponen jsx. Jika Anda ingin fungsi menjalankan setiap render, jalankan juga sebelum mengembalikan Anda menghasilkan fungsi render. kode akan terlihat seperti ini:

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

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

}

Sedikit pembaruan dengan ES6kelas, bukanReact.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>
    );
  }
}

Juga - periksa Bereaksi metode siklus hidup komponen: Siklus Hidup Komponen

Setiap komponen memiliki banyak metode yang mirip dengan componentDidMountmis.

• componentWillUnmount() - komponen akan dihapus dari browser DOM