如何制作一个无数据的渲染组件，以后再用数据渲染？

Question

我有一种情况，我确定是很普遍的，只是我还没有学到完成它的反应方式。 假设我有这个：

var appView = new React.createClass({
    render: function() {
        return (
            <div>
                <SomeSubview/>
            </div>
        )
    }
});

React.render(
    React.createElement(appView),
    $('#app').get(0)
);

我的问题是我应该如何创建SomeSubView react组件，以便它可以正确呈现而不包含任何数据，然后在可用数据时稍后呈现显示一些数据。 我已经设置了发布/订阅系统，所以我希望能够订阅一个事件并以这种方式将数据获取到SomeSubView。 SomeSubView可能看起来像这样：

SomeSubView = new React.createClass({
    componentDidMount: function() {
        pubsub.subscribe({
            callback: function() {
                // something the sets the state or a prop of this component
            }
        });
    },
    render: function() {
        // something that renders properly when 
        // there is no data and renders the data when there is data
        return (
            <div></div>
        )
    }
});

我不能说这是否是反应组件的状态或道具的案例？ 我不知道将条件放在渲染函数中是否是最佳实践？

Answer 1

在SomeSubView中，只需检查渲染函数中是否有数据，但要返回标记。

像这样：

SomeSubView = new React.createClass({
    componentDidMount: function() {
        pubsub.subscribe({
            callback: function() {
                // something the sets the state or a prop of this component
            }
        });
    },
    render: function() {
        // something that renders properly when 
        if( this.state.data.length > 0 ){
            var data = <li>{this.state.data}</li>;
        }

        return (
            <div>{data}</div>
        )
    }
});

如果未设置变量数据，React将简单地将其作为不存在的对象传递。

当然，您也可以在状态数据上使用.map（）来循环标记，就像大多数渲染示例一样。

Answer 2

您必须使用像user3728205这样的状态， 特别是 setState（）。

setState(function|object nextState[, function callback])

将nextState与当前状态合并。 这是从事件处理程序和服务器请求回调触发UI更新的主要方法。

第一个参数可以是一个对象（包含零个或多个要更新的键）或一个函数（状态和属性），该函数返回一个包含要更新的键的对象。

这是简单的对象用法...

setState({mykey: 'my new value'});

这就是说，无论何时“通过setState更新状态”，React都会再次为您执行方法render。 因此，您应该基于状态放置显示逻辑，当它改变时，显示的视图也会改变。

我之所以说“无论何时”，是因为React不会立即触发重新渲染，而是会创建待处理的状态转换。

切勿直接更改this.state，因为之后调用setState（）可能会替换您所做的更改。 将this.state视为不可变的。

setState（）不会立即使this.state发生突变，但会创建一个挂起的状态转换。 调用此方法后访问this.state可能会返回现有值。

无法保证对setState的调用的同步操作，并且可能会为提高性能而批量调用。

除非在shouldComponentUpdate（）中实现了条件渲染逻辑，否则setState（）将始终触发重新渲染。 如果正在使用可变对象，并且逻辑不能在shouldComponentUpdate（）中实现，则仅当新状态不同于先前状态时才调用setState（）可以避免不必要的重新渲染。

有关神奇的更多信息作出反应，你应该阅读此 。 https://facebook.github.io/react/docs/reconciliation.html

一个简单的示例可能会有所帮助。 而且我建议您阅读易于理解和实现的磁通架构（关于利用单向数据流），并且您将拥有诸如Fluxxor这样的实现来简化磁通的使用。 这是您的pubsub部分。