Code
2023-09-15 10:00:02

用React重新渲染浏览器视图

当浏览器窗口调整大小时，如何让React重新渲染视图?

背景

我有一些块，我想在页面上单独布局，但我也希望他们更新时，浏览器窗口的变化。最终的结果将是像Ben Holland的Pinterest布局，但使用React而不仅仅是jQuery。我还有一段路要走。

Code

这是我的应用程序:

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')
)

然后我有Block组件(相当于上面Pinterest例子中的Pin):

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

和block的列表/集合:

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

问题

我应该添加jQuery的窗口大小调整?如果有，在哪里?

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

有没有更“React”的方式来做到这一点?

当前回答

使用React钩子:

你可以定义一个自定义钩子来监听窗口大小调整事件，就像这样:

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

这里的优点是逻辑是封装的，您可以在任何想要使用窗口大小的地方使用这个Hook。

使用React类:

你可以在componentDidMount中监听，类似于这个组件，它只显示窗口尺寸(如<span>窗口大小: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);
  }
}
2013-09-25 20:21:57

其他回答

不确定这是否是最好的方法，但对我来说有效的方法是首先创建一个商店，我称之为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;

然后我在我的组件中使用这个存储，就像这样:

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

供你参考，这些文件被部分删减了。

2015-06-19 18:53:31

试试这个:

resize = () => this.forceUpdate()

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

componentWillUnmount() {
  window.removeEventListener('resize', this.resize)
}
2022-03-25 04:25:20

Edit 2018:现在React拥有对上下文的一流支持

我将尝试给出一个一般的答案，针对这个特定的问题，但也针对一个更普遍的问题。

如果您不关心副作用库，您可以简单地使用Packery之类的东西

如果你使用Flux，你可以创建一个包含窗口属性的存储，这样你就可以保持一个纯粹的呈现函数，而不必每次都查询窗口对象。

在其他情况下，你想建立一个响应式网站，但你更喜欢React内联样式的媒体查询，或者希望HTML/JS行为根据窗口宽度改变，请继续阅读:

什么是React上下文?为什么我要谈论它

React上下文不在公共API中，允许将属性传递给整个组件层次结构。

React上下文特别有用，它可以传递给你整个应用程序中永远不会改变的东西(许多Flux框架通过mixin使用它)。你可以用它来存储应用程序业务不变量(比如连接的userId，这样它就可以在任何地方使用)。

但它也可以用来存储可以改变的东西。问题是，当上下文改变时，所有使用它的组件都应该重新呈现，这并不容易做到，最好的解决方案通常是卸载/重新挂载整个应用程序与新的上下文。记住forceUpdate不是递归的。

因此，正如您所理解的，上下文是实用的，但是当它改变时，会对性能产生影响，所以它不应该经常改变。

把什么放在上下文中

不变量:比如连接的userId, sessionToken，等等… 不经常改变的东西

以下是一些不会经常改变的东西:

当前用户语言:

它不会经常改变，当它改变时，整个应用程序都被翻译了，我们必须重新渲染所有内容:这是热语言变化的一个非常好的用例

窗口属性

宽度和高度不会经常改变，但当我们这样做时，我们的布局和行为可能不得不适应。对于布局，有时很容易使用CSS mediaqueries进行自定义，但有时不是，需要不同的HTML结构。对于行为，你必须用Javascript来处理。

你不希望在每个调整大小事件上重新渲染所有内容，所以你必须撤消调整大小事件。

我对你的问题的理解是，你想知道根据屏幕宽度显示多少项。因此，您必须首先定义响应式断点，并枚举可以拥有的不同布局类型的数量。

例如:

布局“1col”，宽度<= 600 布局为“2col”，用于600 < width < 1000 布局为“3col”，用于1000 <= width

在调整大小事件(debpublished)上，您可以通过查询窗口对象轻松获得当前布局类型。

然后你可以比较布局类型与以前的布局类型，如果它已经改变了，重新呈现应用程序与一个新的上下文:这允许避免重新呈现应用程序在用户有触发调整大小事件，但实际上布局类型没有改变，所以你只在需要时重新呈现。

一旦你有了它，你就可以简单地在你的应用程序中使用布局类型(通过上下文访问)，这样你就可以自定义HTML、行为、CSS类……你知道你的布局类型在React渲染函数中，所以这意味着你可以通过使用内联样式安全地编写响应式网站，而根本不需要介质查询。

如果你使用Flux，你可以使用一个商店而不是React上下文，但如果你的应用程序有很多响应组件，也许使用上下文更简单?

2015-07-22 10:09:14

使用React钩子:

你可以定义一个自定义钩子来监听窗口大小调整事件，就像这样:

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

这里的优点是逻辑是封装的，您可以在任何想要使用窗口大小的地方使用这个Hook。

使用React类:

你可以在componentDidMount中监听，类似于这个组件，它只显示窗口尺寸(如<span>窗口大小: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);
  }
}
2013-09-25 20:21:57

只是为了改进@senornestor使用forceUpdate的解决方案和@gkri在组件卸载时删除resize事件监听器的解决方案:

不要忘记抑制(或撤消)调整大小的要求 确保在构造函数中绑定(this)

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

另一种方法是使用一个“dummy”状态来代替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>
    )
  }
}
2019-07-10 03:14:21

推荐文章

aliyun

最新文章

标签

2024 code 京ICP备15047053号-1