Dva: 반응 라이프 사이클 이벤트가 어디에 기록되는지 물어보십시오.

컴포넌트의 컴포넌트 기능이 React.Component를 확장하도록 변경되면 어떤 영향이 있습니까?

효과가 없습니다. 여전히 이전 습관에 따라 작성한 다음 데이터 계층에 dva를 추가하십시오.

그런 다음 데이터 레이어에 dva를 추가하세요??? ​​가입 방법은?
어젯밤에 dva+andMobile을 시작하는 방법을 알아냈습니다.

https://github.com/sorrycc/blog/issues/18 이 튜토리얼을 따라 진행하고 이해하려고 노력하십시오.

안가서 다시 읽고 정보도 좀 찾아봤는데 가장 큰 문제는 redux에 대한 이해입니다.
componentWillMount() 및 componentDidMount()의 쓰기 위치를 기준으로 특정 포인터를 줄 수 있습니까?

componentWillMount()가 라우팅의 후크에 기록됩니까?
componentDidMount()가 외부 구성 요소에 기록합니까?

같은 질문

@xttianma @CodeSuPrMan 이 상태 비저장 구성 요소를 React.Component로 변경했습니다.
https://facebook.github.io/react/docs/components-and-props.html 참조

당신은 재구성을 볼 수 있습니다

문안 인사,

닉 정

모바일: +86118918960666(중국)
위챗:nick_zheng88
이메일: [email protected]

2017년 1월 18일 오후 4시 16분에 CodeSuPrMan [email protected]에서 다음과 같이 썼습니다.

이것은 원래 상태 비저장 구성 요소입니다.
const LeftNavBefore=({menus,dispatch})=>{ const{ 모드,ItemTree
}=props.menus; const constItemTree=ItemTree; const
NavMenu=LoadMenuTree(ItemTree,ItemTree); 함수 변경 모드(값){
디스패치({ 유형:'메뉴/변경 모드', 페이로드:{ 모드:값?'수직':'인라인',
아이템 트리: 아이템 트리} }) ....}
라이프 사이클 기능을 추가해야 하는 컴포넌트를 하이 레벨 컴포넌트 형태로 패키징하고 싶습니다. ),
이러한 방식으로 모든 기본 구성 요소는 여전히 상태 비저장이며 수명 주기의 균일한 패키징이 필요합니다.
함수 wapperComponentsStatus({ref}) {Return CompposedComponent=>{
반환 클래스 wapper는 React.Component {componentWillMount(){를 확장합니다.
... (나중에 추출됨)} componentDidMount(){ ... (나중에 추출됨)} render(){ 반환
}}}}

`let LeftNav=ref=>wapperComponentsStatus({ref:ref})(LeftNavbefore);
여기에 연결하려면 상태를 전달하고 디스패치할 모델과 연결해야 합니다.
함수 mapStateToProps({메뉴}){
반환 {메뉴};
}

내보내기 기본 연결(mapStateToProps)(LeftNav);`

하지만 이런 식으로 작성하면 오류가 보고됩니다. react와 redux에 대한 이해가 너무 깊지 않기 때문에 제 생각을 따라가도 될까요?
wrapperComponentsStatus의 props를 LeftNavBefore 구성 요소에 전달하는 방법(주로 상태 기능을 전달하기 위해) 및 redux
연결 후 제공된 상태 및 디스패치도 LeftNavBefore 구성 요소에 전달됩니다.

—
당신이 댓글을 달았기 때문에 이것을 받는 것입니다.
이 이메일에 직접 답장하고 GitHub에서 확인하세요.
https://github.com/dvajs/dva/issues/506#issuecomment-273411035 또는 음소거
스레드
https://github.com/notifications/unsubscribe-auth/AAbhwGIy_VXKLgjZAouvWgWg0i3aF6cGks5rTcpmgaJpZM4LkSJ0
.

recompose를 볼 수 있습니다. 이전에 라이프 사이클을 감싸는 것 같습니다.

지금 형식에 문제가 있습니다. 이것은 편집에서 원래 상태 비저장 구성 요소입니다.

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

라이프 사이클 기능을 추가해야 하는 컴포넌트를 하이 레벨 컴포넌트 형태로 패키징하고 싶습니다. 이 방법), 모든 기본 구성 요소가 여전히 상태 비저장 상태로 유지되도록 하려면 수명 주기의 통합 패키징이 필요합니다.

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

그러나 이렇게 작성하면 오류가 보고됩니다. 반응 및 redux에 대한 이해가 너무 깊지 않기 때문입니다. 제 생각을 따르는지, wrapperComponentsStatus의 props를 LeftNavBefore 구성 요소에 전달하는 방법(주로 상태 기능을 전달하기 위해) 및 redux 연결 상태 및 디스패치도 LeftNavBefore 구성 요소에 전달된 후 제공합니다.

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

당신은 그것을 스스로 할 수 있습니다

@nickzheng 고마워, 보자

나는 영어를 못해 성숙한 계획을 기다릴 수 밖에 없다 현재 방법은

라우터의 역할은 모델과 뷰를 연결한 다음 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);

재구성을 읽었지만 결국 내가 직접 작성했습니다.

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;

다음은 모든 기본 구성 요소를 유지하거나 상태를 저장하지 않는 호출입니다. 이 함수를 사용하여 수명 주기를 래핑해야 합니다.

  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）

여기 링크

이 구절에 대해 이해하고 있습니다. 라우터는 데이터/구성 요소 등을 수집하는 Route 구성 요소를 작성합니다. 구성 요소는 순수 기능 구성 요소이고 순수 구성 요소는 수명 주기 이벤트가 없습니다.