雖然我喜歡ReactJS，但我可以說有時(shí)候我發(fā)現(xiàn)，在PreactJS之前很容易進(jìn)行的交互非常煩人，或者至少是“間接”的。一個(gè)例子是正確地確保<input> 當(dāng)單擊不同組件中的按鈕時(shí)，給定元素變得集中；在過去，這是三行代碼，但是使用React可以更多。

讓我們看一些<input> 使用ReactJS正確關(guān)注元素的策略。

autofocus

該autofocus 屬性在ReactJS中被接受，但僅當(dāng)<input> 使用React重新渲染該元素時(shí)：

<input type="text" autofocus="true" />

autofocus 易于使用，但僅在<input> 最初呈現(xiàn)時(shí)起作用；由于React只能智能地重新渲染已更改的元素，因此該autofocus 屬性在所有情況下都不可靠。

componentDidUpdate 與 ref

由于我們不能僅依賴于autofocus 屬性，因此可以componentDidUpdate 用來完成焦點(diǎn)：

class Expressions extends Component {   _input: ?HTMLInputElement;   // ....   componentDidUpdate(prevProps, prevState) {     this._input.focus();   }   render() {       return (         <div className={this.state.focused ? "focused": ""}>             <input               autofocus="true"               ref={c => (this._input = c)}             />         </div>       );     }   } }

componentDidUpdate 組件更新后觸發(fā)，因此對父組件的任何更改都將觸發(fā)此方法，并且您<input> 將獲得焦點(diǎn)。在我的情況下，我通常會(huì)className在父元素上切換一個(gè)，以表明該元素處于活動(dòng)狀態(tài)，因此componentDidUpdate 將觸發(fā)。

我對小部件間交互的觀點(diǎn)是在Dojo的dijit UI框架時(shí)代形成的，每個(gè)小部件通常都有對每個(gè)子小部件的引用。使用ReactJS的做法是（希望）避免ref使用s并使用state，這是合乎邏輯的，但是我當(dāng)中仍然有人渴望獲得簡單的參考，這就是第二種策略對我有意義的原因。