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&nbsp;App&nbsp;extends&nbsp;React.Component&nbsp;{ &nbsp;&nbsp;constructor(props)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;super(props);&nbsp;&nbsp;&nbsp;&nbsp;this.state&nbsp;=&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;login&nbsp;:&nbsp;[] &nbsp;&nbsp;&nbsp;&nbsp;}; &nbsp;&nbsp;} &nbsp;&nbsp;render&nbsp;()&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;(<div>{this.state.login}</div>); &nbsp;&nbsp;} &nbsp;&nbsp;createLogin()&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(this.state.login.length&nbsp;==&nbsp;0)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.setState({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;login&nbsp;:&nbsp;[<Login&nbsp;/>], &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;} }createLogin会创建一次组件，点击时调用它并显示就OK，关闭就是隐藏它，或者其他类似的方法都可以随便你怎么来。爪机码字。