Dva: Tanyakan tentang di mana peristiwa siklus hidup reaksi ditulis?

Jika fungsi komponen dalam komponen diubah menjadi ekstensi React.Component, apa dampaknya?

Tidak berpengaruh. Masih menulis sesuai dengan kebiasaan sebelumnya, lalu tambahkan dva ke lapisan data.

Kemudian tambahkan dva di lapisan data??? Bagaimana cara bergabung?
Saya baru tahu tadi malam, bagaimana memulai dengan dva+andMobile,

Ikuti https://github.com/sorrycc/blog/issues/18 tutorial ini untuk melalui dan mencoba memahaminya.

Saya tidak pergi, membacanya lagi, dan juga mencari beberapa informasi.Masalah utamanya adalah pemahaman tentang redux.
Sehubungan dengan posisi penulisan componentWillMount() dan componentDidMount(), dapatkah Anda memberi saya petunjuk khusus?

Apakah componentWillMount() ditulis ke pengait perutean?
Apakah componentDidMount() menulis ke komponen luar?

Pertanyaan yang sama

@xttianma @CodeSuPrMan mengubah Komponen stateless menjadi React.Component
Lihat https://facebook.github.io/react/docs/components-and-props.html

Anda dapat melihat komposisi ulang

Salam,

Nick zheng

Seluler: +86118918960666 (Cina)
weChat:nick_zheng88
Email: [email protected]

Pada 16:16 pada 18 Januari 2017, CodeSuPrMan [email protected] menulis:

Ini adalah komponen stateless asli
const LeftNavBefore=({menus,dispatch})=>{ const{ mode,ItemTree
}=props.menus; const constItemTree=ItemTree; const
NavMenu=LoadMenuTree(ItemTree,ItemTree); fungsi changeMode(nilai){
pengiriman({ type:'menus/changeMode', payload:{ mode:value?'vertical':'inline',
ItemTree:ItemTree} }) ....}
Saya ingin mengemas komponen yang perlu ditambahkan fungsi siklus hidup dalam bentuk komponen tingkat tinggi (fungsi ini akan diekstraksi ke metode umum, dan semua fungsi siklus hidup yang perlu ditambahkan di masa depan dikemas dengan metode ini ),
Dengan cara ini, semua komponen dasar masih stateless dan memerlukan pengemasan siklus hidup yang seragam
function wapperComponentsStatus({ref}) {return ComposedComponent=>{
wapper kelas kembali memperluas React.Component {componentWillMount(){
... (diekstrak nanti)} componentDidMount(){ ... (diekstrak nanti)} render(){ return
}}}}

`let LeftNav=ref=>wapperComponentsStatus({ref:ref})(LeftNavbefore);
Untuk terhubung di sini, Anda harus terhubung dengan model untuk meneruskan status dan pengiriman
fungsi mapStateToProps({menus}){
kembali {menu};
}

ekspor default connect(mapStateToProps)(LeftNav);`

Tetapi penulisan cara ini akan melaporkan kesalahan, karena pemahaman tentang react dan redux tidak terlalu dalam, bolehkah saya bertanya apakah Anda mengikuti pemikiran saya,
Cara meneruskan props dari wrapperComponentsStatus ke komponen LeftNavBefore (terutama untuk meneruskan fungsi status) dan redux
Status dan pengiriman yang diberikan setelah terhubung juga diteruskan ke komponen LeftNavBefore.

—
Anda menerima ini karena Anda berkomentar.
Balas email ini secara langsung, lihat di GitHub
https://github.com/dvajs/dva/issues/506#issuecomment-273411035 , atau bisu
benang
https://github.com/notifications/unsubscribe-auth/AAbhwGIy_VXKLgjZAouvWgWg0i3aF6cGks5rTcpmgaJpZM4LkSJ0
.

Anda dapat melihat komposisi ulang, sepertinya ada siklus hidup sebelumnya

Ada masalah dengan format barusan. Ini adalah komponen stateless asli dari hasil edit.

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

Saya ingin mengemas komponen yang perlu ditambahkan fungsi siklus hidup dalam bentuk komponen tingkat tinggi (fungsi ini akan diekstraksi ke dalam metode umum, dan semua fungsi siklus hidup yang perlu ditambahkan di masa depan akan dikemas dengan metode ini), agar semua komponen dasar tetap terjaga stateless, membutuhkan pengemasan yang terpadu dari siklus hidup

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

Tetapi menulis cara ini akan melaporkan kesalahan, karena pemahaman tentang reaksi dan redux tidak terlalu dalam, bolehkah saya bertanya apakah saya mengikuti pemikiran saya, bagaimana cara meneruskan alat peraga wrapperComponentsStatus ke komponen LeftNavBefore (terutama untuk melewati fungsi status) dan berikan setelah redux connect State dan pengiriman juga diteruskan ke komponen LeftNavBefore

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

Anda bisa melakukannya sendiri

@nickzheng terima kasih, biarkan aku melihat

Saya tidak bisa berbahasa Inggris. Saya hanya bisa menunggu rencana yang matang. Metode saat ini adalah

Peran router adalah untuk menghubungkan model dan tampilan, kemudian menggunakan React.Component untuk menulis,
Diantaranya: this.props, diperluas dan ditutup, bersifat sementara, jelas apa yang ada, jika halaman ini tidak berubah, itu langsung ditugaskan.

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

baca recompose, tapi akhirnya saya tulis sendiri

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;

Berikut ini adalah panggilan untuk menyimpan semua komponen dasar atau stateless, Anda perlu membungkus siklus hidup dengan fungsi ini untuk membungkusnya.

  function DidMount({props}) {

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

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

Melihat dokumen dva lagi, ada paragraf ini:

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

Tautan di sini

Untuk bagian ini, saya memiliki pemahaman. Router menulis Komponen Rute, yang mengumpulkan data/komponen dan banyak lagi..., dan komponennya adalah komponen fungsional murni, lalu komponen murni, tidak ada peristiwa siklus hidup.