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

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

autofocus

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

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

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

componentDidUpdate 與 ref

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

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> 將獲得焦點。在我的情況下，我通常會className在父元素上切換一個，以表明該元素處于活動狀態(tài)，因此componentDidUpdate 將觸發(fā)。

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