https://github.com/fangkyi03/fastdva-core

目标是是打造一个性能更加好的框架
https://github.com/fangkyi03/fastdva-core

Last synced: about 1 month ago
JSON representation

目标是是打造一个性能更加好的框架

• Host: GitHub
• URL: https://github.com/fangkyi03/fastdva-core
• Owner: fangkyi03
• Created: 2018-03-15T19:54:58.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2019-11-16T14:55:30.000Z (almost 5 years ago)
• Last Synced: 2024-10-06T02:48:54.520Z (about 1 month ago)
• Language: JavaScript
• Homepage:
• Size: 223 KB
• Stars: 74
• Watchers: 2
• Forks: 8
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
## 初始化部分

> 安装

> npm i 

> 调试

> npm run start



      import {createStore,Provider} from './package/fastkit-dva'

      import appModels from './models/app'

      const app = createStore({})

        app.model(appModels)

        const AppView = () => {

            return (

                

                    

                

            )

        }



这里是初始化的部分代码 之后会与dva尽可能的保持一致 在后续版本会进行修改

##connect部分



    export default connect(['app'],({app})=>({...app}))(App)



这里其余字段都与react-redux保持一致 但是首字段加了一个modelList

这个字段的作用就是为了能够更好的进行监听 比如上面的app

也就是说 我只会监听app这个model中的state发生的变化 其他的reduce变化 不会触发这个页面的监听回调

##connect初始化监听部分



          /**

          * 初始化监听

          * 

          * @memberof Connect

          */

          initSubscribe = () =>{

              modelList.forEach((e)=>{

                  this.timestamp.push(Date.parse(new Date()))

                  this.store.callBackList[e][String(this.timestamp.slice(-1)[0])] = this.onStateChange

              })

          }



在这里会直接对指定modelName去添加一个callBack 并且名字使用时间戳的方式来实现 避免出现重复命名

这个时间戳将会在组件被销毁的时候被使用到

##connect组件销毁



        /**

         * 如果页面被销毁则清除掉原来的监听事件 减少计算

         * 

         * @memberof Connect

         */

        componentWillUnmount = () => {

            modelList.forEach((e)=>{

                this.timestamp.forEach((el)=>{

                    if (this.store.callBackList[e][el]){

                        delete this.store.callBackList[e][el]

                    }

                })

            })

        };



当组件被销毁的时候 会从当前modelName的callBack回调中去删除属于当前页面的回调 避免下次在触发dispatch的时候 重新参与运算

##model部分



    import test from '../utils/test'

    export default {

        namespace : 'app',

        state : {

            num: 0

        },

        reducers : {

            add(state, {payload}) {

                return ({...state,num:state.num + 1})

            },

            reduce(state,{payload}){

                return ({...state,num:state.num - 1})

            },

            reset(state,{payload}){

                return ({...state,num:0})

            }

        },

        effects : {

            *clear({payload},{select,put,take,call}){

                yield call(test,11111)

            }

        }

    }



这里的使用方式跟dva保持了一致 因为是直接使用的saga来进行的实现 所以saga的一些功能与属性都可以直接的进行使用 不会有影响

现在这个项目还不够成熟 目前的这个版本删除了中间件 下一个版本将会用redux中间件的方式去将dispatch进行合并 但是只会支持saga与router这两个 尽可能去减少项目中不必要的reduce从来提升性能吧 真的是有得必有失啊