Detaillierte Erläuterung der Verwendung von React, Redux und React-Redux

Dieses Mal werde ich Ihnen die Verwendung von React, Redux und React-Redux ausführlich erläutern. Was sind die Vorsichtsmaßnahmen bei der Verwendung von React, Redux und React-Redux? , lass uns einen Blick darauf werfen.

Reagieren

Für einige kleine Projekte reichen nur Props und State für die Datenverwaltung aus. Wenn die Daten zum Rendern einer Komponente über Requisiten von der übergeordneten Komponente abgerufen werden, ist dies normalerweise A -> B, aber mit zunehmender Geschäftskomplexität kann es so sein: A -> B -> C -> > D --> E, die von E benötigten Daten müssen von A über Requisiten weitergeleitet werden, und das entsprechende E --> Die Komponente BCD benötigt diese Daten nicht, sie muss jedoch durch sie geleitet werden, was in der Tat etwas unangenehm ist, und die übergebenen Requisiten und Rückrufe wirken sich auch auf die Wiederverwendung der BCD-Komponente aus. Oder wenn Geschwisterkomponenten bestimmte Daten gemeinsam nutzen möchten, ist es nicht sehr bequem, diese zu übertragen oder abzurufen. In solchen Situationen ist die Einführung von Redux notwendig.

Tatsächlich kann React die Daten Schicht für Schicht abrufen. . Der React-Redux, der später besprochen wird, verwendet Kontext, um jeder Unterkomponente den Zugriff auf die Daten im Speicher zu ermöglichen.

Redux

Eigentlich wollen wir nur einen Ort finden, an dem wir einige gemeinsame Daten speichern können. Jeder kann sie abrufen und ändern, das ist alles. Ist es in Ordnung, alle Variablen in eine einzige Variable einzufügen? OK, natürlich funktioniert es, aber es ist zu unelegant und nicht sicher, da es sich um eine globale Variable handelt, auf die jeder zugreifen und die er ändern kann. Sie könnte versehentlich von einem Freund überschrieben werden. Wenn globale Variablen nicht funktionieren, verwenden Sie einfach private Variablen, die nicht einfach geändert werden können ...

Jetzt müssen wir eine solche Funktion schreiben, die Folgendes erfüllt:

1. Speichern Sie ein DatenObjekt

2. Die Außenwelt kann auf diese Daten zugreifen

3. Auch die Außenwelt kann diese Daten ändern

4. Abonnenten benachrichtigen, wenn sich die Daten ändern

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

Schritte zum Aktualisieren von Daten:

1. Was: Was möchten Sie tun--- Dispatch(Aktion)

2. Wie: Wie wird es gemacht, das Ergebnis davon--- Reducer( oldState, action) => newState

3. Dann?: Führen Sie die Abonnementfunktion erneut aus (z. B. erneutes Rendern der Benutzeroberfläche usw.)

Dies implementiert einen Speicher und stellt ein Datenspeicherzentrum bereit, auf das von außen zugegriffen, geändert usw. werden kann. Dies ist die Hauptidee von Redux. Daher hat Redux keine wesentliche Beziehung zu React und kann normalerweise in Kombination mit anderen Bibliotheken verwendet werden. Es ist nur so, dass die Datenverwaltungsmethode von Redux sehr gut mit dem datengesteuerten Ansichtskonzept von React übereinstimmt. Die Kombination beider macht die Entwicklung sehr komfortabel.

Da wir nun einen sicheren Ort für den Zugriff auf Daten haben, wie können wir diese in React integrieren? Wir können bei der Initialisierung der Anwendung einen window.store = createStore(reducer) erstellen und dann bei Bedarf Daten über store.getState() abrufen, die Daten über store.dispatch aktualisieren und Datenänderungen über store.subscribe abonnieren Führen Sie setState aus ... Wenn Sie dies an vielen Stellen tun, wird es wirklich überwältigend sein und die Uneleganz globaler Variablen wird dadurch immer noch nicht vermieden.

React-Redux

Da globale Variablen viele Mängel aufweisen, ändern wir die Idee und integrieren den Store direkt in die Requisiten der React-Anwendung auf oberster Ebene, sofern dies für jede Unterkomponente möglich ist Greifen Sie auf die Requisiten der obersten Ebene zu. Zum Beispiel:

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

React bietet nur einen solchen Hook, Context, und seine Verwendung ist sehr einfach, wenn Sie sich die offizielle Demo ansehen. Da nun jede Unterkomponente problemlos auf den Store zugreifen kann, besteht der nächste Schritt darin, dass die Unterkomponente die im Store verwendeten Daten herausnimmt, sie ändert und sich für die Aktualisierung der Benutzeroberfläche usw. anmeldet. Jede Unterkomponente muss dies erneut tun. Offensichtlich muss es einen bequemeren Weg geben: Komponenten höherer Ordnung. Durch die Kapselung von store.getState(), store.dispatch und store.subscribe durch höherwertige Komponenten haben die Unterkomponenten kein Bewusstsein für den Store. Die Unterkomponenten verwenden normalerweise Requisiten, um Daten abzurufen, und Rückrufe, um Rückrufe auszulösen, was dem entspricht Existenz keines Ladens.

Das Folgende ist die grobe Implementierung dieser höherwertigen Komponente:

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;
 };
}

Bei der Verwendung von connect wissen wir, dass wir einen Boilerplate-Code schreiben müssen, z. B. die beiden Funktionen mapStateToProps und 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中文网其它相关文章！

推荐阅读：

判断上传图片类型与大小需要哪些步骤

vue配置请求本地json数据需要哪些步骤

vue里$emit有哪些用法

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung von React, Redux und React-Redux. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!