函數節流與函數去抖

組件通訊

• 父組件向子組件通訊：最經常使用

父組件經過props向子組件傳遞參數

• 子組件向父組件通訊：利用回調函數

父組件將一個函數做爲props傳遞給子組件，子組件調用該回調函數，向父組件通訊。

• 跨級組件之間通訊：爺孫通訊

1. 中間組件層層傳遞props（存在嵌套太深的問題）
2. 使用context對象（推薦）

context是全局容器，靜態屬性，使用條件：

1. 父組件要聲明本身支持context，並提供context中屬性的PropTypes
2. 子組件要聲明本身須要使用context，並提供須要使用的context中屬性的PropTypes
3. 父組件需提供一個getChildContext函數，返回一個相應的初始context對象

若組件中使用constructor函數，務必在構造函數中傳入第二個參數context，並在super調用父類構造函數時也傳入context，不然會形成組件中沒法使用context

constructor(props,context){
  super(props,context);
}

• 非嵌套組件間通訊：

1. 利用兩者共同父組件的context對象通訊（存在嵌套太深、組件耦合度大的問題）
2. 使用自定義事件的方式（事件訂閱，推薦）

節流

Throttle，阻止函數在給定時間內被屢次調用。

import throttle from 'lodash.throttle';

class LoadMoreButton extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
    this.handleClickThrottled = throttle(this.handleClick, 1000);
  }

  componentWillUnmount() {
    this.handleClickThrottled.cancel();
  }

  render() {
    return <button onClick={this.handleClickThrottled}>Load More</button>;
  }

  handleClick() {
    this.props.loadMore();
  }
}

 

防抖

Debounce，確保函數上次執行後的一段時間內，不會再次執行。

import debounce from 'lodash.debounce';

class Searchbox extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.emitChangeDebounced = debounce(this.emitChange, 250);
  }

  componentWillUnmount() {
    this.emitChangeDebounced.cancel();
  }

  render() {
    return (
      <input
        type="text"
        onChange={this.handleChange}
        placeholder="Search..."
        defaultValue={this.props.value}
      />
    );
  }

  handleChange(e) {
    // React pools events, so we read the value before debounce.
    // Alternately we could call `event.persist()` and pass the entire event.
    // For more info see reactjs.org/docs/events.html#event-pooling
    this.emitChangeDebounced(e.target.value);
  }

  emitChange(value) {
    this.props.onChange(value);
  }
}

 

參考

組件通訊 - 在組件中使用事件處理函數；