如何在 ReactJS 中触发模型更改的重新渲染？

Question

我正在使用

创建一个 React 组件

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

数据模型更改后，我使用

再次调用渲染

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

这是 right/recommended 更新我的 HTML 的方式吗？
这会利用 React virtual DOM 的优势吗（即仅呈现实际更改的元素）。

此外，我应该在传入 myData 时使用状态还是属性？

Answer 1

您应该只渲染一个主要的 App 组件，它执行 AJAX 请求等并使用其渲染函数中的数据模型来更新子组件。

在创建 React 组件时，您应该始终将状态的使用保持在最低限度，并将其移至顶层组件，而应该使用 props 来渲染子组件。

这篇文章在我刚开始使用 React 时对我帮助很大：https://github.com/uberVU/react-guide/blob/master/props-vs-state.md

像这样：

var App = React.createClass({
    render: function(){
        return (
            <div>
                <input type="button" onClick={this.handleClick}/>
                <Dropdown items={this.state.countries}/>
            </div>
        )
    },
    getInitialState: function(){
        return {countries: {}};
    },
    componentDidMount: 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 components
    }
})

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

如何在 ReactJS 中触发模型更改的重新渲染？

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

javascript

reactjs-flux