赞
踩
现在已经有了antd of react
流行的开源React UI组件库
material-ui(国外)
ant-design(国内蚂蚁金服)
3. 官网: https://ant.design/index-cn
4. Github: https://github.com/ant-design/ant-design/
安装antd
npm i antd --save
使用antd
需要导入antd包和antd的css样式
import React, { Component } from 'react' import { Button } from 'antd' import 'antd/dist/antd.css' export default class App extends Component { render () { return ( <div> app...<br/> <button>点我</button><br/> <Button type="primary">Primary Button</Button> </div> ) } }
antDesign(antd):蚂蚁金服
elementUI:饿了么
wantUI:有赞团队
1、action
2、 reducer
4. 用于初始化状态、加工状态。
5. 加工时,根据旧的state和action, 产生新的state的纯函数。
3、store
1) import {createStore} from 'redux'
2) import reducer from './reducers'
3) const store = createStore(reducer)
import React, { Component } from 'react' class Count extends Component { state={ count:0 } //加法 increament=()=>{ //函数体 const {value}=this.selectNumber const {count}=this.state this.setState({count:count+value*1}) } //减法 decreament=()=>{ //函数体 const {value}=this.selectNumber const {count}=this.state this.setState({count:count-value*1}) } //基数在家 increamentIfOdd=()=>{ //函数体 const {value}=this.selectNumber const {count}=this.state if (count%2===1){ this.setState({count:count+value*1}) } } increamentAsync=()=>{ //函数体 const {value}=this.selectNumber const {count}=this.state setTimeout(()=>{ this.setState({count:count+value*1}) },500) } render () { return ( <div> <h1>当前求和为:{this.state.count}</h1> <select ref={currentNode=>this.selectNumber=currentNode}> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <button onClick={this.increament}>+</button> <button onClick={this.decreament}>-</button> <button onClick={this.increamentIfOdd}>当前求和我技术再加</button> <button onClick={this.increamentAsync}>异步+</button> </div> ) } } export default Count
安装redux
npm i redux --save
1、创建redux目录下的两个js文件,store.js和count_reducer.js
2、store.js
/*
该文件专门用于暴露一个store对象,整个应用只有一个store对象
*/
//引入createStroe专门创建redux的核心部件
import {createStore} from 'redux'
//引入为Count服务的reducer
import countReducer from './count_reduce'
//暴露store
export default createStore(countReducer)
3、count_reducer.js
/* 该文件用于创建一个为count组件服务的reducer,reducer本质是一个函数 reducer函数会接到两个参数,1,之前的状态prestate,2,动作对象action */ const initSate=0 //给preState设置了个默认值为0 function countReducer (preState=initSate,action) { //从action对象中获取type和data const {type,data}=action //根据type决定如何加工数据 switch (type) { case 'increment': return preState+data case 'decrement': return preState-data default: return preState } } export default countReducer
4、上例的count/index.js
import React, { Component } from 'react' //引入store中保存的状态 import store from '../../redux/store' class Count extends Component { //组件挂载后做的事 componentDidMount () { //检测redux中状态的变化,只要变化就调用render store.subscribe(()=>{ //借助setState来render页面组件 this.setState({}) }) } //加法 increament=()=>{ //函数体 const {value}=this.selectNumber store.dispatch({type:'increment',data:value*1}) } //减法 decreament=()=>{ //函数体 const {value}=this.selectNumber store.dispatch({type:'decrement',data:value*1}) } //奇数在加 increamentIfOdd=()=>{ //函数体 const {value}=this.selectNumber const count=store.getState() if (count % 2 ===1){ store.dispatch({type:'increment',data:value*1}) } } increamentAsync=()=>{ //函数体 const {value}=this.selectNumber setTimeout(()=>{ store.dispatch({type:'increment',data:value*1}) },500) } render () { return ( <div> <h1>当前求和为:{store.getState()}</h1> <select ref={currentNode=>this.selectNumber=currentNode}> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <button onClick={this.increament}>+</button> <button onClick={this.decreament}>-</button> <button onClick={this.increamentIfOdd}>当前求和我技术再加</button> <button onClick={this.increamentAsync}>异步+</button> </div> ) } } export default Count
由于store.subscribe刷了有限组件,不如直接在app的index.js里直接刷新渲染的dom
因此修改count/index.js如下
5、上例的count/index.js
import React, { Component } from 'react' //引入store中保存的状态 import store from '../../redux/store' class Count extends Component { //加法 increament=()=>{ //函数体 const {value}=this.selectNumber store.dispatch({type:'increment',data:value*1}) } //减法 decreament=()=>{ //函数体 const {value}=this.selectNumber store.dispatch({type:'decrement',data:value*1}) } //奇数在加 increamentIfOdd=()=>{ //函数体 const {value}=this.selectNumber const count=store.getState() if (count % 2 ===1){ store.dispatch({type:'increment',data:value*1}) } } increamentAsync=()=>{ //函数体 const {value}=this.selectNumber setTimeout(()=>{ store.dispatch({type:'increment',data:value*1}) },500) } render () { return ( <div> <h1>当前求和为:{store.getState()}</h1> <select ref={currentNode=>this.selectNumber=currentNode}> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <button onClick={this.increament}>+</button> <button onClick={this.decreament}>-</button> <button onClick={this.increamentIfOdd}>当前求和我技术再加</button> <button onClick={this.increamentAsync}>异步+</button> </div> ) } } export default Count
5、app的index.js
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import store from './redux/store' ReactDOM.render( <App />, document.getElementById('root') ); store.subscribe(()=>{ ReactDOM.render( <App />, document.getElementById('root') ) })
1. createstore()
作用:创建包含指定reducer的store对象
2. store对象
3. 核心方法:
4. 具体编码:
1、创建count_action.js和维护常量的constant.js
2、常量维护constant.js
/*
该模块用于定义action对象中type类型的常量值
*/
export const INCREMENT='increment'
export const DECREMENT='decrement'
3、count_action.js
/* 该文件专门为Count组件生成action对象 */ import {INCREMENT,DECREMENT} from './constant' function createIncreatmentAciton (data) { return {type:INCREMENT,data:data} } function createDecreatmentAciton (data) { return {type:DECREMENT,data:data} } export { createIncreatmentAciton, createDecreatmentAciton }
4、store.js
/*
该文件专门用于暴露一个store对象,整个应用只有一个store对象
*/
//引入createStroe专门创建redux的核心部件
import {createStore} from 'redux'
//引入为Count服务的reducer
import countReducer from './count_reduce'
//暴露store
export default createStore(countReducer)
5、count_reducer.js
/* 该文件用于创建一个为count组件服务的reducer,reducer本质是一个函数 reducer函数会接到两个参数,1,之前的状态prestate,2,动作对象action */ import {INCREMENT,DECREMENT} from './constant' const initSate=0 //给preState设置了个默认值为0 function countReducer (preState=initSate,action) { //从action对象中获取type和data const {type,data}=action //根据type决定如何加工数据 switch (type) { case INCREMENT: return preState+data case DECREMENT: return preState-data default: return preState } } export default countReducer
6、count/index.js
import React, { Component } from 'react' //引入store中保存的状态 import store from '../../redux/store' //引入actionCreator,专门用于创建action对象 import {createDecreatmentAciton,createIncreatmentAciton} from '../../redux/count_action' class Count extends Component { //组件挂载后做的事 // componentDidMount () { // //检测redux中状态的变化,只要变化就调用render // store.subscribe(()=>{ // //借助setState来render页面组件 // this.setState({}) // }) // } //加法 increament=()=>{ //函数体 const {value}=this.selectNumber store.dispatch(createIncreatmentAciton(value*1)) } //减法 decreament=()=>{ //函数体 const {value}=this.selectNumber store.dispatch(createDecreatmentAciton(value*1)) } //奇数在加 increamentIfOdd=()=>{ //函数体 const {value}=this.selectNumber const count=store.getState() if (count % 2 ===1){ store.dispatch(createIncreatmentAciton(value*1)) } } increamentAsync=()=>{ //函数体 const {value}=this.selectNumber setTimeout(()=>{ store.dispatch(createIncreatmentAciton(value*1)) },500) } render () { return ( <div> <h1>当前求和为:{store.getState()}</h1> <select ref={currentNode=>this.selectNumber=currentNode}> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <button onClick={this.increament}>+</button> <button onClick={this.decreament}>-</button> <button onClick={this.increamentIfOdd}>当前求和我技术再加</button> <button onClick={this.increamentAsync}>异步+</button> </div> ) } } export default Count
7、app/index.js
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import store from './redux/store' ReactDOM.render( <App />, document.getElementById('root') ); store.subscribe(()=>{ ReactDOM.render( <App />, document.getElementById('root') ) })
8、app.js
import React, { Component } from 'react'
import Count from './component/Count'
export default class App extends Component {
render () {
return (
<div>
<Count/>
</div>
)
}
}
异步action需要action里的函数返回的事一个函数,而不是一个对象,这个函数里包含了异步处理代码
function createDecreatmentAsyncAciton (data,time) {
//异步action需要返回一个函数
return ()=>{
setTimeout(()=>{
//通知redux来处理data
// store.dispatch({type:INCREMENT,data:data})
store.dispatch(createIncreatmentAciton(data))
},time)
}
}
由于store只接收object对象,而不接受函数,所以需要一个中间件来处理返回的函数,因此需要安装一个中间件redux-thunk
npm i redux-thunk --save
上例需要做如下修改:
1、count_action.js
/* 该文件专门为Count组件生成action对象 */ import {INCREMENT,DECREMENT} from './constant' function createIncreatmentAciton (data) { return {type:INCREMENT,data:data} } function createDecreatmentAciton (data) { return {type:DECREMENT,data:data} } function createDecreatmentAsyncAciton (data,time) { //异步action需要返回一个函数 //异步action中一般都会调用同步action,异步action不是必须要用的 return (dispatch)=>{ setTimeout(()=>{ //通知redux来处理data // store.dispatch({type:INCREMENT,data:data}) dispatch(createIncreatmentAciton(data)) },time) } } export { createIncreatmentAciton, createDecreatmentAciton, createDecreatmentAsyncAciton }
2、store.js
/*
该文件专门用于暴露一个store对象,整个应用只有一个store对象
*/
//引入createStroe专门创建redux的核心部件
import {createStore,applyMiddleware} from 'redux'
//引入为Count服务的reducer
import countReducer from './count_reduce'
//引入redux-thunk用于支持异步action
import thunk from 'redux-thunk'
//暴露store
export default createStore(countReducer,applyMiddleware(thunk))
3、count/index.js
import React, { Component } from 'react' //引入store中保存的状态 import store from '../../redux/store' //引入actionCreator,专门用于创建action对象 import { createDecreatmentAciton, createIncreatmentAciton, createDecreatmentAsyncAciton } from '../../redux/count_action' class Count extends Component { //组件挂载后做的事 // componentDidMount () { // //检测redux中状态的变化,只要变化就调用render // store.subscribe(()=>{ // //借助setState来render页面组件 // this.setState({}) // }) // } //加法 increament=()=>{ //函数体 const {value}=this.selectNumber store.dispatch(createIncreatmentAciton(value*1)) } //减法 decreament=()=>{ //函数体 const {value}=this.selectNumber store.dispatch(createDecreatmentAciton(value*1)) } //奇数在加 increamentIfOdd=()=>{ //函数体 const {value}=this.selectNumber const count=store.getState() if (count % 2 ===1){ store.dispatch(createIncreatmentAciton(value*1)) } } increamentAsync=()=>{ //函数体 const {value}=this.selectNumber store.dispatch(createDecreatmentAsyncAciton(value*1,500)) } render () { return ( <div> <h1>当前求和为:{store.getState()}</h1> <select ref={currentNode=>this.selectNumber=currentNode}> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <button onClick={this.increament}>+</button> <button onClick={this.decreament}>-</button> <button onClick={this.increamentIfOdd}>当前求和我技术再加</button> <button onClick={this.increamentAsync}>异步+</button> </div> ) } } export default Count
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。