React的一个菜鸟问题

Question

开始自学react，自己写了一个登录框组件，遇到了一个问题教程中告诉我react渲染UI是通过不同的状态，于是我在onClick中使用setState改变登录框的display属性，从而达到点击出现再点击消失。但是我又看到另一种写法。在onClick中通过React.findDOMNode(this.refs.loginbar)获取到真实的dom元素，然后修改display。这就又和原始的获取dom结点，修改dom结点的思路一致了我想知道这两种有什么区别呢，哪一种更推荐，各自适用于什么场景呢，请各位回答我这个小菜鸟的问题♪(＾∀＾●)ﾉ还有一个问题，我这个组件很初级，假如我想使用单例模式，让登录框只在点击时才新建，之后每次都返回同一个登录框对象，这就涉及到新建dom结点了，用state的思想怎么做到呢？

Answer 1

官方推荐第一种方案，因为React的渲染都是通过改编state来实现的。第二种方案和React设计思想不符。
至于异同，第一种是触发React生命周期更新，触发了了React的虚拟DOM改变，效率更高。
第二种完全是不理解React的人才能写出来的，这种方法完全没有用React的必要了，React的特点就是虚拟DOM提高性能效率，直接操作DOM失去了意义。

关于动态生成，我的理解答案是酱紫的：

class App extends React.Component {
  constructor(props) {    super(props);    this.state = {
      login : []
    };
  }
  render () {    return (<div>{this.state.login}</div>);
  }
  createLogin() {    if (this.state.login.length == 0)      this.setState({
        login : [<Login />],
      });
  }
}

createLogin会创建一次组件，点击时调用它并显示就OK，关闭就是隐藏它，或者其他类似的方法都可以随便你怎么来。爪机码字。