Dva: Fragen Sie nach, wo die Ereignisse des Reaktionslebenszyklus geschrieben werden?

Welche Auswirkungen hat es, wenn die Komponentenfunktion in Komponenten geändert wird, um React.Component zu erweitern?

Keine Wirkung. Schreiben Sie weiterhin gemäß der vorherigen Gewohnheit und fügen Sie dann dva zur Datenschicht hinzu.

Fügen Sie dann dva in der Datenschicht hinzu?
Ich habe erst gestern Abend herausgefunden, wie man mit dva+andMobile loslegt,

Folgen Sie https://github.com/sorrycc/blog/issues/18 diesem Tutorial, um es durchzugehen und zu versuchen, es zu verstehen.

Ich bin nicht hingegangen, habe es noch einmal gelesen und auch nach Informationen gesucht.Das Hauptproblem ist das Verständnis von Redux.
Können Sie mir bezüglich der Schreibposition von componentWillMount() und componentDidMount() spezifische Zeiger geben?

Wird componentWillMount() an den Hook des Routings geschrieben?
Schreibt ComponentDidMount() in äußere Komponenten?

Die selbe Frage

@xttianma @CodeSuPrMan hat die zustandslose Komponente in React.Component geändert
Siehe https://facebook.github.io/react/docs/components-and-props.html

Sie können sich Recompose ansehen

Grüße,

Nick Zheng

Handy: +86118918960666 (China)
weChat:nick_zheng88
E-Mail: [email protected]

Am 18. Januar 2017 um 16:16 Uhr schrieb CodeSuPrMan [email protected] :

Dies ist die ursprüngliche zustandslose Komponente
const LeftNavBefore=({menus,dispatch})=>{ const{ mode,ItemTree
}=props.menus; const constItemTree=ItemTree; const
NavMenu=LoadMenuTree(ItemTree,ItemTree); Funktion changeMode(value){
Dispatch({ type:'menus/changeMode', payload:{ mode:value?'vertikal':'inline',
ItemTree:ItemTree} }) ....}
Ich möchte die Komponenten, die Lebenszyklusfunktionen hinzufügen müssen, in Form von High-Level-Komponenten packen (diese Funktion wird in die allgemeine Methode extrahiert und alle Lebenszyklusfunktionen, die in Zukunft hinzugefügt werden müssen, werden mit dieser Methode gepackt ),
Auf diese Weise sind alle Basiskomponenten noch zustandslos und erfordern eine einheitliche Verpackung des Lebenszyklus
Funktion wapperComponentsStatus({ref}) {return ComposedComponent=>{
Rückgabeklasse wapper erweitert React.Component {componentWillMount(){
... (später extrahiert)} componentDidMount(){ ... (später extrahiert)} render(){ return
}}}}

`let LeftNav=ref=>wapperComponentsStatus({ref:ref})(LeftNavbefore);
Um sich hier zu verbinden, müssen Sie sich mit dem Modell verbinden, um den Status zu übergeben und zu versenden
Funktion mapStateToProps({menus}){
zurück {Menüs};
}

export default connect(mapStateToProps)(LeftNav);`

Aber wenn Sie so schreiben, wird ein Fehler gemeldet, da das Verständnis von Reagieren und Redux nicht zu tief ist, darf ich fragen, ob Sie meinen Überlegungen folgen,
So übergeben Sie die Props von wrapperComponentsStatus an die LeftNavBefore-Komponente (hauptsächlich um die Statusfunktion zu übergeben) und redux
Der nach dem Verbinden bereitgestellte Status und Dispatch werden ebenfalls an die LeftNavBefore-Komponente übergeben.

—
Sie erhalten dies, weil Sie einen Kommentar abgegeben haben.
Antworten Sie direkt auf diese E-Mail und zeigen Sie sie auf GitHub an
https://github.com/dvajs/dva/issues/506#issuecomment-273411035 oder stumm
der Faden
https://github.com/notifications/unsubscribe-auth/AAbhwGIy_VXKLgjZAouvWgWg0i3aF6cGks5rTcpmgaJpZM4LkSJ0
.

Sie können sich Recompose ansehen, da scheint es vorher einen Wrap um den Lebenszyklus zu geben

Es gibt gerade ein Problem mit dem Format. Dies ist die ursprüngliche zustandslose Komponente aus der Bearbeitung.

const LeftNavbefore=({menus,dispatch})=>{
  const s=props;
  const{
    mode,ItemTree
  }=props.menus;
  const constItemTree=ItemTree;
  const NavMenu=LoadMenuTree(ItemTree,ItemTree);
  function changeMode(value){
    dispatch({
      type:'menus/changeMode',
      payload:{
        mode:value?'vertical':'inline',
        ItemTree:ItemTree
      }
    })
  }
  return(...)

Ich möchte die Komponenten, die Lebenszyklusfunktionen hinzufügen müssen, in Form von High-Level-Komponenten packen (diese Funktion wird in die gemeinsame Methode extrahiert und alle in Zukunft hinzuzufügenden Lebenszyklusfunktionen werden mit verpackt diese Methode), damit alle Basiskomponenten weiterhin zustandslos gehalten werden, erfordert eine einheitliche Verpackung des Lebenszyklus

function wapperComponentsStatus({ref}) {
return ComposedComponent=>{
  return class wapper extends React.Component {
    componentWillMount(){
        ...（之后提取出来）
    }
    componentDidMount(){
        ...（之后提取出来）
    }
    render(){
      return <ComposedComponent {...this.props} />
    }
  }
}
  }
  let LeftNav=ref=>wapperComponentsStatus({ref:ref})(LeftNavbefore);

  function mapStateToProps({menus}){
    return {menus};
  }

  export default connect(mapStateToProps)(LeftNav);

Aber wenn ich so schreibe, wird ein Fehler gemeldet, da das Verständnis von Reagieren und Redux nicht zu tief ist. Darf ich fragen, ob ich meinen Überlegungen folge, wie man die Props von wrapperComponentsStatus an die LeftNavBefore-Komponente übergibt (hauptsächlich um die Statusfunktion zu übergeben) und Bereitstellen nach Redux Connect State und Dispatch werden auch an die LeftNavBefore-Komponente übergeben

https://github.com/acdlite/recompose/blob/master/docs/API.md#lifecycle

Du kannst das selbst machen

@nickzheng danke, lass mich sehen

Ich kann kein Englisch. Ich kann nur auf einen ausgereiften Plan warten. Die aktuelle Methode ist

Die Rolle des Routers besteht darin, Modell und Ansicht zu verbinden und dann React.Component zum Schreiben zu verwenden,
Darunter: this.props, erweitert und geschlossen, ist temporär, es ist klar, was da ist.Wenn sich diese Seite nicht ändert, wird sie direkt zugewiesen.

import React from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import styles from './Page.css';
import { TabBar, Icon } from "antd-mobile";
import MyTabbar from './components/MyTabbar'

class Home extends React.Component {    
    render() {
        const {menu,selectedTab,dispatch}= this.props;
        const MyTabbarProps={ menu, selectedTab, dispatch }

        return (
            <div className="home">
                {this.props.children} 
                <MyTabbar {...MyTabbarProps} /> 
            </div>
        );
    }    
}

Home.propTypes = { 
    menu:React.PropTypes.array,
    selectedTab:React.PropTypes.number,
};

function mapStateToProps({home}) { return home }

export default connect(mapStateToProps)(Home);

read recompose, aber am Ende habe ich es selbst geschrieben

import React, { Component,PropTypes } from 'react';

  function wapperComponentsLifecycle({DidMount}) {
    return ComposedComponent=>{
      return class Wapper extends React.Component {
        componentWillMount(){

        }
        componentDidMount(){
          DidMount({props:this.props});
        }
        ...还可以添加别的生命周期函数
        render(){
          return <ComposedComponent {...this.props} />
        }
      }
    }
  }


export default  wapperComponentsLifecycle;

Das Folgende ist der Aufruf, um alle Basiskomponenten oder zustandslos beizubehalten. Sie müssen den Lebenszyklus mit dieser Funktion umschließen, um ihn zu umschließen.

  function DidMount({props}) {

    const{ dispatch}=props;
    dispatch({
      type:'menus/query',
    })
  }

  let LeftNav=wapperComponentsLifecycle({DidMount})(LeftNavbefore);

Wenn man sich das dva-Dokument noch einmal ansieht, gibt es diesen Absatz:

所以在 dva 中，通常需要 connect Model的组件都是 Route Components，组织在/routes/目录下，而/components/目录下则是纯组件（Presentational Components）

Hier verlinken

Für diese Passage habe ich ein Verständnis. Der Router schreibt Route Components, die Daten / Komponenten und mehr sammelt ... und die Komponenten sind reine Funktionskomponenten, dann reine Komponenten, keine Lebenszyklusereignisse.