ตอบสนองรหัส“ หลังจากแสดงผล” หรือไม่

ฉันมีแอพที่ฉันต้องตั้งความสูงขององค์ประกอบ (เรียกว่า "เนื้อหาของแอพ") แบบไดนามิก ใช้ความสูงของ "chrome" ของแอพและลบออกแล้วตั้งค่าความสูงของ "เนื้อหาแอพ" ให้พอดี 100% ภายในข้อ จำกัด เหล่านั้น นี่เป็นเรื่องง่ายสุด ๆ กับมุมมองวานิลลา JS, jQuery หรือ Backbone แต่ฉันพยายามที่จะเข้าใจว่ากระบวนการที่เหมาะสมสำหรับการทำเช่นนี้ใน React?

ด้านล่างเป็นองค์ประกอบตัวอย่าง ฉันต้องการที่จะสามารถตั้งค่าapp-contentความสูงของการเป็น 100% ของหน้าต่างลบด้วยขนาดของActionBarและBalanceBarแต่ฉันจะรู้ได้อย่างไรเมื่อทุกอย่างถูกแสดงผลและฉันจะใส่ข้อมูลการคำนวณในชั้นเรียนนี้ได้ที่ไหน

/** @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; อย่างไรก็ตามการอัปเดตมิติขององค์ประกอบยังไม่ได้รับการสะท้อนเนื่องจากยังไม่มีการรีโฟลว์

วิธีเดียวที่เชื่อถือได้อย่างแท้จริงสำหรับการทำงานนี้คือการห่อวิธีของฉันในsetTimeoutและ a window.requestAnimationFrameเพื่อให้แน่ใจว่าสแต็คการโทรปัจจุบันของ React ได้รับการเคลียร์ก่อนที่จะลงทะเบียนสำหรับการเรนเดอร์เฟรมถัดไป

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

ถ้าฉันต้องคาดเดาว่าทำไมสิ่งนี้จึงเกิดขึ้น / จำเป็นฉันจะเห็นการปรับปรุงการทำซ้ำ DOM ของแบตช์และไม่ได้ใช้การเปลี่ยนแปลงกับ DOM จริง ๆ จนกระทั่งหลังจากสแต็กปัจจุบันเสร็จสมบูรณ์

ท้ายที่สุดหากคุณใช้การวัด DOM ในโค้ดที่คุณใช้หลังจากการเรียกกลับแบบตอบกลับคุณอาจต้องการใช้วิธีนี้

เพียงแค่อัปเดตคำถามนี้ด้วยเมธอด Hook ใหม่คุณสามารถใช้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. 
     [])
}

นอกจากนี้หากคุณต้องการเรียกใช้ก่อนการวางเลย์เอาต์ให้ใช้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

ฉันพบปัญหาเดียวกัน

ในสถานการณ์ส่วนใหญ่ที่ใช้การแฮ็ก - 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();
}

ในที่สุดในกรณีของฉันฉันต้องลบ listener ที่สร้างใน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 องค์ประกอบที่สามด้วยอัตโนมัติ ดังนั้นตามเนื้อหาของ div ที่สามความสูงจะถูกกำหนด

ฉันมีปัญหากับพฤติกรรมที่คล้ายกันจริง ๆ ฉันสร้างองค์ประกอบวิดีโอในองค์ประกอบที่มีแอตทริบิวต์ id ดังนั้นเมื่อ RenderDOM.render () สิ้นสุดลงโหลดปลั๊กอินที่ต้องการรหัสเพื่อค้นหาตัวยึดและไม่สามารถหามันได้

setTimeout ที่มี 0ms ภายใน 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 หากคุณสามารถทำได้ให้ใช้ component did mount ถ้าเพียงแค่ผูกฟังก์ชั่นบน onload hanlder ขององค์ประกอบ 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>
    );
  }
}

รวมทั้ง - ตรวจสอบวิธีการรอบอายุส่วนประกอบ : วงจรชีวิตคอมโพเนนต์

ทุกองค์ประกอบมีวิธีการcomponentDidMountมากมายเช่นกัน

• componentWillUnmount() - องค์ประกอบกำลังจะถูกลบออกจากเบราว์เซอร์ DOM