使用 store 來優化 React 組件

在使用 React 編寫組件的時候，咱們經常會碰到兩個不一樣的組件之間須要共享狀態狀況，而一般的作法就是提高狀態到父組件。可是這樣作會有一個問題，就是儘管只有兩個組件須要這個狀態，可是由於把狀態提到了父組件，那麼在狀態變化的時候，父組件以及其下面的全部子組件都會從新 render，若是你的父組件比較複雜，包含了其餘不少子組件的話，就有可能引發性能問題。

Redux 經過把狀態放在全局的 store 裏，而後組件去訂閱各自須要的狀態，當狀態發生變化的時候，只有那些訂閱的狀態發生變化的組件才從新 render，這樣就避免了上面說的提高狀態所帶來的反作用。可是，當咱們在寫一個 React 組件庫的時候，redux 加 react-redux 的組合可能就有點過重了。因此咱們能夠本身寫一個簡單的 store，來實現相似 Redux 的訂閱模式。

參考 Redux 的實現來寫一個簡版的 createStore:

function createStore(initialState) {
  let state = initialState;
  const listeners = [];

  function setState(partial) {
    state = {
      ...state,
      ...partial,
    };
    for (let i = 0; i < listeners.length; i++) {
      listeners[i]();
    }
  }

  function getState() {
    return state;
  }

  function subscribe(listener) {
    listeners.push(listener);

    return function unsubscribe() {
      const index = listeners.indexOf(listener);
      listeners.splice(index, 1);
    };
  }

  return {
    setState,
    getState,
    subscribe,
  };
}

咱們的 createStore 很是簡單，算上空行也只有 33 行，總共暴露了 3 個方法，沒有 Redux 裏的 dispatch 和 reducer，直接經過 setState 方法改變狀態。下面咱們來用它一個計數器的例子(在線例子)。

class Counter extends React.Component {
  constructor(props) {
    super(props);

    // 初始化 store
    this.store = createStore({
      count: 0,
    });
  }

  render() {
    return (
      <div>
        <Buttons store={store} />
        <Result store={store} />
      </div>
    )
  }
}

class Buttons extends React.Component {
  handleClick = (step) => () => {
    const { store } = this.props;
    const { count } = store.getState();
    store.setState({ count: count + step });
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick(1)}>+</button>
        <button onClick={this.handleClick(1)}>-</button>
      </div>
    );
  }
}

class Result extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      count: props.store.getState().count,
    };
  }

  componentDidMount() {
    this.props.store.subscribe(() => {
      const { count } = this.props.store.getState();
      if (count !== this.state.count) {
        this.setState({ count });
      }
    });
  }

  render() {
    return (
      <div>{this.state.count}</div>
    );
  };
}

例子中 Buttons 裏經過 store.setState 來改變 store 中的狀態，並不會引發整個 Counter 的從新 render，可是由於 Result 中訂閱了 store 的變化，因此當 count 有變化的時候就能夠經過改變本身組件內的狀態來從新 render，這樣就巧妙地避免了沒必要需要的 render。

最後，上面的 createStore 雖然只有幾十行代碼，我仍是把它寫成了一個叫 mini-store 庫放在 GitHub 上，而且提供了相似 Redux 的 Provider 和 connect 方法，總共加起來也就 100 多行代碼。若是你也在寫 React 組件庫，須要管理一個複雜組件的狀態，不妨試試這個優化方式。