一、将flux的组件拆分成无状态组件------->UI组件 和 容器组件
这样会加快页面的加载和渲染的速度
增删效果未拆分之前
App.js
import React, { Component,Fragment } from 'react';
import Input from './components/input'
import List from './components/list'
import dispatcher from './store/dispatcher'
console.log(dispatcher)
class App extends Component {
render() {
return (
<Fragment>
<Input/>
<List/>
</Fragment>
);
}
}
export default App;
components/input.js
import React,{Component} from 'react'
import store from '../store'
import dispatcher from '../store/dispatcher'
console.log(dispatcher)
class Input extends Component{
constructor(){
super();
this.state=store.getdata()
store.handleUpdate(this.handleUpdate.bind(this))
}
render(){
let {inputVal} = this.state
return(
<div>
<input type="text" value={inputVal} onChange={this.handleChange.bind(this)}/>
<button onClick={this.handleAdd.bind(this)}>添加</button>
</div>
)
}
handleChange(e){
let val = e.target.value
let action = {
type:"INPUT_CHANGE",
value : val
}
dispatcher.dispatch(action)
}
handleAdd(){
let action = {
type:"ADD_NUM"
}
dispatcher.dispatch(action)
}
handleUpdate(){
this.setState(store.getdata())
}
}
export default Input
components/list.js
import React,{Component} from 'react'
import store from '../store'
import dispatcher from '../store/dispatcher'
class List extends Component{
constructor(){
super();
this.state= store.getdata()
store.handleUpdate(this.handleUpdate.bind(this))
}
render(){
let {todoList} = this.state
return(
<div>
<ul>
{
todoList.map((item,index)=>{
return <li key={index}>{item}
<button onClick={this.handleDel.bind(this)}>删除</button>
</li>
})
}
</ul>
</div>
)
}
handleDel(index){
let action = {
type:"DEl_List",
value:index
}
dispatcher.dispatch(action)
}
handleUpdate(){
this.setState(store.getdata())
}
}
export default List
store/dispatcher.js
import {Dispatcher} from 'flux'
import store from './index'
const dispatcher = new Dispatcher();
dispatcher.register((action)=>{
switch(action.type){
case "INPUT_CHANGE" :
store.handleChange(action.value);
break;
case "ADD_NUM" :
store.AddItem();
break;
case "DEl_List":
store.DelList(action.value);
break;
}
})
export default dispatcher
store/index.js
const EventEmitter = require("events");
const store = Object.assign(EventEmitter.prototype,{
state:{
inputVal:'',
todoList:[]
},
getdata(){
return this.state;
},
handleChange(val){
this.state.inputVal = val;
this.emit("update")
},
handleUpdate(cb){
this.on("update",cb)
},
AddItem(){
this.state.todoList.push(this.state.inputVal)
this.state.inputVal=""
this.emit("update")
},
DelList(index){
this.state.todoList.splice(index,1)
this.emit("update")
}
})
export default store
拆分之后
component/input.js
import React,{Component} from 'react'
import store from '../store'
import dispatcher from '../store/dispatcher'
import InputUI from './inputUI'
import {INPUT_CHANGE,ADD_NUM} from '../action/actionCreate'
console.log(dispatcher)
class Input extends Component{
constructor(){
super();
this.state=store.getdata()
store.handleUpdate(this.handleUpdate.bind(this))
}
render(){
let {inputVal} = this.state
return(
<InputUI inputval={inputVal} handleChange={this.handleChange.bind(this)} handleAdd={this.handleAdd.bind(this)}/>
)
}
handleChange(e){
let val = e.target.value
dispatcher.dispatch(INPUT_CHANGE(val))
}
handleAdd(){
dispatcher.dispatch(ADD_NUM())
}
handleUpdate(){
this.setState(store.getdata())
}
}
export default Input
component/inputUI.js
import React,{Component} from "react"
class InputUI extends Component{
render(){
let {inputVal} = this.props
return(
<div>
<input type="text" value={inputVal} onChange={this.props.handleChange}/> //触发外部传过来的方法，如果不需要传参就不用写bind
<button onClick={this.props.handleAdd}>添加</button>
</div>
)
}
}
export default InputUI
component/list.js
import React,{Component} from 'react'
import store from '../store'
import dispatcher from '../store/dispatcher'
import ListUI from './listUI'
import {DEl_List} from "../action/actionCreate";
class List extends Component{
constructor(){
super();
this.state= store.getdata()
store.handleUpdate(this.handleUpdate.bind(this))
}
render(){
let {todoList} = this.state
return(
<ListUI todoList={todoList} handleDel={this.handleDel}/>
)
}
handleDel(index){
dispatcher.dispatch(DEl_List(index))
}
handleUpdate(){
this.setState(store.getdata())
}
}
export default List
component/listUI.js
import React,{Component} from 'react'
class ListUI extends Component{
render(){
let {todoList} = this.props
return(
<div>
<ul>
{
todoList.map((item,index)=>{
return <li key={index}>{item}
<button onClick={this.props.handleDel.bind(this,index)}>删除</button> {/*需要传参的时候就加bind进行传参*/}
</li>
})
}
</ul>
</div>
)
}
}
export default ListUI
在src中新建一个action文件夹
action/actionCreate.js
import actionType from './actionType'
export const INPUT_CHANGE = (val)=>({
type:actionType.input_Change,
value:val
})
export const ADD_NUM = ()=>({
type:actionType.add_num
})
export const DEl_List = (index)=>({
type:actionType.del_list,
value:index
})
action/actionType.js
const input_change = "INPUT_CHANGE"
const add_num = "ADD_NUM"
const del_list = "DEl_List"
export default{
input_change,
add_num,
del_list
}
dispatcher.js
import {Dispatcher} from 'flux'
import store from './index'
import actionType from '../action/actionType'
const dispatcher = new Dispatcher();
dispatcher.register((action)=>{
switch(action.type){
case actionType.input_Change :
store.handleChange(action.value);
break;
case actionType.add_num :
store.AddItem();
break;
case actionType.del_list:
store.DelList(action.value);
break;
}
})
export default dispatcher