React, Redux 및 React-Redux 사용 사례의 자세한 비교-JS 튜토리얼-php.cn

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

php中世界最好的语言

풀어 주다： 2018-05-25 14:00:28

원래의

1085명이 탐색했습니다.

이번에는 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

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

객체

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 */}); // 注册订阅函数

로그인 후 복사

이제 데이터에 접근할 수 있는 안전한 장소가 생겼으니 어떻게 이를 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中文网其它相关文章！