欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

concent漸進(jìn)式重構(gòu)react應(yīng)用使用詳解

 更新時(shí)間:2022年11月07日 12:00:41   作者:騰訊新聞前端團(tuán)隊(duì)  
這篇文章主要為大家介紹了concent漸進(jìn)式重構(gòu)react應(yīng)用的使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

正文

傳統(tǒng)的redux項(xiàng)目里,我們寫在reducer里的狀態(tài)一定是要打通到store的,我們一開始就要規(guī)劃好state、reducer等定義,有沒有什么方法,既能夠快速享受ui與邏輯分離的福利,又不需要照本宣科的從條條框框開始呢?本文從普通的react寫法開始,當(dāng)你一個(gè)收到一個(gè)需求后,腦海里有了組件大致的接口定義,然后絲滑般的接入到concent世界里,感受漸進(jìn)式的快感以及全新api的獨(dú)有魅力吧!

需求來了

上周天氣其實(shí)不是很好,記得下了好幾場雨,不過北京總部大廈的隔音太好了,以致于都沒有感受到外面的風(fēng)雨飄搖,在工位上正在思索著整理下現(xiàn)有代碼時(shí),接到一個(gè)普通的需求,大致是要實(shí)現(xiàn)一個(gè)彈窗。

  • 左側(cè)有一個(gè)可選字段列表,點(diǎn)擊任意一個(gè)字段,就會進(jìn)入右側(cè)。
  • 右側(cè)有一個(gè)已選字段列表,該列表可以上下拖拽決定字段順序決定表格里的列字段顯示順序,同時(shí)也可以刪除,將其恢復(fù)到可選擇列表。
  • 點(diǎn)擊保存,將用戶的字段配置存儲到后端,用戶下次再次使用查看該表格時(shí),使用已配置的顯示字段來展示。

這是一個(gè)非常普通的需求,我相信不少碼神看完后,腦海里已經(jīng)把代碼雛形大致寫完了吧,嘿嘿,但是還請耐性看完本篇文章,來看看在concent的加持下,你的react應(yīng)用將如何變得更加靈活與美妙,正如我們的slogan:

concent, power your react

準(zhǔn)備工作

產(chǎn)品同學(xué)期望快速見到一般效果原型,而我希望原型是可以持續(xù)重構(gòu)和迭代的基礎(chǔ)代碼,當(dāng)然要認(rèn)真對待了,不能為了交差而亂寫一版,所以要快速整理需求并開始準(zhǔn)備工作了。

因?yàn)轫?xiàng)目大量基于antd來書寫UI,聽完需求后,腦海里冒出了一個(gè)穿梭框模樣的組件,但因?yàn)橛覀?cè)是一個(gè)可拖拽列表,查閱了下沒有類似的組件,那就自己實(shí)現(xiàn)一個(gè)吧,初步整理下,大概列出了以下思路。

  • 組件命名為ColumnConfModal,基于antdModal, Card實(shí)現(xiàn)布局,antdList來實(shí)現(xiàn)左側(cè)的選擇列表,基于react-beautiful-dnd的可拖拽api來實(shí)現(xiàn)右側(cè)的拖拽列表。

  • 因?yàn)檫@個(gè)彈窗組件在不同頁面被不同的table使用,傳入的列定義數(shù)據(jù)是不一樣的,所以我們使用事件的方式,來觸發(fā)打開彈窗并傳遞表格id,打開彈窗后獲取該表格的所有字段定義,以及用戶針對表哥的已選擇字段數(shù)據(jù),這樣把表格元數(shù)據(jù)的初始化工作收斂在ColumnConfModal內(nèi)部。
  • 基于表格左右兩側(cè)的交互,大致定義一下內(nèi)部接口 1 moveToSelectedList(移入到已選擇列表 ) 2 moveToSelectableList(移入到可選擇列表) 3 saveSelectedList(保存用戶的已選擇列表) 4 handleDragEnd(處理已選擇列表順序調(diào)整完成時(shí)) 5 其他略.....

UI 實(shí)現(xiàn)

因?yàn)樽詾?code>concent組件后天生擁有了emit&on的能力,而且不需要手動(dòng)off,concent在實(shí)例銷毀前自動(dòng)就幫你解除其事件監(jiān)聽,所以我們可以注冊完成后,很方便的監(jiān)聽openColumnConf事件了。

我們先拋棄各種store和reducer定義,快速的基于class擼出一個(gè)原型,利用register接口將普通組件注冊為concent組件,偽代碼如下

import { register } from 'concent';
class ColumnConfModal extends React.Component {
  state = {
    selectedColumnKeys: [],
    selectableColumnKeys: [],
    visible: false,
  };
  componentDidMount(){
    this.ctx.on('openColumnConf', ()=>{
      this.setState({visible:true});
    });
  }
  moveToSelectedList = ()=>{
    //code here
  }
  moveToSelectableList = ()=>{
    //code here
  }
  saveSelectedList = ()=>{
    //code here
  }
  handleDragEnd = ()=>{
    //code here
  }
  render(){
    const {selectedColumnKeys, selectableColumnKeys, visible} = this.state;
    return (
      <Modal title="設(shè)置顯示字段" visible={state._visible} onCancel={settings.closeModal}>
        <Head />
        <Card title="可選字段">
          <List dataSource={selectableColumnKeys} render={item=>{
            //...code here
          }}/>
        </Card>
        <Card title="已選字段">
          <DraggableList dataSource={selectedColumnKeys} onDragEnd={this.handleDragEnd}/>
        </Card>
      </Modal>
    );
  }
}
// es6裝飾器還處于實(shí)驗(yàn)階段,這里就直接包裹類了
// 等同于在class上@register( )來裝飾類
export default register( )(ColumnConfModal)

可以發(fā)現(xiàn),這個(gè)類的內(nèi)部和傳統(tǒng)的react類寫法并無區(qū)別,唯一的區(qū)別是concent會為每一個(gè)實(shí)例注入一個(gè)上下文對象ctx來暴露concentreact帶來的新特性api。

消滅生命周期函數(shù)

因?yàn)槭录谋O(jiān)聽只需要執(zhí)行一次,所以例子中我們在componentDidMount里完成了事件openColumnConf的監(jiān)聽注冊。

根據(jù)需求,顯然的我們還要在這里書寫獲取表格列定義元數(shù)據(jù)和獲取用戶的個(gè)性化列定義數(shù)據(jù)的業(yè)務(wù)邏輯

  componentDidMount() {
    this.ctx.on('openColumnConf', () => {
      this.setState({ visible: true });
    });
    const tableId = this.props.tid;
    tableService.getColumnMeta(`/getMeta/${tableId}`, (columns) => {
      userService.getUserColumns(`/getUserColumns/${tableId}`, (userColumns) => {
        //根據(jù)columns userColumns 計(jì)算selectedList selectableList
      });
    });
  }

所有的concent實(shí)例可以定義setup鉤子函數(shù),該函數(shù)只會在初次渲染前調(diào)用一次。

現(xiàn)在讓我們來用setup代替掉此生命周期

  //class 里定義的setup加$$前綴
  $$setup(ctx){
    //這里定義on監(jiān)聽,在組件掛載完畢后開始真正監(jiān)聽on事件
    ctx.on('openColumnConf', () => {
      this.setState({ visible: true });
    });
    //標(biāo)記依賴列表為空數(shù)組,在組件初次渲染只執(zhí)行一次
    //模擬componentDidMount
    ctx.effect(()=>{
      //service call balabala.....
    }, []);
  }

如果已熟悉hook的同學(xué),看到setup里的effectapi語法是不是和useEffect有點(diǎn)像?

effectuseEffect的執(zhí)行時(shí)機(jī)是一樣的,即每次組件渲染完畢之后,但是effect只需要在setup調(diào)用一次,相當(dāng)于是靜態(tài)的,更具有性能提升空間,假設(shè)我們加一個(gè)需求,每次vibible變?yōu)閒alse時(shí),上報(bào)后端一個(gè)操作日志,就可以寫為

    //依賴列表填入key的名稱,表示當(dāng)這個(gè)key的值發(fā)生變化時(shí),觸發(fā)副作用
    ctx.effect( ctx=>{
      if(!ctx.state.visible){
        //當(dāng)前最新的visible已是false,上報(bào)
      }
    }, ['visible']);

關(guān)于effect就點(diǎn)到為止,說得太多扯不完了,我們繼續(xù)回到本文的組件上。

提升狀態(tài)到store

我們希望組件的狀態(tài)變更可以被記錄下來,方便觀察數(shù)據(jù)變化,so,我們先定義一個(gè)store的子模塊,名為ColumnConf

定義其sate為

// code in ColumnConfModal/model/state.js
export function getInitialState() {
  return {
    selectedColumnKeys: [],
    selectableColumnKeys: [],
	visible: false,
  };
}
export default getInitialState();

然后利用concentconfigure接口載入此配置

// code in ColumnConfModal/model/index.js
import { configure } from 'concent';
import state from './state';
// 配置模塊ColumnConf
configure('ColumnConf', {
  state,
});

注意這里,讓model跟著組件定義走,方便我們維護(hù)model里的業(yè)務(wù)邏輯。

整個(gè)store已經(jīng)被concent掛載到了window.sss下,為了方便查看store,當(dāng)當(dāng)當(dāng)當(dāng),你可以打開console,直接查看store各個(gè)模塊當(dāng)前的最新數(shù)據(jù)。

然后我們把class注冊為'配置模ColumnConf的組件,現(xiàn)在class里的state聲明可以直接被我們干掉了。

import './model';//引用一下model文件,觸發(fā)model配置到concent
@register('ColumnConf')
class ColumnConfModal extends React.Component {
  // state = {
  //   selectedColumnKeys: [],
  //   selectableColumnKeys: [],
  //   visible: false,
  // };
  render(){
    const {selectedColumnKeys, selectableColumnKeys, visible} = this.state;
  }
}

大家可能注意到了,這樣暴力的注釋掉,render里的代碼會不會出問題?放心吧,不會的,concent組件的state和store是天生打通的,同樣的setState也是和store打通的,我們先來安裝一個(gè)插件concent-plugin-redux-devtool。

import ReduxDevToolPlugin from 'concent-plugin-redux-devtool';
import { run } from 'concent';
// storeConfig配置略,詳情可參考concent官網(wǎng)
run(storeConfig, {
	plugins: [ ReduxDevToolPlugin ]
});

注意哦,concent驅(qū)動(dòng)ui渲染的原理和redux完全不一樣的,核心邏輯部分也不是在redux之上做包裝,和redux一點(diǎn)關(guān)系都沒有的^_^,這里只是橋接了redux-dev-tool插件,來輔助做狀態(tài)變更記錄的,小伙伴們千萬不要誤會,沒有redux,concent一樣能夠正常運(yùn)作,但是由于concent提供完善的插件機(jī)制,為啥不利用社區(qū)現(xiàn)有的優(yōu)秀資源呢,重復(fù)造無意義的輪子很辛苦滴(⊙﹏⊙)b......

現(xiàn)在讓我們打開chrome的redux插件看看效果吧。

上圖里是含有大量的ccApi/setState,是因?yàn)檫€有不少邏輯沒有抽離到reducer,dispatch/***模樣的type就是dispatch調(diào)用了,后面我們會提到。

這樣看狀態(tài)變遷是不是要比window.sss好多了,因?yàn)?code>sss只能看當(dāng)前最新的狀態(tài)。

這里既然提到了redux-dev-tool,我們就順道簡單了解下,concent提交的數(shù)據(jù)長什么樣子吧

上圖里可以看到5個(gè)字段,renderKey是用于提高性能用的,可以先不作了解,這里我們就說說其他四個(gè),module表示修改的數(shù)據(jù)所屬的模塊名,committedState表示提交的狀態(tài),sharedState表示共享到store的狀態(tài),ccUniqueKey表示觸發(fā)數(shù)據(jù)修改的實(shí)例id。

為什么要區(qū)分committedStatesharedState呢?因?yàn)?code>setState調(diào)用時(shí)允許提交自己的私有key的(即沒有在模塊里聲明的key),所以committedState是整個(gè)狀態(tài)都要再次派發(fā)給調(diào)用者,而sharedState是同步到store后,派發(fā)給同屬于module值的其他cc組件實(shí)例的。

這里就借用官網(wǎng)一張圖示意下:

所以我們可以在組件里聲明其他非模塊的key,然后在this.state里獲取到了

@register('ColumnConf')
class ColumnConfModal extends React.Component {
   state = {
		_myPrivKey:'i am a private field value, not for store',
   };
  render(){
  	//這里同時(shí)取到了模塊的數(shù)據(jù)和私有的數(shù)據(jù)
    const {selectedColumnKeys, selectableColumnKeys, visible, _myPrivKey} = this.state;
  }
}

解耦業(yè)務(wù)邏輯與UI

雖然代碼能夠正常工作,狀態(tài)也接入了store,但是我們發(fā)現(xiàn)class已經(jīng)變得臃腫不堪了,利用setState懟固然快和方便,但是后期維護(hù)和迭代的代價(jià)就會慢慢越來越大,讓我們把業(yè)務(wù)抽到reduder

export function setLoading(loading) {
  return { loading };
};
/** 移入到已選擇列表 */
export function moveToSelectedList() {
}
/** 移入到可選擇列表 */
export function moveToSelectableList() {
}
/** 初始化列表 */
export async function initSelectedList(tableId, moduleState, ctx) {
  //這里可以不用基于字符串 ctx.dispatch('setLoading', true) 去調(diào)用了,雖然這樣寫也是有效的
  await ctx.dispatch(setLoading, true);
  const columnMeta = await tableService..getColumnMeta(`/getMeta/${tableId}`);
  const userColumsn = await userService.getUserColumns(`/getUserColumns/${tableId}`);
  //計(jì)算 selectedColumnKeys selectableColumnKeys 略
  //僅返回需要設(shè)置到模塊的片斷state就可以了
  return { loading: false, selectedColumnKeys, selectableColumnKeys };
}
/** 保存已選擇列表 */
export async function saveSelectedList(tableId, moduleState, ctx) {
}
export function handleDragEnd() {
}

利用concentconfigure接口把reducer也配置進(jìn)去

// code in ColumnConfModal/model/index.js
import { configure } from 'concent';
import * as reducer from 'reducer';
import state from './state';
// 配置模塊ColumnConf
configure('ColumnConf', {
  state,
  reducer,
});

還記得上面的setup嗎,setup可以返回一個(gè)對象,返回結(jié)果將收集在settiings里,現(xiàn)在我們稍作修改,然后來看看class吧,世界是不是清靜多了呢?

import { register } from 'concent';
class ColumnConfModal extends React.Component {
  $$setup(ctx) {
    //這里定義on監(jiān)聽,在組件掛載完畢后開始真正監(jiān)聽on事件
    ctx.on('openColumnConf', () => {
      this.setState({ visible: true });
    });
    //標(biāo)記依賴列表為空數(shù)組,在組件初次渲染只執(zhí)行一次
    //模擬componentDidMount
    ctx.effect(() => {
      ctx.dispatch('initSelectedList', this.props.tid);
    }, []);
    return {
      moveToSelectedList: (payload) => {
        ctx.dispatch('moveToSelectedList', payload);
      },
      moveToSelectableList: (payload) => {
        ctx.dispatch('moveToSelectableList', payload);
      },
      saveSelectedList: (payload) => {
        ctx.dispatch('saveSelectedList', payload);
      },
      handleDragEnd: (payload) => {
        ctx.dispatch('handleDragEnd', payload);
      }
    }
  }
  render() {
    //從settings里取出這些方法
    const { moveToSelectedList, moveToSelectableList, saveSelectedList, handleDragEnd } = this.ctx.settings;
  }
}

愛class,愛hook,讓兩者和諧共處

react社區(qū)轟轟烈烈推動(dòng)了Hook,讓大家逐步用Hook組件代替class組件,但是本質(zhì)上Hook逃離了this,精簡了dom渲染層級,但是也帶來了組件存在期間大量的臨時(shí)匿名閉包重復(fù)創(chuàng)建。

來看看concent怎么解決這個(gè)問題的吧,上面已提到setup支持返回結(jié)果,將被收集在settiings里,現(xiàn)在讓稍微的調(diào)整下代碼,將class組件吧變身為Hook組件吧。

import { useConcent } from 'concent';
const setup = (ctx) => {
  //這里定義on監(jiān)聽,在組件掛載完畢后開始真正監(jiān)聽on事件
  ctx.on('openColumnConf', (tid) => {
    ctx.setState({ visible: true, tid });
  });
  //標(biāo)記依賴列表為空數(shù)組,在組件初次渲染只執(zhí)行一次
  //模擬componentDidMount
  ctx.effect(() => {
    ctx.dispatch('initSelectedList', ctx.state.tid);
  }, []);
  return {
    moveToSelectedList: (payload) => {
      ctx.dispatch('moveToSelectedList', payload);
    },
    moveToSelectableList: (payload) => {
      ctx.dispatch('moveToSelectableList', payload);
    },
    saveSelectedList: (payload) => {
      ctx.dispatch('saveSelectedList', payload);
    },
    handleDragEnd: (payload) => {
      ctx.dispatch('handleDragEnd', payload);
    }
  }
}
const iState = { _myPrivKey: 'myPrivate state', tid:null };
export function ColumnConfModal() {
  const ctx = useConcent({ module: 'ColumnConf', setup, state: iState });
  const { moveToSelectedList, moveToSelectableList, saveSelectedList, handleDragEnd } = ctx.settings;
  const { selectedColumnKeys, selectableColumnKeys, visible, _myPrivKey } = ctx.state;
  // return your ui
}

在這里要感謝尤雨溪老師的這篇Vue Function-based API RFC,給了我很大的靈感,現(xiàn)在你可以看到所以的方法的都在setup里定義完成,當(dāng)你的組件很多的時(shí)候,給gc減小的壓力是顯而易見的。

由于兩者的寫法高度一致,從classHook是不是非常的自然呢?我們其實(shí)不需要爭論該用誰更好了,按照你的個(gè)人喜好就可以,就算某天你看class不順眼了,在concent的代碼風(fēng)格下,重構(gòu)的代價(jià)幾乎為0。

使用組件

上面我們定義了一個(gè)on事件openColumnConf,那么我們在其他頁面里引用組件ColumnConfModal時(shí),當(dāng)然需要觸發(fā)這個(gè)事件打開其彈窗了。

import { emit } from 'concent';
class Foo extends React.Component {
  openColumnConfModal = () => {
    //如果這個(gè)類是一個(gè)concent組件
    this.ctx.emit('openColumnConfModal', 3);
    //如果不是則可以調(diào)用頂層api emit
    emit('openColumnConfModal', 3);
  }
  render() {
    return (
      <div>
        <button onClick={this.openColumnConfModal}>配置可見字段</button>
        <Table />
          <ColumnConfModal />
      </div>
    );
  }
}

上述寫法里,如果有其他很多頁面都需要引入ColumnConfModal,都需要寫一個(gè)openColumnConfModal,我們可以把這個(gè)打開邏輯抽象到modalService里,專門用來打開各種彈窗,而避免在業(yè)務(wù)見到openColumnConfModal這個(gè)常量字符串

//code in service/modal.js
import { emit } from 'concent';
export function openColumnConfModal(tid) {
  emit('openColumnConfModal', tid);
}

現(xiàn)在可以這樣使用組件來觸發(fā)事件調(diào)用了

import * as modalService from 'service/modal';
class Foo extends React.Component {
  openColumnConfModal = () => {
    modalService.openColumnConfModal(6);
  }
  render() {
    return (
      <div>
        <button onClick={this.openColumnConfModal}>配置可見字段</button>
        <Table />
        <ColumnConfModal />
      </div>
    );
  }
}

結(jié)語

以上代碼在任何一個(gè)階段都是有效的,想要了解漸進(jìn)式重構(gòu)的在線demo可以點(diǎn)這里

由于本篇主題主要是介紹漸進(jìn)式重構(gòu)組件,所以其他特性諸如synccomputed$watch、高性能殺手锏renderKey等等內(nèi)容就不在這里展開講解了,更多關(guān)于concent重構(gòu)react的資料請關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

  • 無廢話快速上手React路由開發(fā)

    無廢話快速上手React路由開發(fā)

    本文以簡潔為目標(biāo),幫助快速上手react-router-dom默認(rèn)你接觸過路由相關(guān)的開發(fā),通過實(shí)例代碼講解的很詳細(xì),對React路由相關(guān)知識感興趣的朋友一起看看吧
    2021-05-05
  • React事件處理和表單的綁定詳解

    React事件處理和表單的綁定詳解

    這篇文章主要介紹了React事件處理和表單的綁定,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-08-08
  • React Native之prop-types進(jìn)行屬性確認(rèn)詳解

    React Native之prop-types進(jìn)行屬性確認(rèn)詳解

    本篇文章主要介紹了React Native之prop-types進(jìn)行屬性確認(rèn)詳解,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-12-12
  • 解決jest處理es模塊示例詳解

    解決jest處理es模塊示例詳解

    這篇文章主要為大家介紹了解決jest處理es模塊示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-02-02
  • React創(chuàng)建組件的三種方式及其區(qū)別是什么

    React創(chuàng)建組件的三種方式及其區(qū)別是什么

    在React中,創(chuàng)建組件的三種主要方式是函數(shù)式組件、類組件和使用React Hooks的函數(shù)式組件,本文就詳細(xì)的介紹一下如何使用,感興趣的可以了解一下
    2023-08-08
  • react實(shí)現(xiàn)每隔60s刷新一次接口的示例代碼

    react實(shí)現(xiàn)每隔60s刷新一次接口的示例代碼

    本文主要介紹了react實(shí)現(xiàn)每隔60s刷新一次接口的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-06-06
  • react中關(guān)于useCallback的用法

    react中關(guān)于useCallback的用法

    這篇文章主要介紹了react中關(guān)于useCallback的用法,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-06-06
  • 基于Webpack4和React hooks搭建項(xiàng)目的方法

    基于Webpack4和React hooks搭建項(xiàng)目的方法

    這篇文章主要介紹了基于Webpack4和React hooks搭建項(xiàng)目的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2019-02-02
  • react?echarts?tree樹圖搜索展開功能示例詳解

    react?echarts?tree樹圖搜索展開功能示例詳解

    這篇文章主要為大家介紹了react?echarts?tree樹圖搜索展開功能示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-01-01
  • react進(jìn)階教程之異常處理機(jī)制error?Boundaries

    react進(jìn)階教程之異常處理機(jī)制error?Boundaries

    在react中一旦出錯(cuò),如果每個(gè)組件去處理出錯(cuò)情況則比較麻煩,下面這篇文章主要給大家介紹了關(guān)于react進(jìn)階教程之異常處理機(jī)制error?Boundaries的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-08-08

最新評論