집 >웹 프론트엔드 >JS 튜토리얼 >스토어를 사용하여 React 구성요소 최적화

스토어를 사용하여 React 구성요소 최적화

小云云원래의: 2018-01-04 10:03:061855검색

이 글에서는 Store를 활용하여 React 컴포넌트를 최적화하는 방법을 주로 소개하고 있는데, 에디터가 꽤 좋다고 생각해서 지금부터 공유하고 참고용으로 올려보겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

React를 사용하여 구성 요소를 작성할 때 서로 다른 두 구성 요소가 상태를 공유해야 하는 상황에 자주 직면하게 되는데, 일반적인 접근 방식은 상태를 상위 구성 요소로 승격시키는 것입니다. 하지만 여기에는 문제가 있습니다. 즉, 두 개의 구성 요소에만 이 상태가 필요하지만 상태가 상위 구성 요소에 언급되기 때문에 상태가 변경되면 상위 구성 요소와 그 아래의 모든 하위 구성 요소가 다시 렌더링됩니다. 상위 구성 요소가 상대적으로 복잡하고 다른 하위 구성 요소가 많이 포함되어 있으면 성능 문제가 발생할 수 있습니다.

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>
  );
 };
}

예제에서 Buttons의 store.setState를 통해 스토어의 상태를 변경하면 전체 카운터가 다시 렌더링되지 않지만 결과가 스토어의 변경 사항을 구독하므로 사용할 수 있습니다. 개수가 변경되면 자체 구성 요소 내에서 상태를 변경하여 다시 렌더링하여 불필요한 렌더링을 교묘하게 피합니다.

마지막으로 위의 createStore 코드는 수십 줄에 불과하지만 여전히 mini-store라는 라이브러리에 작성하여 GitHub에 올리고 Redux와 유사한 Provider 및 connect 메서드를 제공하여 더 많은 기능을 제공합니다. 100줄 이상의 코드. React 구성 요소 라이브러리도 작성 중이고 복잡한 구성 요소의 상태를 관리해야 하는 경우 이 최적화 방법을 시도해 볼 수도 있습니다.

스토어를 사용하여 React 구성요소 최적화

관련 기사