探讨 React 生命周期何时渲染数据最友好

根据业务需求，要做一个用户收藏作品列表页，如图

作品列表页

如果用户没有收藏作品时，提示用户：

没有收藏作品

项目是基于 Reflux 的，直接上代码：

class UserCollectList extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      works: [],
    }
  }

  componentWillMount() {
    // 这里向服务器请求数据（数据是一组数组）
     Actions.xxxx()
  }

  onSearchSuccess(data) {
    // Oh！从 store �里拿到数据了，存在 state 里
    this.setState({works: data})
  }

  render() {
    let CollectRow = 

    判断一下用户关注的有数据没
    if (!this.state.works.length) { 
      CollectRow = 
你还没有收藏过作品：）
    } else {
      CollectRow = this.state.works.map((data, i) => 
{data}
)
    }

    return 
{CollectRow}
  }
}

// 一旦 Store 的数据发生变化，onSearchSuccess 就能随时接受数据
ReactMixin.onClass(UserCollectList, Reflux.listenTo(Store, 'onSearchSuccess'));

是不是看起来没什么问题？
实际测试时，当用户有数据时，每次进入这个页面，（CollectRow）会先呈现：

`CollectRow =

你还没有收藏过作品：）

`

然后立刻（CollectRow）页面又恢复成了：

`

{data}

`

** 问题出在 if (!this.state.works.length)上，因为页面刚加载时 this.state.works.length确实是 false，等服务器数据传递过来 又变成 true 了。 **

** 解决办法： **

class UserCollectList extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      CollectRow: 
,
    }
  }

  componentWillMount() {
    // 这里向服务器请求数据（数据是一组数组）
     Actions.xxxx()
  }

  onSearchSuccess(data) {
    // Oh！从 store �里拿到数据了，存在 state 里并使用
    if (data.length) { 
      this.setState({
        CollectRow:  
你还没有收藏过作品：）
      })
    } else {
      this.setState({
        CollectRow : data.map((dataRow, i) => 
{dataRow}
)
      })
    }

  render() {
    return 
{this.state.CollectRow}
  }
}

ReactMixin.onClass(UserCollectList, Reflux.listenTo(Store, 'onSearchSuccess'));

** 在 onSearchSuccess() 方法（连接 store 和 component 的「桥梁」 ）里，数据通过 map() 处理后直接放入 state 里。**

测试了下，页面不会出现上述的问题了：）
当然，如果数据过多时，最好加一个 loading 小动画。

如果疑问，欢迎评论提问~
如有更好的方法，请赐教~

开源项目 https://github.com/2remote/yaopai-mobile
欢迎给我们提 issue 或 pull request。