React、redux、react-redux の使用例の詳細な比較

今回は、react、redux、react-redux の使用例の詳細な比較をお届けします。 。 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 をレイヤーごとに渡すことなく、Context を使用するだけでデータを取得できます。後で説明する React-redux は、Context を使用して、各サブコンポーネントがストア内のデータを取得できるようにします。

Redux

実際には、誰もがそれを取得して変更できる共有データを保存する場所を見つけたいだけです。 すべての変数に入れても大丈夫でしょうか？はい、もちろん機能しますが、あまりにも洗練されておらず、安全ではありません。誰でもアクセスして変更できるため、友人によって誤って上書きされる可能性があります。グローバル変数が機能しない場合は、プライベート変数を使用してください。プライベート変数は簡単に変更できません。すぐにクロージャを思い浮かべますか...

次に、次を満たす関数を作成する必要があります:

オブジェクト

1. 外部の世界はこのデータにアクセスできます

2. 外部の世界もこのデータを変更できます

3. データが変更された場合は、購読者に通知します

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

   データを更新する手順:

What: 何をしたいのか---dispatch(action)

1. How: やり方、結果---reducer(oldState, action) => newState

2. Then?: Re - サブスクリプション機能を実行します (レンダリング UI の再実行など)

3. このようにして、ストアが実装され、外部アクセス、変更などのためにデータ ストレージ センターが提供されます。これが主なアイデアです。リダックス。 したがって、Redux は React と本質的な関係はありません。通常は他のライブラリと組み合わせて使用​​できます。 Redux のデータ管理方法は React のデータ駆動型ビューの概念と非常に一致しており、この 2 つを組み合わせることで開発が非常に便利になります。

データにアクセスする安全な場所ができたので、それを React に統合するにはどうすればよいでしょうか? アプリケーションの初期化時に window.store = createStore(reducer) を作成し、必要に応じて store.getState() を介してデータを取得し、store.dispatch を介してデータを更新し、store.subscribe を介してデータの変更をサブスクライブできます。 setState を実行します... これを多くの場所で実行すると、非常に膨大な作業になりますが、それでもグローバル変数の不適切さは避けられません。

React-Redux

グローバル変数には多くの欠点があるため、アイデアを変更して、各サブコンポーネントが最上位の props にアクセスできる限り、ストアを React アプリケーションの最上位の props に直接統合しましょう。これ:

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

React はそのようなフック、Context を提供するだけで、その使用法は公式デモを見れば理解できるでしょう。各サブコンポーネントがストアに簡単にアクセスできるようになったので、次のステップでは、サブコンポーネントがストアで使用されるデータを取り出し、変更し、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 を使用する場合、2 つの関数、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 中国語 Web サイトの他の関連記事を参照してください。