Dva: 咨询关于react生命周期事件写在哪里的问题?

如果把components中的组件函数,改为 extends React.Component的话,会有什么影响?

没有影响。还是按之前的习惯写，然后在数据层加入 dva 。

然后在数据层加入 dva??? 怎么加入?
我昨天晚上才搞懂,怎么上手dva+andMobile ,

按 https://github.com/sorrycc/blog/issues/18 这个教程走一遍试试能否理解。

没有走,看了一遍, 也查找了些资料.主要问题还是对redux的理解上吧.
相对于componentWillMount() 和componentDidMount() 的写入位置,能否具体的给指点一下?

componentWillMount() 的写到路由的钩子里面?
componentDidMount() 的写到外层组件?

同问

@xttianma @CodeSuPrMan 把 stateless Component 改成 React.Component
参照 https://facebook.github.io/react/docs/components-and-props.html

可以看下recompose

Regards，

Nick zheng

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

在 2017年1月18日 下午4:16，CodeSuPrMan notifications@github.com写道：

这是原来的stateless的组件
const LeftNavBefore=({menus,dispatch})=>{ 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 } }) .... }
我想通过高阶组件的形式把需要添加生命周期函数的组件包装起来(这个函数会抽离到通用方法中，以后需要添加生命周期函数的都用这个方法包装)，
这样所有的基本组件还是保持stateless，需要生命周期的统一包装
function wapperComponentsStatus({ref}) { return ComposedComponent=>{
return class wapper extends React.Component { componentWillMount(){
...（之后提取出来） } componentDidMount(){ ...（之后提取出来） } render(){ return
} } } }

` let LeftNav=ref=>wapperComponentsStatus({ref:ref})(LeftNavbefore);
这里连接起来需要和model连接传入 state 和 dispatch
function mapStateToProps({menus}){
return {menus};
}

export default connect(mapStateToProps)(LeftNav);`

但是这样写会报错，因为对react和redux的了解不是太深吧，请问如果按我这样的思想的话，
如何将wapperComponentsStatus的props传入LeftNavBefore组件(主要是传递状态函数) 并且将redux
connect后提供的state和dispatch也传入LeftNavBefore组件呢

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/dvajs/dva/issues/506#issuecomment-273411035, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AAbhwGIy_VXKLgjZAouvWgWg0i3aF6cGks5rTcpmgaJpZM4LkSJ0
.

可以看下recompose, 之前好像有对生命周期的wrap

刚格式有问题，从编辑了下
这是原来的stateless的组件

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

我想通过高阶组件的形式把需要添加生命周期函数的组件包装起来(这个函数会抽离到通用方法中，以后需要添加生命周期函数的都用这个方法包装)，这样所有的基本组件还是保持stateless，需要生命周期的统一包装

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

但是这样写会报错，因为对react和redux的了解不是太深吧，请问如果按我这样的思想的话，如何将wapperComponentsStatus的props传入LeftNavBefore组件(主要是传递状态函数) 并且将redux connect后提供的state和dispatch也传入LeftNavBefore组件呢

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

自己也可以实现

@nickzheng 谢谢，我看看

英文的不会呀. 我只能等成熟方案了. 现在的办法是

router的作用是连接model和view的, 那就用React.Component 来写,
其中: this.props,展开又合上,是临时性, 清楚有啥. 如果这个页面不改动了.就直接赋值了.

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

recompose看了，但最后还是自己写了

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;

下面是调用 这样就能保持所有的基本组件还是stateless，需要包裹生命周期的用这个函数包一下就好了

  function DidMount({props}) {

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

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

再次看dva的文档, 有这么一段话:

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

链接在这里

对这段话,有了理解, router里面写的是Route Components, 这里汇聚了数据/组件和更多.. ,而组件是纯函数组件,那就纯组件,不用些生命周期事件了.