React, Redux 및 React-Redux 사용 사례의 자세한 비교

이번에는 React, Redux, React-Redux의 사용 사례를 자세히 비교해봤습니다. React, Redux, React-Redux 사용 시 Notes는 무엇인가요? .

React

일부 소규모 프로젝트의 경우 React만 사용하면 충분합니다. 그러면 데이터 관리를 위해 Props와 State를 사용할 수 있습니다. 그렇다면 언제 Redux를 도입해야 할까요? 컴포넌트를 렌더링하기 위한 데이터를 props를 통해 상위 컴포넌트에서 얻을 경우 보통 A --> B 이지만, 비즈니스 복잡도가 증가함에 따라 A --> B -- > C -- 처럼 될 수도 있습니다. > D --> E, E에 필요한 데이터는 A에서 props를 통해 전달되어야 하며 해당 E --> A는 콜백을 역으로 전달합니다. 구성 요소 BCD에는 이러한 데이터가 필요하지 않지만 이를 통과해야 합니다. 이는 실제로 약간 불쾌하며 전달된 props와 콜백도 BCD 구성 요소의 재사용에 영향을 미칩니다. 또는 형제 구성 요소가 특정 데이터를 공유하려는 경우 이를 전송하거나 얻는 것이 그리 편리하지 않습니다. 이런 상황에서는 Redux를 도입할 필요가 있습니다.

사실 A --> B --> C --> D --> E 이 경우 React는 레이어별로 props를 전달하지 않고 데이터를 가져올 수 있습니다. 나중에 논의할 React-redux는 Context를 사용하여 각 하위 구성 요소가 저장소의 데이터를 가져올 수 있도록 합니다.

Redux

사실, 우리는 공유 데이터를 저장할 장소를 찾고 싶을 뿐입니다. 누구나 그것을 얻고 수정할 수 있습니다. 그게 전부입니다. 모든 변수를 하나로 묶어도 괜찮나요? 예, 물론 작동하지만 너무 세련되지 않고 안전하지 않습니다. 전역 변수이므로 누구나 액세스하여 친구가 실수로 덮어쓸 수 있습니다. 전역 변수가 작동하지 않으면 전용 변수를 사용하세요. 전용 변수는 쉽게 수정할 수 없습니다. 바로 클로저가 생각나시나요?이제 다음을 만족하는 함수를 작성해야 합니다.

데이터를 저장합니다.
1. 객체

외부 세계에서도 이 데이터에 액세스할 수 있습니다
외부에서도 이 데이터를 수정할 수 있습니다
데이터가 변경되면 구독자에게 알리세요

4. function createStore(reducer, initialState) {
    // currentState就是那个数据
    let currentState = initialState;
    let listener = () => {};
    function getState() {
    return currentState;
    }
    function dispatch(action) {
    currentState = reducer(currentState, action); // 更新数据
    listener(); // 执行订阅函数
    return action;
    }
    function subscribe(newListener) {
    listener = newListener;
    // 取消订阅函数
    return function unsubscribe() {
     listener = () => {};
    };
    }
    return {
    getState,
    dispatch,
    subscribe
    };
   }
   const store = createStore(reducer);
   store.getState(); // 获取数据
   store.dispatch({type: 'ADD_TODO'}); // 更新数据
   store.subscribe(() => {/* update UI */}); // 注册订阅函数

데이터 업데이트 단계:

무엇을 하시겠습니까--- 파견(action)
방법: 어떻게 하는지, 결과--- Reducer(oldState, action) => newState
Then?: Re -구독 기능 실행(렌더링 UI 재실행 등)
이렇게 스토어를 구현하고 외부 접근, 수정 등을 위한 데이터 저장 센터를 제공하는 것이 주요 아이디어입니다. ​​리덕스. 따라서 Redux는 React와 본질적인 관계가 없습니다. Redux는 다른 라이브러리와 함께 정상적으로 사용할 수 있습니다. 단지 Redux의 데이터 관리 방식이 React의 데이터 중심 뷰 개념과 매우 일치하기 때문입니다. 이 둘의 조합은 개발을 매우 편리하게 만듭니다.

이제 데이터에 접근할 수 있는 안전한 장소가 생겼으니 어떻게 이를 React에 통합할 수 있을까요? 애플리케이션이 초기화될 때 window.store = createStore(reducer)를 생성한 다음, 필요한 경우 store.getState()를 통해 데이터를 얻고, store.dispatch를 통해 데이터를 업데이트하고, store.subscribe를 통해 데이터 변경 사항을 구독할 수 있습니다. setState 수행... 여러 곳에서 이 작업을 수행하면 정말 부담스러울 것이며 여전히 전역 변수의 우아함을 피할 수 없습니다.

React-Redux

전역 변수에는 단점이 많기 때문에 아이디어를 바꿔 각 하위 구성 요소가 최상위 Prop에 액세스할 수 있는 한 Store를 React 애플리케이션의 최상위 Prop에 직접 통합해 보겠습니다. 다음과 같이 괜찮을 것입니다:

<TopWrapComponent store={store}>
 <App />
</TopWrapComponent>,

React는 그러한 후크, 컨텍스트를 제공하며 사용법은 매우 간단합니다. 공식 데모를 보면 이해하게 될 것입니다. 이제 각 하위 구성요소가 스토어에 쉽게 접근할 수 있게 되었으니, 다음 단계는 하위 구성요소가 스토어에서 사용하는 데이터를 꺼내어 수정하고, UI 업데이트 등을 구독하는 것입니다. 각 하위 구성요소는 이 작업을 다시 수행해야 합니다. 분명히 더 편리한 방법, 즉 고차 구성요소가 있어야 합니다. 상위 구성 요소를 통해 store.getState(), store.dispatch 및 store.subscribe를 캡슐화하면 하위 구성 요소는 일반적으로 props를 사용하여 데이터를 얻고 콜백을 트리거하는 콜백을 사용합니다. 매장이 없습니다.

다음은 이 고차 구성요소의 대략적인 구현입니다.

function connect(mapStateToProps, mapDispatchToProps) {
 return function(WrappedComponent) {
 class Connect extends React.Component {
  componentDidMount() {
  // 组件加载完成后订阅store变化，如果store有变化则更新UI
  this.unsubscribe = this.context.store.subscribe(this.handleStoreChange.bind(this));
  }
  componentWillUnmount() {
  // 组件销毁后，取消订阅事件
  this.unsubscribe();
  }
  handleStoreChange() {
  // 更新UI
  this.forceUpdate();
  }
  render() {
  return (
   <WrappedComponent
   {...this.props}
   {...mapStateToProps(this.context.store.getState())} // 参数是store里面的数据
   {...mapDispatchToProps(this.context.store.dispatch)} // 参数是store.dispatch
   />
  );
  }
 }
 Connect.contextTypes = {
  store: PropTypes.object
 };
 return Connect;
 };
}

connect를 사용할 때 mapStateToProps 및 mapDispatchToProps 두 함수와 같은 상용구 코드를 작성해야 한다는 것을 알고 있습니다.

const mapStateToProps = state => {
 return {
 count: state.count
 };
};
const mapDispatchToProps = dispatch => {
 return {
 dispatch
 };
};
export default connect(mapStateToProps, mapDispatchToProps)(Child);
// 上述代码执行之后，可以看到connect函数里面的
 <WrappedComponent
 {...this.props}
 {...mapStateToProps(this.context.store.getState())}
 {...mapDispatchToProps(this.context.store.dispatch)}
 />
// 就变成了
 <WrappedComponent
 {...this.props}
 {count: store.getState().count}
 {dispatch: store.dispatch}
 />
// 这样，子组件Child的props里面就多了count和dispatch两个属性
// count可以用来渲染UI，dispatch可以用来触发回调

So，这样就OK了？OK了。 通过一个闭包生成一个数据中心store，然后把这个store绑定到React的顶层props里面，子组件通过HOC建立与顶层props.store的联系，进而获取数据、修改数据、更新UI。 这里主要讲了一下三者怎么窜在一起的，如果想了解更高级的功能，比如redux中间件、reducer拆分、connect的其他参数等，可以去看一下对应的源码。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

antd下拉框联动使用步骤详解

如何使用JS实现合并多个数组去重算

위 내용은 React, Redux 및 React-Redux 사용 사례의 자세한 비교의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!