Dva: اسأل عن مكان كتابة أحداث دورة حياة رد الفعل؟

إذا تم تغيير وظيفة المكون في المكونات لتوسيع React.Component ، فما هو التأثير؟

بدون تأثير. استمر في الكتابة وفقًا للعادة السابقة ، ثم أضف dva إلى طبقة البيانات.

ثم إضافة dva في طبقة البيانات ؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟
لقد اكتشفت الليلة الماضية كيفية بدء استخدام dva + و Mobile ،

اتبع https://github.com/sorrycc/blog/issues/18 هذا البرنامج التعليمي لتصفحه ومحاولة فهمه.

لم أذهب لقراءته مرة أخرى ، وبحثت أيضًا عن بعض المعلومات ، والمشكلة الرئيسية هي فهم إعادة القراءة.
بالنسبة لموضع الكتابة الخاصين بـ componentWillMount () و componentDidMount () ، هل يمكن أن تعطيني مؤشرات محددة؟

هل يتم كتابة componentWillMount () على رابط التوجيه؟
هل تكتب () componentDidMount على المكونات الخارجية؟

نفس السؤال

تغيرتxttianmaCodeSuPrMan عديمي الجنسية المكونات لReact.Component
راجع https://facebook.github.io/react/docs/components-and-props.html

يمكنك إلقاء نظرة على إعادة التكوين

يعتبر،

نيك زينج

الجوال: +86118918960666 (الصين)
weChat: nick_zheng88
البريد الإلكتروني: [email protected]

في الساعة 4:16 مساءً في 18 يناير 2017 ، كتب CodeSuPrMan [email protected] :

هذا هو المكون الأصلي عديم الحالة
const LeftNavBefore = ({menus، dispatch}) => {const {mode، ItemTree
} = props.menus؛ const constItemTree = ItemTree؛ const
NavMenu = LoadMenuTree (ItemTree، ItemTree)؛ تغيير الوظيفة (القيمة) {
dispatch ({type: 'menus / changeMode'، payload: {mode: value؟ 'vertical': 'inline'،
ItemTree: ItemTree}}) ....}
أرغب في حزم المكونات التي تحتاج إلى إضافة وظائف دورة الحياة في شكل مكونات عالية المستوى (سيتم استخراج هذه الوظيفة في الطريقة العامة ، ويتم حزم جميع وظائف دورة الحياة التي يجب إضافتها في المستقبل بهذه الطريقة ) ،
بهذه الطريقة ، تظل جميع المكونات الأساسية عديمة الحالة وتتطلب تغليفًا موحدًا لدورة الحياة
function wapperComponentsStatus ({ref}) {return ComposedComponent => {
يمتد wapper لفئة الإرجاع إلى React.Component {componentWillMount () {
... (تم استخراجه لاحقًا)} componentDidMount () {... (مستخرج لاحقًا)} render () {return
}}}}

`let LeftNav = ref => wapperComponentsStatus ({المرجع: المرجع}) (LeftNavbefore) ؛
للاتصال هنا ، تحتاج إلى الاتصال بالنموذج لتمرير الحالة والإرسال
وظيفة mapStateToProps ({القوائم}) {
إرجاع {القوائم} ؛
}

تصدير الاتصال الافتراضي (mapStateToProps) (LeftNav) ؛ `

لكن الكتابة بهذه الطريقة ستبلغ عن خطأ ، لأن فهم التفاعل والإعادة ليس عميقًا جدًا ، هل لي أن أسأل عما إذا كنت تتبع تفكيري ،
كيفية تمرير الدعائم الخاصة بـ wrapperComponentsStatus إلى المكون LeftNavBefore (بشكل أساسي لتمرير وظيفة الحالة) والإعادة
يتم أيضًا تمرير الحالة والإرسال المقدم بعد الاتصال إلى مكون LeftNavBefore.

-
أنت تتلقى هذا لأنك علقت.
قم بالرد على هذا البريد الإلكتروني مباشرة ، وقم بعرضه على 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);

لكن الكتابة بهذه الطريقة ستبلغ عن خطأ ، لأن فهم التفاعل والإعادة ليس عميقًا جدًا ، هل لي أن أسأل عما إذا كنت أتبع تفكيري ، وكيفية تمرير الدعائم الخاصة بـ wrapperComponentsStatus إلى المكون LeftNavBefore (بشكل أساسي لتمرير وظيفة الحالة) و قم بتوفيره بعد حالة اتصال redux ويتم أيضًا تمرير الإرسال إلى مكون LeftNavBefore

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 مرة أخرى ، توجد هذه الفقرة:

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

رابط هنا

بالنسبة لهذا المقطع ، لدي فهم ، حيث يكتب الموجه مكونات المسار ، التي تجمع البيانات / المكونات وأكثر من ذلك ... والمكونات هي مكونات وظيفية خالصة ، ثم مكونات نقية ، ولا توجد أحداث دورة حياة.