Redux學習之旅五 元件UI和業務邏輯的拆分

2021-10-10 11:47:49 字數 768 閱讀 9087

原先的todolist.js檔案中既包含了ui部分,也包含了業務邏輯操作。為了減小耦合度和提高開發效率,我們一般將ui和業務邏輯拆分開來。

將todolist中的ui部分轉移到乙個新的檔案todolistui.js中:

import react,  from 'react';

import from 'antd';

class todolistui extends component

}>

)}/>);}

}export default todolistui;

在todolist.js中引入todolistui:

import react,  from 'react';

import 'antd/dist/antd.css';

import todolistui from './todolistui';

import store from './store'; //'./store/index.js'

import from './store/actioncreaters';

class todolist extends component

render()

changeinputvalue(e)

storechange()

clickbtn()

deleteitem(index)}

export default todolist;

Redux學習之旅六 無狀態元件

無狀態元件只包含乙個函式。使用無狀態元件的原因是因為其沒有state,可以省略生命週期函式,沒有包含任何業務邏輯,效能比有狀態元件要高。能使用無狀態元件盡量使用無狀態元件。在之前我們建立的todolistui中只包含了ui部分,可以改造為無狀態元件,如下 import react from reac...

vue學習筆記(五) 元件通訊

關於vue父子元件通訊 github suerimn 如果元件是乙個單頁面,元件之間存在父子關係,資料傳遞就需要根據父子不同的地位使用不同的辦法。借助新建的electron vue專案自帶的兩個元件來說明。目錄結構如下 其中landingpage.vue是父元件,systeminformation....

小程式 五 元件使用

自定義元件使用 一 基本使用 1 新建檔名,我們新建cpn component 並將json 中component設定為true 2 在使用的pages上進行配置 3 使用元件 二 元件樣式與頁面樣式預設互不影響 這裡我們給元件和頁面設定相同class 屬性為red,但是他們都各自表現自己樣式,如果...