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

Posted 2023-02-22

【中文标题】如何在 ReactJS 中触发模型更改的重新渲染？

【英文标题】：How to trigger re-render on model change in ReactJS?

【发布时间】：2015-06-24 10:33:57

【问题描述】：

我正在使用

创建一个反应组件

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

一旦数据模型发生变化，我会再次使用

调用 render

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

这是更新我的 html 的正确/推荐方式吗？ 这是否会利用 React 虚拟 DOM 的优势（即仅渲染实际发生变化的元素）。

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

【参考方案1】：

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

在创建 React 组件时，您应该始终尽量减少 state 的使用，并将其移至***组件，而不是使用 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);

【讨论】：

谢谢！我确实读过，我只是有点困惑。感谢您的澄清。