0

Im changing the style of a component root div by browser resize. This triggers every single child to render also. Im in process of doing a complex map with many child components including tables and fb fixed table component.

The component has basicly 3 child tables one of them also gets the new width/height from the main component. All are in there own divs.

I just started with react a few days ago, hope someone can give me tips. Please let me know if something is unclear.

Resizing:

getInitialState: function() {
    return {
        windowWidth: window.innerWidth,
        windowHeight: window.innerHeight
    };
},

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

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

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

style object

    var style = {
        width: this.state.windowWidth,
        height: this.state.windowHeight,
        position: "absolute"
    };

render()

    return (
        <div className="map_quadrant" ref="map_quadrant" style={style}>

...

                <div className="column">
                    <div className="ui top attached segment">
                        <div className="ui top attached label">Current Selection Summary for {this.props.model._name}</div>
                        <SummaryTable model_name={this.props.model._name} model={this.props.model} keys={this.props.model.simpleSchema()._schemaKeys} />
                    </div>
                </div>
                <div>
                    <MasterTable width={this.state.windowWidth} height={this.state.windowHeight/2} model_name={this.props.model._name} data={this.state.model_data} keys={this.props.model.simpleSchema()._schemaKeys} />
                </div>

(its experimental code, so definitely not optimal)

Stefan
  • 68
  • 7
  • Your setting up the event listener on the window correct, have you put a break tag in your `render` function (and `handleResize` fx) to see that it's being called? – Taysky Aug 19 '15 at 21:58
  • yes its beeing called and everything working, just the problem is that all childs are rerendered without any data change which makes the whole thing very slow – Stefan Aug 20 '15 at 03:36
  • React will rerender even if you call `this.setState({})` they way it works is that it will see changes in their shadow dom and then make only the changes that are necessary to the actual DOM. Check out `shouldComponentUpdate` which may help with the slowness of the rerendering if it's a problem: https://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate – Taysky Aug 20 '15 at 17:58

0 Answers0