React 구성 요소의 저장 최적화 방법에 대한 자세한 설명

小云云
풀어 주다: 2018-01-20 17:32:27
원래의
1478명이 탐색했습니다.

이 글에서는 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 구성 요소 "외부" 상위 구성 요소의 Props를 사용하는 방법

React 구성 요소의 수명 주기 기능은 무엇입니까

React 구성 요소 간의 통신에 대한 예제 튜토리얼

위 내용은 React 구성 요소의 저장 최적화 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿