如何制作一个可以在没有数据的情况下渲染然后用数据渲染的 React 组件？答案

【问题标题】：How to make a react component that can be rendered with no data and later rendered with data?如何制作一个可以在没有数据的情况下渲染然后用数据渲染的 React 组件？
【发布时间】：2015-07-25 14:32:26
【问题描述】：

我有一个我确定很常见的情况，但我还没有学会完成它的反应方式。假设我有这个：

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

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

我的问题是我应该如何创建 SomeSubView 反应组件，以便它可以在没有任何数据的情况下正确渲染，然后在数据可用时渲染显示一些数据。我已经设置了发布/订阅系统，所以我希望能够订阅一个事件并以这种方式将数据获取到 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>
        )
    }
});

我不知道这是否是 react 组件上的 state 或 props 的情况？我不知道在渲染函数中放置条件是否是最佳做法？

【问题讨论】：

state 是你需要的。
是的，把数据放到SomeSubView的state中。是的，通常情况下，render 是有条件的，取决于 props 和 state。

标签： javascript javascript-events reactjs

【解决方案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>
        )
    }
});

如果变量 data 没有设置，React 会简单地将其视为不存在。

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

【讨论】：

【解决方案2】：

你必须使用像 user3728205 所说的状态，especifically setState()。

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

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

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

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

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

这就是说，“无论何时”你通过 setState 更新你的状态，React 都会再次为你执行方法渲染。所以，你应该根据状态来放置你的显示逻辑，当它改变时，显示的视图也会改变。

我说“无论何时”，因为 React 不会立即触发重新渲染，而是会创建一个挂起的状态转换。

永远不要直接改变 this.state，因为之后调用 setState() 可能替换您所做的突变。把 this.state 当作是不可变。

setState() 不会立即改变 this.state 而是创建一个等待状态转换。调用 this 后访问 this.state 方法可能会返回现有值。

不保证 setState 调用的同步操作并且调用可能会被批处理以提高性能。

setState() 将始终触发重新渲染，除非有条件渲染逻辑在 shouldComponentUpdate() 中实现。如果可变正在使用对象，并且无法在其中实现逻辑 shouldComponentUpdate()，只有在新状态时才调用 setState() 与之前的状态不同将避免不必要的重新渲染。

有关 React 魔力的更多信息，您应该阅读this。 https://facebook.github.io/react/docs/reconciliation.html

simple example 或许可以提供帮助。我建议阅读非常容易理解和实现的通量架构（关于利用单向数据流），并且你有像Fluxxor 这样的实现，它有助于通量的使用。这是为您的 pubsub 部分准备的。

【讨论】：