1.React片段Fragment

語義化的 HTML 是Web應用程序可訪問性的基礎。有時候我們會向 JSX 中添加 <div> 元素，會破壞 React 代碼正常工作，特別是在使用列表（<ol>，<ul>和<dl>）以及 HTML <table>。在這些情況下，我們應該使用 React 片段(Fragments) 將多個元素組合在一起。

import React, { Component, Fragment } from ‘react‘;
export default class App extends Component {
  
  render() {
    
 
return (
      <Fragment>
        {this.props.children}
      </Fragment>
    );
  }
}

2.可訪問表單

每個HTML表單控件，例如<input> 和 <textarea>，都需要被標記上的可訪問的標簽。盡管這些標準的HTML實踐可以直接用於 React，但需要註意在 JSX 中，for 特性被寫作htmlFor。

<label htmlFor="namedInput">Name:</label>
<input id="namedInput"
 
 type="text" name="name"/>

3.編程式地管理焦點

我們的React應用會在運行期間持續地修改HTML DOM元素，有時會導致鍵盤焦點丟失或定位到未知元素上。為使用它，我們先在組件類的JSX中創建一個元素的ref。

render() {
  return (
    <input
      type="text"
      ref={(input) => { this.textInput = input; }} />

  );
}

而後，當需要時，我們可以在我們組件的其他地方設置焦點

focus() {
  //使用原始DOM API顯式地集中文本輸入
 

   //註意：我們正在訪問 "current" 來獲取DOM節點
  this.textInput.current.focus();
}

有時，父組件需要將焦點設置為子組件中的一個元素。 我們可以通過 將 DOM refs 公開給父組件 來做到這一點 通過一個子組件上指定的 prop 將父對象的引用（ref）轉發給子節點的DOM節點。

function CustomTextInput(props) {
  return (
    <div>
      
<input ref={props.inputRef} />
    </div>
  );
}

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.inputElement = React.createRef();
  }
  render() {
    return (
      <CustomTextInput inputRef={this.inputElement} />
    );
  }
}
/>

// 現在您可以根據需要設置焦點。
this.inputElement.current.focus();

當使用 HOC（高階組件） 擴展組件時，建議使用 React 的 forwardRef 函數將ref 轉發到包裝組件。 如果第三方 HOC 沒有實現 ref 轉發， 上述模式仍然可以用作後備。

關於react16.4（一）