首頁(yè) 猿問(wèn) React的一個(gè)菜鳥(niǎo)問(wèn)題

React的一個(gè)菜鳥(niǎo)問(wèn)題

JavaScript

千萬(wàn)里不及你 2018-09-13 17:08:06

開(kāi)始自學(xué)react，自己寫(xiě)了一個(gè)登錄框組件，遇到了一個(gè)問(wèn)題教程中告訴我react渲染UI是通過(guò)不同的狀態(tài)，于是我在onClick中使用setState改變登錄框的display屬性，從而達(dá)到點(diǎn)擊出現(xiàn)再點(diǎn)擊消失。但是我又看到另一種寫(xiě)法。在onClick中通過(guò)React.findDOMNode(this.refs.loginbar)獲取到真實(shí)的dom元素，然后修改display。這就又和原始的獲取dom結(jié)點(diǎn)，修改dom結(jié)點(diǎn)的思路一致了我想知道這兩種有什么區(qū)別呢，哪一種更推薦，各自適用于什么場(chǎng)景呢，請(qǐng)各位回答我這個(gè)小菜鳥(niǎo)的問(wèn)題?(＾?＾●)?還有一個(gè)問(wèn)題，我這個(gè)組件很初級(jí)，假如我想使用單例模式，讓登錄框只在點(diǎn)擊時(shí)才新建，之后每次都返回同一個(gè)登錄框?qū)ο螅@就涉及到新建dom結(jié)點(diǎn)了，用state的思想怎么做到呢？

查看完整描述

1 回答

梵蒂岡之花

TA貢獻(xiàn)1900條經(jīng)驗(yàn) 獲得超5個(gè)贊

官方推薦第一種方案，因?yàn)镽eact的渲染都是通過(guò)改編state來(lái)實(shí)現(xiàn)的。第二種方案和React設(shè)計(jì)思想不符。
至于異同，第一種是觸發(fā)React生命周期更新，觸發(fā)了了React的虛擬DOM改變，效率更高。
第二種完全是不理解React的人才能寫(xiě)出來(lái)的，這種方法完全沒(méi)有用React的必要了，React的特點(diǎn)就是虛擬DOM提高性能效率，直接操作DOM失去了意義。

關(guān)于動(dòng)態(tài)生成，我的理解答案是醬紫的：

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會(huì)創(chuàng)建一次組件，點(diǎn)擊時(shí)調(diào)用它并顯示就OK，關(guān)閉就是隱藏它，或者其他類似的方法都可以隨便你怎么來(lái)。爪機(jī)碼字。

反對(duì) 回復(fù) 2018-10-09