在使用 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 元件庫，需要管理一個複雜元件的狀態，不妨試試這個優化方式。
來源：https://segmentfault.com/a/1190000011669397