• Welcome to the world's largest Chinese hacker forum

    Welcome to the world's largest Chinese hacker forum, our forum registration is open! You can now register for technical communication with us, this is a free and open to the world of the BBS, we founded the purpose for the study of network security, please don't release business of black/grey, or on the BBS posts, to seek help hacker if violations, we will permanently frozen your IP and account, thank you for your cooperation. Hacker attack and defense cracking or network Security

    business please click here: Creation Security  From CNHACKTEAM

Recommended Posts

债务价值调整;《守望先锋》游戏角色名基于回家的和还原传奇的数据流方案,然后为了简化开发体验,今天就讲一下具体的使用

实现的效果:计算器的同步增减及异步修改数据

1.创建用户界面组件

返回(

差异

测试组件

选项:input ref={ input ref }默认值={ 0 }/

br/

差异变量:{count || 0}/div

button onClick={handleAdd}同步/按钮

button onClick={handleReduce}同步-/按钮

button onClick={handleAsync}异步/按钮

人力资源/

/div

/

)

2.创建型号(5个api)

常量测试模型={

命名空间: '测试模型',//命名空间,型号数据做隔离

state:{ //变量存储,尽量扁平化处理,不要嵌套层级多

计数:1,

},

减速器:{ //同回家的中的还原剂模块,以键/值定义减速器。用于处理同步操作,唯一可以修改状态的地方。由行为触发

添加(状态,{有效负载}) {

常量计数=状态.计数有效负载

返回{.州,count:count}

},

减少(状态,{有效负载}) {

常量计数=state.count -有效载荷

返回{.州,count:count}

},

},

效果:{ //以键/值格式定义效果。处理异步操作,不直接修改陈述。由

ace; color: rgba(71, 101, 130, 1); padding: 0.25rem 0.5rem; margin: 0; font-size: 0.85em; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px; white-space: normal'>action 触发,可以触发 action,可以和服务器交互... *changeAsync(_, {call,put}) { yield call(delay,500) yield put({type:'add',payload:2}) } }, 
   // 以 key/value 格式定义 subscription。subscription 是订阅,用于订阅一个数据源,然后根据需要 dispatch 相应的 action。在 app.start() 时被执行,数据源                    可以是当前的时间、服务器的 websocket 连接、keyboard 输入、geolocation 变化、history 路由变化等等。
    subscriptions: {   setup({ dispatch, history }, done) {   return history.listen((location) => {   if (   location.pathname === 'xxx' ) {   dispatch({type:'XXX',payload:XXX})   } }); }, },

  


   }

3.connect连接:引入connect模块

import {connect} from 'dva'
export default connect(({testModel})=>(
    {
        count:testModel.count,
    }
))(Index)

4.组件内部使用

 ① 获取dva存储的变量:组件自带dispact方法和转换后的变量

 const Index= (dispatch,state1,state2...)=>{

 }

 ② 组件内部修改数据通过dispatch方法

 dispatch({

  type:[namespace]/同步reducer或异步的effects名,

  payload:传入的参数

 })

5.完整代码

test.js

import React,{useRef,useState,useEffect} from 'react'
import {connect} from 'dva'
const ChildComp = (props) =>{
    const {userName,userAge} = props
    return <>   
        <p>ChildComp子页面获取数据</p>
        <div>子页面获取到的姓名:{userName}</div>
        <div>子页面获取的年龄:{userAge}</div>
    </>
}
const Index=({dispatch,count,userName,userAge})=> {
    const inputRef = useRef()
    useEffect(()=>{
        // console.log('count数据变化了')
        return () =>{
        }   
    },[count]) 
    const handleAdd = () =>{
        dispatch({type:'testModel/add',payload:Number(inputRef.current.value)})
    }
    const handleReduce = ()=>{
        dispatch({
            type:'testModel/reduce',
            payload:Number(inputRef.current.value)
        })
    }
    const handleAsync = ()=>{
        dispatch({type:'testModel/changeAsync',payload:Number(inputRef.current.value)})
    }
    return (
        <>
            <div>
                测试组件
                Option:<input ref={inputRef} defaultValue={0} />
                <br/>
                <div>变量:{count || 0}</div>
                <button onClick={handleAdd}>同步+</button>
                <button onClick={handleReduce}>同步-</button>
                <button onClick={handleAsync}>异步+</button>
                <hr/>
            </div>
        </>
    )
}
// const mapStateToProps= (state) =>{
//     return {
//         count:state.testModel.count,
//         userName:state.testModel.userName,
//         userAge: state.testModel.userAge
//     }
// }
export default connect(({testModel})=>(
    {
        count:testModel.count,
        userName:testModel.userName,
        userAge:testModel.userAge
    }
))(Index)

model

const delay = timeout => new Promise(resolve => setTimeout(resolve, timeout));
const TestModel={
    namespace:"testModel",
    state:{
        count:1,
        userName:'wang'
    },
    reducers:{
        add(state, { payload}) {
            const count = state.count + payload
            return {...state,count:count}
        },
        reduce(state,{payload}) {
            const count = state.count - payload
            return {...state,count:count}
        },
        changeUserName(state,{payload}) {
            return {...state,...payload}
        }
    },
    effects:{
        *changeAsync(_, {call,put}) {
            yield call(delay,500)
            yield put({type:'add',payload:2})
        }
    }
}
export default TestModel

 界面效果:

 efd04tvfymv3801.png

 

 

 

 

  

return (
        <>
            <div>
                测试组件
                Option:<input ref={inputRef} defaultValue={0} />
                <br/>
                <div>变量:{count || 0}</div>
                <button onClick={handleAdd}>同步+</button>
                <button onClick={handleReduce}>同步-</button>
                <button onClick={handleAsync}>异步+</button>
                <hr/>
            </div>
        </>
    )
subscriptions: { setup({ dispatch, history }, done) { return history.listen((location) => { if ( location.pathname === '/app/admin/weak/vuln' || location.pathname === '/app/admin/weak/vuln/hostadd' || location.pathname.indexOf('/app/admin/weak/vuln/host/') !== -1 ) { dispatch({ type: 'init', payload: { vulnInstanceType: 'serviceManage', }, }); } if ( location.pathname === '/app/admin/weak/vuln/website' || location.pathname === '/app/admin/weak/vuln/websiteadd' || location.pathname.indexOf('/app/admin/weak/vuln/website') !== -1 ) { dispatch({ type: 'init', payload: { vulnInstanceType: 'webserviceManage', }, }); } }); }, },
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now