Dva: Pergunte sobre onde os eventos do ciclo de vida reactivo são escritos?

Se a função do componente em componentes for alterada para estender React.Component, qual será o impacto?

Sem efeito. Ainda escreva de acordo com o hábito anterior e, em seguida, adicione dva à camada de dados.

Em seguida, adicione dva na camada de dados ??? Como juntar?
Eu descobri ontem à noite como começar a usar dva + andMobile,

Siga https://github.com/sorrycc/blog/issues/18 este tutorial para percorrer e tentar entendê-lo.

Não fui, li novamente e também procurei algumas informações.O principal problema é o entendimento do redux.
Em relação à posição de gravação de componentWillMount () e componentDidMount (), você pode me dar dicas específicas?

O componentWillMount () é gravado no gancho do roteamento?
O componentDidMount () grava em componentes externos?

A mesma pergunta

@xttianma @CodeSuPrMan alterou o componente stateless para React.Component
Consulte https://facebook.github.io/react/docs/components-and-props.html

Você pode olhar para recompor

Cumprimentos,

Nick zheng

Celular: +86118918960666 (China)
weChat: nick_zheng88
E-mail: [email protected]

Às 16h16 do dia 18 de janeiro de 2017, CodeSuPrMan [email protected] escreveu:

Este é o componente sem estado original
const LeftNavBefore = ({menus, dispatch}) => {const {mode, ItemTree
} = props.menus; const constItemTree = ItemTree; const
NavMenu = LoadMenuTree (ItemTree, ItemTree); função changeMode (valor) {
dispatch ({type: 'menus / changeMode', carga útil: {mode: value? 'vertical': 'inline',
ItemTree: ItemTree}}) ....}
Quero empacotar os componentes que precisam adicionar funções de ciclo de vida na forma de componentes de alto nível (esta função será extraída para o método geral e todas as funções de ciclo de vida que precisam ser adicionadas no futuro são empacotadas com este método ),
Desta forma, todos os componentes básicos ainda são sem estado e exigem embalagem uniforme do ciclo de vida
function wapperComponentsStatus ({ref}) {return ComposedComponent => {
return class wapper extends React.Component {componentWillMount () {
... (extraído depois)} componentDidMount () {... (extraído depois)} render () {return
}}}}

`deixe LeftNav = ref => wapperComponentsStatus ({ref: ref}) (LeftNavbefore);
Para se conectar aqui, você precisa se conectar com o modelo para passar no estado e despachar
function mapStateToProps ({menus}) {
return {menus};
}

exportar conexão padrão (mapStateToProps) (LeftNav); `

Mas escrever desta forma reportará um erro, porque o entendimento de react e redux não é muito profundo, posso perguntar se você segue meu pensamento,
Como passar os adereços de wrapperComponentsStatus para o componente LeftNavBefore (principalmente para passar a função de status) e redux
O estado e o despacho fornecidos após a conexão também são passados ​​para o componente LeftNavBefore.

-
Você está recebendo isso porque comentou.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/dvajs/dva/issues/506#issuecomment-273411035 ou mudo
o segmento
https://github.com/notifications/unsubscribe-auth/AAbhwGIy_VXKLgjZAouvWgWg0i3aF6cGks5rTcpmgaJpZM4LkSJ0
.

Você pode olhar para recompor, parece haver um envoltório em torno do ciclo de vida antes

Há um problema com o formato agora. Este é o componente sem estado original da edição.

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

Eu quero empacotar os componentes que precisam adicionar funções de ciclo de vida na forma de componentes de alto nível (esta função será extraída para o método comum, e todas as funções de ciclo de vida que precisam ser adicionadas no futuro serão empacotadas com este método), de modo que todos os componentes básicos ainda sejam mantidos sem estado, requer um empacotamento unificado do 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);

Mas escrever desta forma reportará um erro, porque o entendimento de react e redux não é muito profundo, posso perguntar se sigo meu pensamento, como passar os adereços de wrapperComponentsStatus para o componente LeftNavBefore (principalmente para passar a função de status) e fornecê-lo após redux conectar Estado e despacho também são passados ​​para o componente LeftNavBefore

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

Você pode fazer isso sozinho

@nickzheng obrigado, deixe-me ver

Não falo inglês. Só posso esperar por um plano maduro. O método atual é

A função do roteador é conectar o modelo e a visualização e, em seguida, usar React.Component para escrever,
Entre eles: this.props, expandido e fechado, é temporário, é claro o que está lá.Se esta página não mudar, é atribuída diretamente.

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

li recompor, mas no final eu mesmo escrevi

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;

A seguir está a chamada para manter todos os componentes básicos ou sem estado, você precisa encapsular o ciclo de vida com esta função para encerrá-lo.

  function DidMount({props}) {

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

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

Olhando para o documento dva novamente, há este parágrafo:

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

Link aqui

Para esta passagem, eu tenho um entendimento. O roteador escreve Componentes de Rota, que reúne dados / componentes e muito mais ..., e os componentes são componentes funcionais puros, então componentes puros, sem eventos de ciclo de vida.