ホームページ > 記事 > ウェブフロントエンド > ストアを使用して React コンポーネントを最適化する

ストアを使用して React コンポーネントを最適化する

小云云オリジナル: 2018-01-04 10:03:061819ブラウズ

この記事では、ストアを使用して React コンポーネントを最適化する方法を主に紹介します。編集者が非常に優れていると考えたので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

React を使用してコンポーネントを作成する場合、2 つの異なるコンポーネントが状態を共有する必要がある状況によく遭遇します。通常のアプローチは、状態を親コンポーネントにプロモートすることです。しかし、これには問題があります。つまり、この状態を必要とするコンポーネントは 2 つだけですが、状態は親コンポーネントに言及されているため、状態が変更されると、親コンポーネントとその下のすべてのサブコンポーネントが再レンダリングされます。親コンポーネントは比較的複雑であり、他の多くのサブコンポーネントが含まれている場合、パフォーマンスの問題が発生する可能性があります。

Redux は状態をグローバルストアに置き、コンポーネントは必要な状態をサブスクライブし、状態が変更されると、サブスクライブされた状態が変更されたコンポーネントのみが再レンダリングされ、前述の改善の副作用が回避されます。状態。ただし、React コンポーネントライブラリを作成する場合、redux と React-redux の組み合わせは少し重すぎる可能性があります。したがって、単純なストアを自分で作成して、Redux と同様のサブスクリプションモデルを実装できます。

createStore の簡略版を作成するには、Redux の実装を参照してください。

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 のディスパッチとリデューサーは、setState メソッドを通じて状態を直接変更します。カウンターの例として使用してみましょう。

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

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

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

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

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

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 (
   <p>{this.state.count}</p>
  );
 };
}

この例では、ボタンのstore.setStateを通じてストアの状態を変更しても、カウンター全体が再レンダリングされませんが、結果はストア内の変更にサブスクライブされているため、使用できます。カウントが変化したときに、独自のコンポーネント内の状態を変更して再レンダリングすることで、不必要なレンダリングを賢く回避します。

最後に、上記の createStore のコードは数十行しかありませんが、mini-store というライブラリに記述して GitHub に置き、Redux のような Provider と connect メソッドを提供しました。 100行以上のコード。 React コンポーネントライブラリも作成していて、複雑なコンポーネントの状態を管理する必要がある場合は、この最適化方法を試してみるとよいでしょう。

ストアを使用して React コンポーネントを最適化する

関連記事