javascript - React的一个菜鸟问题

问题描述

问 题

开始自学react，自己写了一个登录框组件，遇到了一个问题

教程中告诉我react渲染UI是通过不同的状态，于是我在onClick中使用setState改变登录框的display属性，从而达到点击出现再点击消失。

但是我又看到另一种写法。在onClick中通过React.findDOMNode(this.refs.loginbar)获取到真实的dom元素，然后修改display。这就又和原始的获取dom结点，修改dom结点的思路一致了

我想知道这两种有什么区别呢，哪一种更推荐，各自适用于什么场景呢，请各位回答我这个小菜鸟的问题♪(＾∀＾●)ﾉ

还有一个问题，我这个组件很初级，假如我想使用单例模式，让登录框只在点击时才新建，之后每次都返回同一个登录框对象，这就涉及到新建dom结点了，用state的思想怎么做到呢？

解决方案

官方推荐第一种方案，因为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，关闭就是隐藏它，或者其他类似的方法都可以随便你怎么来。爪机码字。

这篇关于javascript - React的一个菜鸟问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！