이 글에서는 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 구성 요소의 저장 최적화 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!