快捷導(dǎo)航

使用store來(lái)優(yōu)化React組件的方法

更新時(shí)間：2017年10月23日 10:28:56 作者：yesmeck

這篇文章主要介紹了使用store來(lái)優(yōu)化React組件的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

在使用 React 編寫(xiě)組件的時(shí)候，我們常常會(huì)碰到兩個(gè)不同的組件之間需要共享狀態(tài)情況，而通常的做法就是提升狀態(tài)到父組件。但是這樣做會(huì)有一個(gè)問(wèn)題，就是盡管只有兩個(gè)組件需要這個(gè)狀態(tài)，但是因?yàn)榘褷顟B(tài)提到了父組件，那么在狀態(tài)變化的時(shí)候，父組件以及其下面的所有子組件都會(huì)重新 render，如果你的父組件比較復(fù)雜，包含了其他很多子組件的話，就有可能引起性能問(wèn)題。

Redux 通過(guò)把狀態(tài)放在全局的 store 里，然后組件去訂閱各自需要的狀態(tài)，當(dāng)狀態(tài)發(fā)生變化的時(shí)候，只有那些訂閱的狀態(tài)發(fā)生變化的組件才重新 render，這樣就避免了上面說(shuō)的提升狀態(tài)所帶來(lái)的副作用。但是，當(dāng)我們?cè)趯?xiě)一個(gè) React 組件庫(kù)的時(shí)候，redux 加 react-redux 的組合可能就有點(diǎn)太重了。所以我們可以自己寫(xiě)一個(gè)簡(jiǎn)單的 store，來(lái)實(shí)現(xiàn)類(lèi)似 Redux 的訂閱模式。

參考 Redux 的實(shí)現(xiàn)來(lái)寫(xiě)一個(gè)簡(jiǎn)版的 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 非常簡(jiǎn)單，算上空行也只有 33 行，總共暴露了 3 個(gè)方法，沒(méi)有 Redux 里的 dispatch 和 reducer，直接通過(guò) setState 方法改變狀態(tài)。下面我們來(lái)用它一個(gè)計(jì)數(shù)器的例子。

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 里通過(guò) store.setState 來(lái)改變 store 中的狀態(tài)，并不會(huì)引起整個(gè) Counter 的重新 render，但是因?yàn)?Result 中訂閱了 store 的變化，所以當(dāng) count 有變化的時(shí)候就可以通過(guò)改變自己組件內(nèi)的狀態(tài)來(lái)重新 render，這樣就巧妙地避免了不必須要的 render。

最后，上面的 createStore 雖然只有幾十行代碼，我還是把它寫(xiě)成了一個(gè)叫 mini-store 庫(kù)放在 GitHub 上，并且提供了類(lèi)似 Redux 的 Provider 和 connect 方法，總共加起來(lái)也就 100 多行代碼。如果你也在寫(xiě) React 組件庫(kù)，需要管理一個(gè)復(fù)雜組件的狀態(tài)，不妨試試這個(gè)優(yōu)化方式。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: