javascript - How to trigger re-render on model change in ReactJS? - Stack Overflow

admin管理员组

文章数量:1403226

I am creating a react ponent using

React.render(<ReactComponent data="myData">, document.body);

Once the data model changes, I call render again using

React.render(<ReactComponent data="myData">, document.body);

Is this the right/remended way to update my HTML?
Will this utilize the advantages of the React virtual DOM (i.e. rendering only the elements that have actually changed).

Also, should I be using state or properties when passing in myData?

I am creating a react ponent using

React.render(<ReactComponent data="myData">, document.body);

Once the data model changes, I call render again using

React.render(<ReactComponent data="myData">, document.body);

Is this the right/remended way to update my HTML?
Will this utilize the advantages of the React virtual DOM (i.e. rendering only the elements that have actually changed).

Also, should I be using state or properties when passing in myData?

• javascript
• reactjs-flux

Share Improve this question Follow edited Feb 1, 2017 at 17:50 user692942 16.4k88 gold badges8484 silver badges190190 bronze badges asked Apr 17, 2015 at 14:05 Amit BehereAmit Behere 8211 silver badge66 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

You should be rendering only one main App ponent which does AJAX requests etc and uses the data model inside its render function to update sub ponents.

When creating React ponents you should always keep the use of state minimal and move it up to the top level ponent, Instead you should use props to render child ponents.

This article helped me a lot when i was first getting started with React: https://github./uberVU/react-guide/blob/master/props-vs-state.md

so something like:

var App = React.createClass({
    render: function(){
        return (
            <div>
                <input type="button" onClick={this.handleClick}/>
                <Dropdown items={this.state.countries}/>
            </div>
        )
    },
    getInitialState: function(){
        return {countries: {}};
    },
    ponentDidMount: function(){
        var self = this;
        $.getJSON("countries", function(err, countries){
            self.setState({countries: countries});
        });
    },
    handleClick: function(){
        // every time the user does something, 
        // all you need to do is to update the state of the App 
        // which is passed as props to sub ponents
    }
})

React.render(React.createElement(App, {}), document.body);

本文标签： javascriptHow to trigger rerender on model change in ReactJSStack Overflow