Rerender view pada browser resize dengan React

Bagaimana saya bisa mendapatkan React untuk merender ulang tampilan ketika jendela browser diubah ukurannya?

Latar Belakang

Saya memiliki beberapa blok yang ingin saya tata letak satu per satu di halaman, namun saya juga ingin mereka memperbarui ketika jendela browser berubah. Hasil akhirnya akan seperti tata letak Pinterest Ben Holland , tetapi ditulis menggunakan React bukan hanya jQuery. Aku masih jauh.

Kode

Inilah aplikasi saya:

var MyApp = React.createClass({
  //does the http get from the server
  loadBlocksFromServer: function() {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      mimeType: 'textPlain',
      success: function(data) {
        this.setState({data: data.events});
      }.bind(this)
    });
  },
  getInitialState: function() {
    return {data: []};
  },
  componentWillMount: function() {
    this.loadBlocksFromServer();

  },    
  render: function() {
    return (
        <div>
      <Blocks data={this.state.data}/>
      </div>
    );
  }
});

React.renderComponent(
  <MyApp url="url_here"/>,
  document.getElementById('view')
)

Lalu saya memiliki Blockkomponen (setara dengan Pindalam contoh Pinterest di atas):

var Block = React.createClass({
  render: function() {
    return (
        <div class="dp-block" style={{left: this.props.top, top: this.props.left}}>
        <h2>{this.props.title}</h2>
        <p>{this.props.children}</p>
        </div>
    );
  }
});

dan daftar / koleksi Blocks:

var Blocks = React.createClass({

  render: function() {

    //I've temporarily got code that assigns a random position
    //See inside the function below...

    var blockNodes = this.props.data.map(function (block) {   
      //temporary random position
      var topOffset = Math.random() * $(window).width() + 'px'; 
      var leftOffset = Math.random() * $(window).height() + 'px'; 
      return <Block order={block.id} title={block.summary} left={leftOffset} top={topOffset}>{block.description}</Block>;
    });

    return (
        <div>{blockNodes}</div>
    );
  }
});

Pertanyaan

Haruskah saya menambahkan ukuran jendela jQuery? Jika ya, dimana?

$( window ).resize(function() {
  // re-render the component
});

Apakah ada cara lain "Bereaksi" untuk melakukan ini?

Menggunakan React Hooks:

Anda dapat menentukan Hook kustom yang mendengarkan resizeacara jendela , seperti ini:

import React, { useLayoutEffect, useState } from 'react';

function useWindowSize() {
  const [size, setSize] = useState([0, 0]);
  useLayoutEffect(() => {
    function updateSize() {
      setSize([window.innerWidth, window.innerHeight]);
    }
    window.addEventListener('resize', updateSize);
    updateSize();
    return () => window.removeEventListener('resize', updateSize);
  }, []);
  return size;
}

function ShowWindowDimensions(props) {
  const [width, height] = useWindowSize();
  return <span>Window size: {width} x {height}</span>;
}

Keuntungannya di sini adalah logik yang dirangkum, dan Anda dapat menggunakan Hook ini di mana pun Anda ingin menggunakan ukuran jendela.

Menggunakan kelas Bereaksi:

Anda dapat mendengarkan di componentDidMount, sesuatu seperti komponen ini yang hanya menampilkan dimensi jendela (seperti <span>Window size: 1024 x 768</span>):

import React from 'react';

class ShowWindowDimensions extends React.Component {
  state = { width: 0, height: 0 };
  render() {
    return <span>Window size: {this.state.width} x {this.state.height}</span>;
  }
  updateDimensions = () => {
    this.setState({ width: window.innerWidth, height: window.innerHeight });
  };
  componentDidMount() {
    window.addEventListener('resize', this.updateDimensions);
  }
  componentWillUnmount() {
    window.removeEventListener('resize', this.updateDimensions);
  }
}

@SophieAlpert benar, +1, saya hanya ingin memberikan versi modifikasi dari solusinya, tanpa jQuery , berdasarkan jawaban ini .

var WindowDimensions = React.createClass({
    render: function() {
        return <span>{this.state.width} x {this.state.height}</span>;
    },
    updateDimensions: function() {

    var w = window,
        d = document,
        documentElement = d.documentElement,
        body = d.getElementsByTagName('body')[0],
        width = w.innerWidth || documentElement.clientWidth || body.clientWidth,
        height = w.innerHeight|| documentElement.clientHeight|| body.clientHeight;

        this.setState({width: width, height: height});
        // if you are using ES2015 I'm pretty sure you can do this: this.setState({width, height});
    },
    componentWillMount: function() {
        this.updateDimensions();
    },
    componentDidMount: function() {
        window.addEventListener("resize", this.updateDimensions);
    },
    componentWillUnmount: function() {
        window.removeEventListener("resize", this.updateDimensions);
    }
});

Solusi yang sangat sederhana:

resize = () => this.forceUpdate()

componentDidMount() {
  window.addEventListener('resize', this.resize)
}

componentWillUnmount() {
  window.removeEventListener('resize', this.resize)
}

Ini adalah contoh sederhana dan singkat menggunakan es6 tanpa jQuery.

import React, { Component } from 'react';

export default class CreateContact extends Component {
  state = {
    windowHeight: undefined,
    windowWidth: undefined
  }

  handleResize = () => this.setState({
    windowHeight: window.innerHeight,
    windowWidth: window.innerWidth
  });

  componentDidMount() {
    this.handleResize();
    window.addEventListener('resize', this.handleResize)
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.handleResize)
  }

  render() {
    return (
      <span>
        {this.state.windowWidth} x {this.state.windowHeight}
      </span>
    );
  }
}

kait

import React, { useEffect, useState } from "react";

let App = () => {
  const [windowWidth, setWindowWidth] = useState(0);
  const [windowHeight, setWindowHeight] = useState(0);
  let resizeWindow = () => {
    setWindowWidth(window.innerWidth);
    setWindowHeight(window.innerHeight);
  };

  useEffect(() => {
    resizeWindow();
    window.addEventListener("resize", resizeWindow);
    return () => window.removeEventListener("resize", resizeWindow);
  }, []);

  return (
    <div>
      <span>
        {windowWidth} x {windowHeight}
      </span>
    </div>
  );
};

Pada React 16.8 Anda dapat menggunakan Hooks !

/* globals window */
import React, { useState, useEffect } from 'react'
import _debounce from 'lodash.debounce'

const Example = () => {
  const [width, setWidth] = useState(window.innerWidth)

  useEffect(() => {
    const handleResize = _debounce(() => setWidth(window.innerWidth), 100)

    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    }
  }, [])

  return <>Width: {width}</>
}

Sunting 2018 : sekarang Bereaksi memiliki dukungan kelas pertama untuk konteks

Saya akan mencoba memberikan jawaban umum, yang menargetkan masalah khusus ini tetapi juga masalah yang lebih umum.

Jika Anda tidak peduli dengan efek samping lib, Anda bisa menggunakan sesuatu seperti Packery

Jika Anda menggunakan Flux, Anda bisa membuat toko yang berisi properti jendela sehingga Anda menjaga fungsi render murni tanpa harus menanyakan objek jendela setiap kali.

Dalam kasus lain di mana Anda ingin membangun situs web responsif tetapi Anda lebih suka Bereaksi gaya inline ke kueri media, atau ingin perilaku HTML / JS berubah sesuai dengan lebar jendela, baca terus:

Apa konteks Bereaksi dan mengapa saya membicarakannya

Bereaksi konteks dan tidak dalam API publik dan mengizinkan untuk meneruskan properti ke seluruh hierarki komponen.

Konteks reaksi sangat berguna untuk diteruskan ke seluruh aplikasi Anda hal-hal yang tidak pernah berubah (digunakan oleh banyak kerangka kerja Flux melalui mixin). Anda dapat menggunakannya untuk menyimpan invarian bisnis aplikasi (seperti userId yang terhubung, sehingga tersedia di mana-mana).

Tetapi bisa juga digunakan untuk menyimpan hal-hal yang bisa berubah. Masalahnya adalah ketika konteksnya berubah, semua komponen yang menggunakannya harus di-render ulang dan tidak mudah untuk melakukannya, solusi terbaiknya adalah dengan meng-unmount / mengirim kembali seluruh aplikasi dengan konteks baru. Ingat forceUpdate tidak rekursif .

Jadi, seperti yang Anda pahami, konteksnya praktis, tetapi ada dampak kinerja saat berubah, jadi sebaiknya tidak terlalu sering berubah.

Apa yang dimasukkan ke dalam konteks

• Invarian: seperti userId yang terhubung, sessionToken, apa pun ...
• Hal-hal yang tidak sering berubah

Berikut adalah hal-hal yang tidak sering berubah:

Bahasa pengguna saat ini :

Itu tidak berubah sangat sering, dan ketika itu terjadi, ketika seluruh aplikasi diterjemahkan kita harus membuat ulang semuanya: usecase perubahan bahas panas yang sangat bagus

Properti jendela

Lebar dan tinggi agar tidak sering berubah tetapi ketika kita melakukan tata letak dan perilaku kita mungkin harus beradaptasi. Untuk tata letak terkadang mudah untuk menyesuaikan dengan permintaan media CSS, tetapi kadang-kadang tidak dan membutuhkan struktur HTML yang berbeda. Untuk perilaku Anda harus menangani ini dengan Javascript.

Anda tidak ingin merender ulang semuanya di setiap acara pengubahan ukuran, jadi Anda harus membatalkan aktivitas pengubahan ukuran.

Yang saya mengerti tentang masalah Anda adalah bahwa Anda ingin tahu berapa banyak item yang akan ditampilkan sesuai dengan lebar layar. Jadi, Anda harus mendefinisikan breakpoints responsif terlebih dahulu , dan menyebutkan jumlah jenis tata letak yang berbeda yang dapat Anda miliki.

Sebagai contoh:

• Tata letak "1col", untuk lebar <= 600
• Tata letak "2col", untuk 600 <lebar <1000
• Tata letak "3col", untuk 1000 <= lebar

Pada mengubah ukuran acara (didebitkan), Anda dapat dengan mudah mendapatkan jenis tata letak saat ini dengan menanyakan objek jendela.

Kemudian Anda dapat membandingkan jenis tata letak dengan jenis tata letak sebelumnya, dan jika telah berubah, render ulang aplikasi dengan konteks baru: ini memungkinkan untuk menghindari rendering ulang aplikasi sama sekali ketika pengguna telah memicu mengubah ukuran acara tetapi sebenarnya tipe tata letak tidak berubah, jadi Anda hanya merender ulang saat diperlukan.

Setelah memilikinya, Anda cukup menggunakan jenis tata letak di dalam aplikasi Anda (dapat diakses melalui konteks) sehingga Anda dapat menyesuaikan kelas HTML, perilaku, kelas CSS ... Anda tahu jenis tata letak di dalam fungsi React render sehingga ini berarti Anda dapat dengan aman menulis situs web responsif dengan menggunakan gaya sebaris, dan tidak memerlukan mediaqueries sama sekali.

Jika Anda menggunakan Flux, Anda dapat menggunakan toko alih-alih konteks Bereaksi, tetapi jika aplikasi Anda memiliki banyak komponen responsif, mungkin lebih mudah menggunakan konteks?

Saya menggunakan solusi @senornestor, tetapi untuk sepenuhnya benar Anda harus menghapus pendengar acara juga:

componentDidMount() {
    window.addEventListener('resize', this.handleResize);
}

componentWillUnmount(){
    window.removeEventListener('resize', this.handleResize);
}

handleResize = () => {
    this.forceUpdate();
};

Kalau tidak, Anda akan mendapatkan peringatan:

Peringatan: forceUpdate (...): Hanya dapat memperbarui komponen yang dipasang atau dipasang. Ini biasanya berarti Anda memanggil forceUpdate () pada komponen yang tidak di-mount. Ini adalah no-op. Silakan periksa kode untuk komponen XXX.

Saya akan melewati semua jawaban di atas dan mulai menggunakan react-dimensions Komponen Orde Tinggi.

https://github.com/digidem/react-dimensions

Cukup tambahkan importpanggilan fungsi dan sederhana , dan Anda dapat mengakses this.props.containerWidthdan this.props.containerHeightdi komponen Anda.

// Example using ES6 syntax
import React from 'react'
import Dimensions from 'react-dimensions'

class MyComponent extends React.Component {
  render() (
    <div
      containerWidth={this.props.containerWidth}
      containerHeight={this.props.containerHeight}
    >
    </div>
  )
}

export default Dimensions()(MyComponent) // Enhanced component

Kode ini menggunakan API konteks Bereaksi baru :

  import React, { PureComponent, createContext } from 'react';

  const { Provider, Consumer } = createContext({ width: 0, height: 0 });

  class WindowProvider extends PureComponent {
    state = this.getDimensions();

    componentDidMount() {
      window.addEventListener('resize', this.updateDimensions);
    }

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

    getDimensions() {
      const w = window;
      const d = document;
      const documentElement = d.documentElement;
      const body = d.getElementsByTagName('body')[0];
      const width = w.innerWidth || documentElement.clientWidth || body.clientWidth;
      const height = w.innerHeight || documentElement.clientHeight || body.clientHeight;

      return { width, height };
    }

    updateDimensions = () => {
      this.setState(this.getDimensions());
    };

    render() {
      return <Provider value={this.state}>{this.props.children}</Provider>;
    }
  }

Maka Anda dapat menggunakannya di mana pun Anda inginkan dalam kode Anda seperti ini:

<WindowConsumer>
  {({ width, height }) =>  //do what you want}
</WindowConsumer>

Anda tidak perlu memaksakan re-render.

Ini mungkin tidak membantu OP, tetapi dalam kasus saya, saya hanya perlu memperbarui widthdan heightatribut di kanvas saya (yang tidak dapat Anda lakukan dengan CSS).

Ini terlihat seperti ini:

import React from 'react';
import styled from 'styled-components';
import {throttle} from 'lodash';

class Canvas extends React.Component {

    componentDidMount() {
        window.addEventListener('resize', this.resize);
        this.resize();
    }

    componentWillUnmount() {
        window.removeEventListener('resize', this.resize);
    }

    resize = throttle(() => {
        this.canvas.width = this.canvas.parentNode.clientWidth;
        this.canvas.height = this.canvas.parentNode.clientHeight;
    },50)

    setRef = node => {
        this.canvas = node;
    }

    render() {
        return <canvas className={this.props.className} ref={this.setRef} />;
    }
}

export default styled(Canvas)`
   cursor: crosshair;
`

Tidak yakin apakah ini pendekatan terbaik, tetapi yang berhasil bagi saya adalah pertama kali membuat Toko, saya menyebutnya WindowStore:

import {assign, events} from '../../libs';
import Dispatcher from '../dispatcher';
import Constants from '../constants';

let CHANGE_EVENT = 'change';
let defaults = () => {
    return {
        name: 'window',
        width: undefined,
        height: undefined,
        bps: {
            1: 400,
            2: 600,
            3: 800,
            4: 1000,
            5: 1200,
            6: 1400
        }
    };
};
let save = function(object, key, value) {
    // Save within storage
    if(object) {
        object[key] = value;
    }

    // Persist to local storage
    sessionStorage[storage.name] = JSON.stringify(storage);
};
let storage;

let Store = assign({}, events.EventEmitter.prototype, {
    addChangeListener: function(callback) {
        this.on(CHANGE_EVENT, callback);
        window.addEventListener('resize', () => {
            this.updateDimensions();
            this.emitChange();
        });
    },
    emitChange: function() {
        this.emit(CHANGE_EVENT);
    },
    get: function(keys) {
        let value = storage;

        for(let key in keys) {
            value = value[keys[key]];
        }

        return value;
    },
    initialize: function() {
        // Set defaults
        storage = defaults();
        save();
        this.updateDimensions();
    },
    removeChangeListener: function(callback) {
        this.removeListener(CHANGE_EVENT, callback);
        window.removeEventListener('resize', () => {
            this.updateDimensions();
            this.emitChange();
        });
    },
    updateDimensions: function() {
        storage.width =
            window.innerWidth ||
            document.documentElement.clientWidth ||
            document.body.clientWidth;
        storage.height =
            window.innerHeight ||
            document.documentElement.clientHeight ||
            document.body.clientHeight;
        save();
    }
});

export default Store;

Lalu saya menggunakan toko itu di komponen saya, agak seperti ini:

import WindowStore from '../stores/window';

let getState = () => {
    return {
        windowWidth: WindowStore.get(['width']),
        windowBps: WindowStore.get(['bps'])
    };
};

export default React.createClass(assign({}, base, {
    getInitialState: function() {
        WindowStore.initialize();

        return getState();
    },
    componentDidMount: function() {
        WindowStore.addChangeListener(this._onChange);
    },
    componentWillUnmount: function() {
        WindowStore.removeChangeListener(this._onChange);
    },
    render: function() {
        if(this.state.windowWidth < this.state.windowBps[2] - 1) {
            // do something
        }

        // return
        return something;
    },
    _onChange: function() {
        this.setState(getState());
    }
}));

FYI, file-file ini sebagian telah dipangkas.

Saya tahu ini telah dijawab tetapi saya pikir saya akan membagikan solusi saya sebagai jawaban teratas, meskipun hebat, sekarang mungkin sedikit ketinggalan jaman.

    constructor (props) {
      super(props)

      this.state = { width: '0', height: '0' }

      this.initUpdateWindowDimensions = this.updateWindowDimensions.bind(this)
      this.updateWindowDimensions = debounce(this.updateWindowDimensions.bind(this), 200)
    }

    componentDidMount () {
      this.initUpdateWindowDimensions()
      window.addEventListener('resize', this.updateWindowDimensions)
    }

    componentWillUnmount () {
      window.removeEventListener('resize', this.updateWindowDimensions)
    }

    updateWindowDimensions () {
      this.setState({ width: window.innerWidth, height: window.innerHeight })
    }

Satu-satunya perbedaan adalah saya melakukan debouncing (hanya menjalankan setiap 200 ms) updateWindowDimensions pada event resize untuk sedikit meningkatkan kinerja, TETAPI jangan debouncing ketika dipanggil ComponentDidMount.

Saya menemukan debounce membuatnya agak lambat untuk dipasang kadang-kadang jika Anda memiliki situasi di mana ia sering dipasang.

Hanya sedikit pengoptimalan tetapi harap ini membantu seseorang!

Hanya untuk meningkatkan solusi @ senornestor untuk digunakan forceUpdatedan solusi @ gkri untuk menghapus resizependengar acara pada komponen unmount:

1. jangan lupa untuk membatasi (atau menolak) panggilan untuk mengubah ukuran
2. pastikan bind(this)di konstruktor

import React from 'react'
import { throttle } from 'lodash'

class Foo extends React.Component {
  constructor(props) {
    super(props)
    this.resize = throttle(this.resize.bind(this), 100)
  }

  resize = () => this.forceUpdate()

  componentDidMount() {
    window.addEventListener('resize', this.resize)
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.resize)
  }

  render() {
    return (
      <div>{window.innerWidth} x {window.innerHeight}</div>
    )
  }
}

Metode lain adalah dengan menggunakan keadaan "dummy" alih-alih forceUpdate:

import React from 'react'
import { throttle } from 'lodash'

class Foo extends React.Component {
  constructor(props) {
    super(props)
    this.state = { foo: 1 }
    this.resize = throttle(this.resize.bind(this), 100)
  }

  resize = () => this.setState({ foo: 1 })

  componentDidMount() {
    window.addEventListener('resize', this.resize)
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.resize)
  }

  render() {
    return (
      <div>{window.innerWidth} x {window.innerHeight}</div>
    )
  }
}

componentDidMount() {

    // Handle resize
    window.addEventListener('resize', this.handleResize);
}




handleResize = () => {
    this.renderer.setSize(this.mount.clientWidth, this.mount.clientHeight);
    this.camera.aspect = this.mount.clientWidth / this.mount.clientHeight;
    this.camera.updateProjectionMatrix();
};

Hanya perlu mendefinisikan fungsi ukuran acara.

Kemudian perbarui ukuran penyaji (kanvas), tetapkan rasio aspek baru untuk kamera.

Lepas dan remouting adalah solusi gila menurut saya ....

di bawah ini adalah mount jika diperlukan.

            <div
                className={this.state.canvasActive ? 'canvasContainer isActive' : 'canvasContainer'}
                ref={mount => {
                    this.mount = mount;
                }}
            />

Ingin membagikan hal keren yang baru saja saya temukan menggunakan ini window.matchMedia

const mq = window.matchMedia('(max-width: 768px)');

  useEffect(() => {
    // initial check to toggle something on or off
    toggle();

    // returns true when window is <= 768px
    mq.addListener(toggle);

    // unmount cleanup handler
    return () => mq.removeListener(toggle);
  }, []);

  // toggle something based on matchMedia event
  const toggle = () => {
    if (mq.matches) {
      // do something here
    } else {
      // do something here
    }
  };

.matches akan mengembalikan benar atau salah jika jendela lebih tinggi atau lebih rendah dari nilai lebar-max yang ditentukan, ini berarti tidak perlu mencekik pendengar, karena matchMedia hanya menyala sekali ketika boolean berubah.

Kode saya dapat dengan mudah disesuaikan untuk dimasukkan useStateuntuk menyimpan pengembalian boolean matchMedia, dan menggunakannya untuk membuat komponen, tindakan kebakaran, dll.

Harus mengikatnya ke 'ini' di konstruktor untuk membuatnya bekerja dengan sintaks Kelas

class MyComponent extends React.Component {
  constructor(props) {
    super(props)
    this.resize = this.resize.bind(this)      
  }
  componentDidMount() {
    window.addEventListener('resize', this.resize)
  }
  componentWillUnmount() {
    window.removeEventListener('resize', this.resize)
  }
}

Terima kasih atas jawabannya. Inilah React + Recompose saya . Ini adalah Fungsi Orde Tinggi yang mencakup windowHeightdan windowWidthproperti ke komponen.

const withDimensions = compose(
 withStateHandlers(
 ({
   windowHeight,
   windowWidth
 }) => ({
   windowHeight: window.innerHeight,
   windowWidth: window.innerWidth
 }), {
  handleResize: () => () => ({
    windowHeight: window.innerHeight,
    windowWidth: window.innerWidth
  })
 }),
 lifecycle({
   componentDidMount() {
   window.addEventListener('resize', this.props.handleResize);
 },
 componentWillUnmount() {
  window.removeEventListener('resize');
 }})
)

https://github.com/renatorib/react-sizes adalah HOC untuk melakukan ini sambil tetap mempertahankan kinerja yang baik.

import React from 'react'
import withSizes from 'react-sizes'

@withSizes(({ width }) => ({ isMobile: width < 480 }))
class MyComponent extends Component {
  render() {
    return <div>{this.props.isMobile ? 'Is Mobile' : 'Is Not Mobile'}</div>
  }
}

export default MyComponent

Untuk alasan ini lebih baik adalah jika Anda menggunakan data ini dari data file CSS atau JSON, dan kemudian dengan menetapkan data ini status baru dengan this.state ({width: "some value", height: "some value"}); atau menulis kode yang menggunakan data data layar lebar dalam pekerjaan sendiri jika Anda ingin menampilkan gambar yang responsif