亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

在React.js表單組件中使用狀態或引用?

在React.js表單組件中使用狀態或引用?

慕哥6287543 2019-10-15 10:29:18
我從React.js開始,我想做一個簡單的表格,但是在文檔中我找到了兩種方法。在第一種是使用參考文獻:var CommentForm = React.createClass({  handleSubmit: function(e) {    e.preventDefault();    var author = React.findDOMNode(this.refs.author).value.trim();    var text = React.findDOMNode(this.refs.text).value.trim();    if (!text || !author) {      return;    }    // TODO: send request to the server    React.findDOMNode(this.refs.author).value = '';    React.findDOMNode(this.refs.text).value = '';    return;  },  render: function() {    return (      <form className="commentForm" onSubmit={this.handleSubmit}>        <input type="text" placeholder="Your name" ref="author" />        <input type="text" placeholder="Say something..." ref="text" />        <input type="submit" value="Post" />      </form>    );  }});和第二個是使用狀態的陣營部件內部:var TodoTextInput = React.createClass({  getInitialState: function() {    return {      value: this.props.value || ''    };  },  render: function() /*object*/ {    return (      <input className={this.props.className}      id={this.props.id}      placeholder={this.props.placeholder}      onBlur={this._save}      value={this.state.value}      />    );  },  _save: function() {    this.props.onSave(this.state.value);    this.setState({value: ''  });});如果存在,我看不到這兩種選擇的優缺點。謝謝。
查看完整描述

3 回答

?
慕容3067478

TA貢獻1773條經驗 獲得超3個贊

我已經看到一些人引用以上答案作為“從不使用refs”的原因,我想發表自己的觀點(以及與我交談過的其他一些React開發人員)。

在談論將其用于組件實例時,“不要使用引用”是正確的。意思是,您不應使用引用作為獲取組件實例并在其上調用方法的方法。這是使用裁判的不正確方法,并且是裁判很快走到南邊的時候。

使用引用的正確(且非常有用)的方法是當您使用引用從DOM中獲得一些價值時。例如,如果您有一個將引用附加到該輸入的輸入字段,則稍后通過該引用獲取值就可以了。如果沒有這種方式,您就需要經過一個精心策劃的過程,以使您的輸入字段與您的本地州或流量存儲區保持最新-這似乎是不必要的。

2019編輯:未來的朋友你好。除了我幾年前提到的^之外,借助React Hooks,引用也是跟蹤渲染之間的數據的好方法,并且不僅限于獲取DOM節點。


查看完整回答
反對 回復 2019-10-15
?
米琪卡哇伊

TA貢獻1998條經驗 獲得超6個贊

一般來說,refs與React的聲明式哲學背道而馳,因此您應將它們用作最后的選擇。state / props盡可能使用。


要了解您在哪里使用refsvs state / props,讓我們看一下React遵循的一些設計原則。


每個React 文檔關于refs


避免將ref用于可以聲明式完成的任何事情。


Per React關于逃生艙口的設計原則


如果很難以聲明的方式表達一些對構建應用有用的模式,那么我們將為其提供命令性的API。(他們鏈接到這里的裁判)


這意味著React的團隊建議避免refs和使用state / props以反應性/聲明性方式可以完成的任何事情。


@Tyler McGinnis提供了一個很好的答案,并指出


正確(且非常有用)的引用使用方法是當您使用它們從DOM中獲得一些價值時...


盡管可以做到這一點,但您將與React的理念背道而馳。如果您在輸入中有價值,那么它肯定來自state / props。為了保持代碼的一致性和可預測性,您還應該堅持在state / props那里。我承認refs有時可以為您提供更快的解決方案這一事實,因此,如果您進行概念驗證,那么快速而骯臟的做法是可以接受的。


這給我們留下了幾個具體的使用情況進行refs


管理焦點,文本選擇或媒體播放。觸發命令式動畫。與第三方DOM庫集成。


查看完整回答
反對 回復 2019-10-15
  • 3 回答
  • 0 關注
  • 630 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號