Dva: Спросите, где написаны события жизненного цикла реакции?

Созданный на 16 янв. 2017  ·  15Комментарии  ·  Источник: dvajs/dva

  1. componentWillMount
  2. componentDidMount

Я только начал связываться с два, и я действительно не знаю, как реализовать события жизненного цикла, которые я делал в два. Вы можете привести пример?

Вдобавок, если функция компонента в компонентах будет изменена на extends React.Component, каков будет эффект?

question

Самый полезный комментарий

Все 15 Комментарий

Если функция компонента в компонентах будет изменена на extends React.Component, каков будет эффект?

Нет эффекта. По-прежнему пишите по предыдущей привычке, а затем добавляйте два в слой данных.

Потом добавить два в слой данных ??? Как присоединиться?
Я только вчера вечером разобрался, как начать работу с два + и Мобайл,

Следуйте https://github.com/sorrycc/blog/issues/18 этому руководству, чтобы пройти и попытаться понять его.

Не пошел, перечитал, тоже искал какую-то информацию.Главная проблема - понимание redux.
Можете ли вы дать мне конкретные указатели относительно позиции записи componentWillMount () и componentDidMount ()?

Записан ли componentWillMount () в ловушку маршрутизации?
Записывает ли componentDidMount () внешние компоненты?

Тот же вопрос

@xttianma @CodeSuPrMan изменил Component без сохранения состояния на React.Component
См. Https://facebook.github.io/react/docs/components-and-props.html.

Вы можете посмотреть на перекомпоновку

С уважением,

Ник Чжэн

Мобильный: +86118918960666 (Китай)
weChat: nick_zheng88
Электронная почта: [email protected]

В 16:16 18 января 2017 года CodeSuPrMan [email protected] написал:

Это исходный компонент без состояния
const LeftNavBefore = ({меню, отправка}) => {const {режим, 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}}) ....}
Я хочу упаковать компоненты, которым необходимо добавить функции жизненного цикла, в виде высокоуровневых компонентов (эта функция будет извлечена в общий метод, и все функции жизненного цикла, которые необходимо добавить в будущем, упакованы с помощью этого метода. ),
Таким образом, все базовые компоненты по-прежнему не имеют состояния и требуют единой упаковки жизненного цикла.
function wapperComponentsStatus ({ref}) {return ComposedComponent => {
return class wapper расширяет React.Component {componentWillMount () {
... (извлечено позже)} componentDidMount () {... (извлечено позже)} render () {return
}}}}

`let LeftNav = ref => wapperComponentsStatus ({ref: ref}) (LeftNavbefore);
Чтобы подключиться сюда, вам необходимо подключиться к модели для передачи состояния и отправки
function mapStateToProps ({menus}) {
вернуться {меню};
}

экспортировать соединение по умолчанию (mapStateToProps) (LeftNav); `

Но написание таким образом сообщит об ошибке, потому что понимание реакции и редукции не слишком глубокое, могу я спросить, следуете ли вы моему мнению,
Как передать свойства wrapperComponentsStatus компоненту LeftNavBefore (в основном для передачи функции статуса) и redux
Состояние и отправка, предоставленные после подключения, также передаются компоненту 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 connect State и dispatch также передаются в компонент LeftNavBefore

Вы можете сделать это сами

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

Ссылка здесь

Для этого отрывка у меня есть понимание. Маршрутизатор пишет компоненты маршрута, которые собирают данные / компоненты и многое другое ..., и компоненты являются чисто функциональными компонентами, затем чистыми компонентами, без событий жизненного цикла.

Была ли эта страница полезной?
0 / 5 - 0 рейтинги