Dva: Demandez-vous où sont écrits les événements du cycle de vie des réactions ?

Si la fonction de composant dans les composants est modifiée pour étendre React.Component, quel en sera l'impact ?

Aucun effet. Écrivez toujours selon l'habitude précédente, puis ajoutez dva à la couche de données.

Ensuite, ajoutez dva dans la couche de données ???
Je viens de comprendre hier soir comment démarrer avec dva+andMobile,

Suivez https://github.com/sorrycc/blog/issues/18 ce tutoriel pour parcourir et essayer de le comprendre.

Je n'y suis pas allé, je l'ai relu et j'ai aussi cherché des informations.Le principal problème est la compréhension de redux.
Par rapport à la position d'écriture de componentWillMount() et componentDidMount(), pouvez-vous me donner des pointeurs spécifiques ?

componentWillMount() est-il écrit dans le hook du routage ?
componentDidMount() écrit-il sur les composants externes ?

La même question

@xttianma @CodeSuPrMan a changé le composant sans état en React.Component
Reportez-vous à https://facebook.github.io/react/docs/components-and-props.html

Vous pouvez regarder recomposer

Salutations,

Nick Zheng

Portable : +86118918960666 (Chine)
weChat:nick_zheng88
Courriel : [email protected]

À 16h16 le 18 janvier 2017, CodeSuPrMan [email protected] a écrit :

C'est le composant sans état d'origine
const LeftNavBefore=({menus,dispatch})=>{ const{ mode,ItemTree
}=props.menus; const constItemTree=ItemTree; const
NavMenu=LoadMenuTree(ItemTree,ItemTree); fonction changeMode(valeur){
dispatch({ type:'menus/changeMode', payload:{ mode:value?'vertical':'inline',
ItemTree:ItemTree} }) ....}
Je souhaite empaqueter les composants qui doivent ajouter des fonctions de cycle de vie sous la forme de composants de haut niveau (cette fonction sera extraite dans la méthode générale, et toutes les fonctions de cycle de vie qui doivent être ajoutées à l'avenir sont empaquetées avec cette méthode ),
De cette façon, tous les composants de base sont toujours sans état et nécessitent un emballage uniforme du cycle de vie
fonction wapperComponentsStatus({ref}) {retour ComposedComponent=>{
la classe de retour wapper étend React.Component {componentWillMount(){
... (extrait plus tard)} componentDidMount(){ ... (extrait plus tard)} render(){ return
}}}}

`let LeftNav=ref=>wapperComponentsStatus({ref:ref})(LeftNavbefore);
Pour vous connecter ici, vous devez vous connecter avec le modèle pour passer en état et expédier
fonction mapStateToProps({menus}){
renvoie {menus} ;
}

export par défaut connect(mapStateToProps)(LeftNav);`

Mais écrire de cette manière rapportera une erreur, car la compréhension de réagir et de redux n'est pas trop profonde, puis-je vous demander si vous suivez ma pensée,
Comment passer les accessoires de wrapperComponentsStatus au composant LeftNavBefore (principalement pour passer la fonction d'état) et redux
L'état et la répartition fournis après la connexion sont également transmis au composant LeftNavBefore.

-
Vous recevez ceci parce que vous avez commenté.
Répondez directement à cet e-mail, consultez-le sur GitHub
https://github.com/dvajs/dva/issues/506#issuecomment-273411035 , ou couper le son
le fil
https://github.com/notifications/unsubscribe-auth/AAbhwGIy_VXKLgjZAouvWgWg0i3aF6cGks5rTcpmgaJpZM4LkSJ0
.

Vous pouvez regarder recomposer, il semble y avoir un enroulement autour du cycle de vie avant

Il y a un problème avec le format en ce moment. Il s'agit du composant sans état d'origine de la modification.

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(...)

Je souhaite empaqueter les composants qui doivent ajouter des fonctions de cycle de vie sous la forme de composants de haut niveau (cette fonction sera extraite dans la méthode commune, et toutes les fonctions de cycle de vie qui doivent être ajoutées à l'avenir seront empaquetées avec cette méthode), afin que tous les composants de base soient toujours maintenus sans état, nécessite un emballage unifié du cycle de vie

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

Mais écrire de cette façon rapportera une erreur, car la compréhension de react et redux n'est pas trop profonde, puis-je demander si je suis ma réflexion, comment passer les accessoires de wrapperComponentsStatus au composant LeftNavBefore (principalement pour passer la fonction d'état) et le fournir après redux connect State et dispatch sont également passés dans le composant LeftNavBefore

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

Tu peux le faire toi-même

@nickzheng merci, laissez-moi voir

Je ne parle pas anglais. Je ne peux qu'attendre un plan mature. La méthode actuelle est

Le rôle du routeur est de connecter le modèle et la vue, puis d'utiliser React.Component pour écrire,
Parmi eux : this.props, développé et fermé, est temporaire, on voit bien ce qui s'y trouve.Si cette page ne change pas, elle est directement affectée.

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

lire recomposer, mais à la fin je l'ai écrit moi-même

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;

Ce qui suit est l'appel pour conserver tous les composants de base ou sans état, vous devez envelopper le cycle de vie avec cette fonction pour l'envelopper.

  function DidMount({props}) {

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

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

En regardant à nouveau le document dva, il y a ce paragraphe :

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

Lien ici

Pour ce passage, j'ai une compréhension. Le routeur écrit Route Components, qui rassemble des données/composants et plus encore..., et les composants sont des composants fonctionnels purs, puis des composants purs, aucun événement de cycle de vie.