Dva: Pregunte dónde están escritos los eventos del ciclo de vida de reacción.

Si la función del componente en los componentes se cambia para extender React.Component, ¿cuál será el impacto?

Sin efecto. Todavía escriba de acuerdo con el hábito anterior y luego agregue dva a la capa de datos.

Luego agregue dva en la capa de datos ??? ¿Cómo unirse?
Anoche descubrí cómo empezar con dva + y Mobile,

Siga https://github.com/sorrycc/blog/issues/18 este tutorial para seguir e intentar comprenderlo.

No fui, lo volví a leer y también busqué algo de información El problema principal es la comprensión de redux.
En relación con la posición de escritura de componentWillMount () y componentDidMount (), ¿pueden darme sugerencias específicas?

¿Se escribe componentWillMount () en el gancho del enrutamiento?
¿Compone componentDidMount () escribe en componentes externos?

La misma pregunta

@xttianma @CodeSuPrMan cambió el componente sin estado a React.Component
Consulte https://facebook.github.io/react/docs/components-and-props.html

Puedes mirar recomponer

Saludos,

Nick zheng

Móvil: +86118918960666 (China)
WeChat: nick_zheng88
Correo electrónico: [email protected]

A las 4:16 pm del 18 de enero de 2017, CodeSuPrMan [email protected] escribió:

Este es el componente apátrida original
const LeftNavBefore = ({menús, despacho}) => {const {modo, ItemTree
} = props.menus; const constItemTree = ItemTree; const
NavMenu = LoadMenuTree (ItemTree, ItemTree); función changeMode (valor) {
despacho ({tipo: 'menus / changeMode', payload: {mode: value? 'vertical': 'inline',
ItemTree: ItemTree}}) ....}
Quiero empaquetar los componentes que necesitan agregar funciones de ciclo de vida en forma de componentes de alto nivel (esta función se extraerá en el método general, y todas las funciones de ciclo de vida que deben agregarse en el futuro se empaquetan con este método ),
De esta manera, todos los componentes básicos siguen siendo apátridas y requieren un empaquetado uniforme del ciclo de vida.
function wapperComponentsStatus ({ref}) {return ComposedComponent => {
return class wapper extiende React.Component {componentWillMount () {
... (extraído más tarde)} componentDidMount () {... (extraído más tarde)} render () {return
}}}}

`let LeftNav = ref => wapperComponentsStatus ({ref: ref}) (LeftNavbefore);
Para conectarse aquí, debe conectarse con el modelo para pasar el estado y el envío
function mapStateToProps ({menus}) {
volver {menús};
}

exportar conexión predeterminada (mapStateToProps) (LeftNav); `

Pero escribir de esta manera reportará un error, porque la comprensión de react y redux no es demasiado profunda, ¿puedo preguntarle si sigue mi pensamiento?
Cómo pasar los accesorios de wrapperComponentsStatus al componente LeftNavBefore (principalmente para pasar la función de estado) y redux
El estado y el envío proporcionados después de la conexión también se pasan al componente LeftNavBefore.

-
Estás recibiendo esto porque hiciste un comentario.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/dvajs/dva/issues/506#issuecomment-273411035 , o silenciar
la amenaza
https://github.com/notifications/unsubscribe-auth/AAbhwGIy_VXKLgjZAouvWgWg0i3aF6cGks5rTcpmgaJpZM4LkSJ0
.

Puede ver la recomposición, parece que hay una vuelta alrededor del ciclo de vida antes

Hay un problema con el formato en este momento. Este es el componente sin estado original de la edición.

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

Quiero empaquetar los componentes que necesitan agregar funciones de ciclo de vida en forma de componentes de alto nivel (esta función se extraerá en el método común, y todas las funciones de ciclo de vida que deben agregarse en el futuro se empaquetarán con este método), para que todos los componentes básicos aún se mantengan sin estado, requiere un empaquetado unificado del ciclo de vida

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

Pero escribir de esta manera informará un error, porque la comprensión de react y redux no es demasiado profunda, ¿puedo preguntar si sigo mi pensamiento, cómo pasar los accesorios de wrapperComponentsStatus al componente LeftNavBefore (principalmente para pasar la función de estado) y proporcionarlo después de que el estado de conexión de redux y el envío también se pasen al componente LeftNavBefore

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

Puedes hacerlo por ti mismo

@nickzheng gracias, déjame ver

No puedo hablar inglés. Solo puedo esperar un plan maduro. El método actual es

La función del enrutador es conectar el modelo y la vista, luego usar React.Component para escribir,
Entre ellos: this.props, expandido y cerrado, es temporal, está claro lo que hay, si esta página no cambia, se asigna directamente.

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

leer recomponer, pero al final lo escribí yo mismo

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;

La siguiente es la llamada para mantener todos los componentes básicos o sin estado, debe ajustar el ciclo de vida con esta función para ajustarlo.

  function DidMount({props}) {

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

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

Mirando el documento dva nuevamente, hay este párrafo:

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

Enlace aqui

Para este pasaje, tengo un entendimiento: el enrutador escribe Componentes de ruta, que recopila datos / componentes y más ..., y los componentes son componentes funcionales puros, luego componentes puros, sin eventos de ciclo de vida.