1. Props傳遞時導(dǎo)致Pure組件重新渲染

若直接在render里面去聲明參數(shù)來傳遞給子組件泣刹，那么當(dāng)父組件觸發(fā)重新渲染的時可能會導(dǎo)致Pure的子組件也被重新渲染（String, Number, Boolean, null, undefined除外）躺屁。

const listArray = []
export default class App extends React.Component {
  state = {
    isLogin: false
  }

  userInfo = {name: 'Evan'}
  
  changeState = () => this.setState({
    isLogin: !this.state.isLogin
  })
  
  // class fields
  showLog = () => console.log('show Log')

  render() {
    return (
      <div>
        <div onClick={this.changeState}
        >更新狀態(tài)</div>
        {/* 會引發(fā)PureComponent重新渲染 */}
        <Child
          showLog={() => this.showLog()}
          userInfo={{name: 'Evan'}}
          list={[]}
        />
        {/* 推薦：改成引用的方式 */}
        <Child
          showLog={this.showLog}
          userInfo={this.userInfo}
          list={listArray}
        />
      </div>
    )
  }
}

建議改成引用的方式去傳遞

2.key為索引的危害

當(dāng)使用數(shù)組下標(biāo)為索引時情臭，可能會使元素顯示錯誤當(dāng)信息，因此應(yīng)該避免使用index作為key。

export default class App extends React.Component {
  state = {
    list: [{id: 1},{id: 2}]
  }

  addItem = () => this.setState({list: [{id: this.state.list.length + 1}, ...this.state.list]})

  render() {
    return (
      <div>
        <button onClick={this.addItem}>add items</button>
        {/* 使用index作為key */}
        {
          this.state.list.map((v, i) => <div key={i}>
            <label>第{i + 1}個：</label><input />
          </div>)
        }
        <hr />
        {/* 使用id作為key */}
        {
          this.state.list.map((v, i) => <div key={v.id}>
            <label>第{i + 1}個：</label><input />
          </div>)
        }
      </div>
    )
  }
}

3. Fragments

Fragments可以讓我們減少一些不必要的DOM節(jié)點的添加，它還有一個短語法可以達(dá)到相同的效果猿挚，短語法不支持key這個參數(shù)。

render() {
  return (
    // 正常寫法驶鹉，可以支持key
    <React.Fragment>
      <ChildA />
      <ChildB />
       {/* 短語法 */}
      <>
        <ChildA />
        <ChildB />
      </>
    </React.Fragment>
  );
}

4. 組件懶加載

在React16版本中新增了一個組件懶加載的方式绩蜻，通過React.lazy動態(tài)引入組件然后再用Suspense來包裹即可。
Suspense用來暫停組件渲染直到React.lazy引入完成才開始渲染室埋。

const Child = React.lazy(() => import('./Child'));

class App extends React.Component {
  childRefs = React.createRef();
  logRef = () => console.log(this.childRefs)
  render() {
    return (
      <React.Fragment>
        <button onClick={this.logRef}>Click Me</button>
        <React.Suspense fallback={<div>Loading...</div>}>
          <Child ref={this.childRefs}/>
        </React.Suspense>
      </React.Fragment>
    )
  }
}

export default App;

5.關(guān)于refs

除去原本的回調(diào)函數(shù)外办绝，React在16版本引入了React.createRef與React.forwardRef兩個方法用來處理ref踏兜，它們會返回一個對象，而所獲得的實例都會被存儲到該對象的current里八秃。

• React.createRef
  獲取 子元素/組件 的ref碱妆，所綁定的實例會被存儲到該ref的current里

export default class App extends React.Component {
  // 用來儲存ref
  childRefs = React.createRef();
  logRef = () => console.log(this.childRefs)
  render() {
    return (
      <React.Fragment>
        <button onClick={this.logRef}>Click Me</button>
        {/* 把子組件實例關(guān)聯(lián)到 childRefs 上*/}
        <Child ref={this.childRefs}/>
      </React.Fragment>
    )
  }
}

• forwardRef
  用來轉(zhuǎn)發(fā)ref，由于函數(shù)組件沒有實例昔驱，所以沒有ref疹尾，如需在父組件里獲取其子組件某個元素的ref，那么可以使用該方法骤肛。

class App extends React.Component {
  // 用來儲存ref
  childRefs = React.createRef();
  logRef = () => console.log(this.childRefs)
  render() {
    return (
      <React.Fragment>
        <button onClick={this.logRef}>Click Me</button>
        <FnChild ref={this.childRefs}/>
      </React.Fragment>
    )
  }
}
const FnChild = React.forwardRef((props, ref) => <div ref={ref}>我是函數(shù)組件</div>)