Dva: इस बारे में पूछें कि प्रतिक्रिया जीवन चक्र की घटनाएँ कहाँ लिखी जाती हैं?

यदि घटकों में घटक फ़ंक्शन को React.Component को विस्तारित करने के लिए बदल दिया जाता है, तो इसका क्या प्रभाव होगा?

कोई प्रभाव नहीं। फिर भी पिछली आदत के अनुसार लिखें, और फिर डेटा स्तर में dva जोड़ें।

फिर डेटा लेयर में dva जोड़ें??? कैसे जुड़ें?
मुझे कल रात ही पता चला कि dva+andMobile के साथ शुरुआत कैसे करें,

इस ट्यूटोरियल को पढ़ने और समझने की कोशिश करने के लिए https://github.com/sorrycc/blog/issues/18 का अनुसरण

मैं नहीं गया, इसे फिर से पढ़ा, और कुछ जानकारी भी खोजी। मुख्य समस्या redux की समझ है।
कंपोनेंटविलमाउंट () और कंपोनेंटडिडमाउंट () की लेखन स्थिति से संबंधित, क्या आप मुझे विशिष्ट संकेत दे सकते हैं?

क्या कंपोनेंटविलमाउंट () रूटिंग के हुक पर लिखा गया है?
क्या कंपोनेंटडिडमाउंट () बाहरी घटकों को लिखता है?

वही सवाल

@xttianma @CodeSuPrMan ने स्टेटलेस कंपोनेंट को रिएक्ट में बदल दिया। कॉम्पोनेंट
https://facebook.github.io/react/docs/components-and-props.html देखें

आप पुनः रचना देख सकते हैं

सादर,

निक झेंग

मोबाइल: +86118918960666 (चीन)
वीचैट: निक_झेंग88
ई-मेल: [email protected]

18 जनवरी, 2017 पर 4:16 बजे, CodeSuPrMan [email protected] लिखा है:

यह मूल स्टेटलेस घटक है
कॉन्स्ट लेफ्टनव बिफोर = ({मेनू, डिस्पैच}) => {कॉन्स्ट {मोड, आइटमट्री
}=props.menus; const constItemTree=ItemTree; const
नवमेनू = लोडमेनू ट्री (आइटम ट्री, आइटम ट्री); फ़ंक्शन चेंजमोड (मान) {
डिस्पैच ({प्रकार: 'मेनू / चेंजमोड', पेलोड: {मोड: वैल्यू? 'वर्टिकल': 'इनलाइन',
आइटमट्री:आइटमट्री}}) ....}
मैं उन घटकों को पैकेज करना चाहता हूं जिन्हें उच्च-स्तरीय घटकों के रूप में जीवन चक्र कार्यों को जोड़ने की आवश्यकता है (यह फ़ंक्शन सामान्य विधि में निकाला जाएगा, और भविष्य में जोड़े जाने वाले सभी जीवन चक्र कार्यों को इस विधि के साथ पैक किया जाएगा। ),
इस तरह, सभी बुनियादी घटक अभी भी स्टेटलेस हैं और जीवन चक्र की एक समान पैकेजिंग की आवश्यकता है
फ़ंक्शन वेपरकंपोनेंट्सस्टैटस ({रेफरी}) {रिटर्न कंपोज्ड कॉम्पोनेंट => {
रिटर्न क्लास वैपर React.Component {componentWillMount(){ को बढ़ाता है
... (बाद में निकाला गया)} कंपोनेंटडिडमाउंट () {... (बाद में निकाला गया)} रेंडर () {वापसी
}}}}

`LeftNav=ref=>wapperComponentsStatus({ref:ref})(LeftNavbefore);
यहां कनेक्ट करने के लिए, आपको राज्य और प्रेषण में पास होने के लिए मॉडल से जुड़ने की आवश्यकता है
फ़ंक्शन mapStateToProps({menus}){
वापसी {मेनू};
}

निर्यात डिफ़ॉल्ट कनेक्ट (mapStateToProps) (LeftNav); `

लेकिन इस तरह से लिखना एक त्रुटि की रिपोर्ट करेगा, क्योंकि प्रतिक्रिया और रिडक्स की समझ बहुत गहरी नहीं है, क्या मैं पूछ सकता हूं कि क्या आप मेरी सोच का पालन करते हैं,
रैपरकंपोनेंट्सस्टैटस के प्रॉप्स को लेफ्टनवबीफोर कंपोनेंट (मुख्य रूप से स्टेटस फंक्शन पास करने के लिए) और रेडक्स में कैसे पास करें
कनेक्ट के बाद प्रदान की गई स्थिति और प्रेषण भी घटक लेफ्टनवबीयर को पास कर दिए जाते हैं।

-
आप इसे प्राप्त कर रहे हैं क्योंकि आपने टिप्पणी की थी।
इस ईमेल का सीधे उत्तर दें, इसे GitHub पर देखें
https://github.com/dvajs/dva/issues/506#issuecomment-273411035 , या म्यूट करें
सूत्र
https://github.com/notifications/unsubscribe-auth/AAbhwGIy_VXKLgjZAouvWgWg0i3aF6cGks5rTcpmgaJpZM4LkSJ0
.

आप पुनर्संयोजन को देख सकते हैं, ऐसा लगता है कि पहले जीवन चक्र के चारों ओर एक लपेट है

अभी प्रारूप में कोई समस्या है। यह संपादन का मूल स्टेटलेस घटक है।

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 कनेक्ट स्टेट के बाद इसे प्रदान करें और डिस्पैच को भी लेफ्टनव में पास किया जाएघटक से पहले

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

आपके द्वारा इसे स्वयं ही किया जा सकता है

@nickzheng धन्यवाद, मुझे देखने दो

मैं अंग्रेजी नहीं बोल सकता। मैं केवल एक परिपक्व योजना की प्रतीक्षा कर सकता हूं। वर्तमान पद्धति है

राउटर की भूमिका मॉडल को जोड़ने और देखने के लिए है, फिर लिखने के लिए React.Component का उपयोग करें,
उनमें से: यह.प्रोप, विस्तारित और बंद, अस्थायी है, यह स्पष्ट है कि वहां क्या है। यदि यह पृष्ठ नहीं बदलता है, तो इसे सीधे असाइन किया जाता है।

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 中，通常需要 connect Model的组件都是 Route Components，组织在/routes/目录下，而/components/目录下则是纯组件（Presentational Components）

यहां लिंक करें

इस मार्ग के लिए, मुझे एक समझ है। राउटर रूट घटक लिखता है, जो डेटा/घटक और अधिक एकत्र करता है ..., और घटक शुद्ध कार्यात्मक घटक होते हैं, फिर शुद्ध घटक, कोई जीवन चक्र घटना नहीं।