一、class
在使用类的时候，我们会在state中建立多个key值，来存储表单的输入值：
如：
state={
name: "",
idType: "",
personId: "",
tel: "",
mobile: "",
email: "",
dwsx: "",
province: "",
city: "",
serviceType: "",
status: "",
...
}
当然，可能会有很多，可以写一个公共的方法，来改变state中的值：
// 输入框 输入
inputName = (type, e) => {
// 清空 input 和下拉框单选
if (!e) {
let tempData = {
}
tempData[type] = ''
this.setState(tempData)
return false
}
let tempData = {
}
if (e.target) {
tempData[type] = e.target.value
} else {
tempData[type] = e
}
this.setState(tempData)
}
第一个值是state中的属性key，就是我们表单绑定的值。第二个值是事件对象，我们通过事件对象来获取onChange事件改编的值。
使用：
<Input placeholder="请输入name" value={
name} title='name' onChange={
(e) => this.inputName('name', e.target.value)} />
这个时候我们就实现了onChange事件的复用，没有必要给每一个表单都加一个事件对应改编一个state中的key值。上面的赋值方法（inputName）使用于任何表单元素（text、select、checkbok等等）。
二、函数式 HOOKS
一般如果只有少量状态需要更新，我们直接使用useState即可，但是如果有很多表单元素，我们写useState都会写烦，所以我们使用useState的代替品：useReducer，主要用于组件中的状态的更新。
同样的我们要知道这个怎么用：
使用：
在react中引入useReducer这个hook。
import React, {
useReducer} from 'react'
第一个参数为我们的action函数，第二个参数为我们的reducer的初始state；
let initialState = {
name: "",
idType: "",
personId: "",
tel: "",
mobile: "",
email: "",
dwsx: "",
province: "",
city: "",
serviceType: "",
status: "",
}
const reducerFun = (state, init) => {
let obj = {
}
obj[init.key] = init.value
switch (init.type) {
case "changeValue":
return {
...state, ...obj };
case "getDetails":
return {
...state, ...init.obj }
case "resetValue":
return initialState;
default:
return state
}
}
changeValue为改变单一state的标识
getDetails可以用在返显的时候，直接多传入一个obj即可；
resetValue用于重置默认值的标识；
创建reducer：
const [state, dispatch] = useReducer(reducerFun, initialState);
let {
name}=state;
state为我们的状态对象，里面包含了initialState中的所有键值对；
dispatch为改变对象state的触发函数，触发相应的action即可动态改变state的状态，hook会自动的帮我们render。
页面：
<RSInput title="节点名称" placeholder="请输入" value={
name} onChange={
(e) => {
inputName('name', e) }} />
inputName函数主要用于更新reducer的状态：
// 输入框输入
const inputName = (key, e) => {
e.persist && e.persist();
if (e.target) {
dispatch({
type: 'changeValue', key, value: e.target.value })
} else {
dispatch({
type: 'changeValue', key, value: e })
}
}
当然，当元素少的时候我们试试使用useState毕竟方便。useReducer只是一种解决方案，我们还是可以全使用useState.
其他文章
1.hooks实现toDoList
2.hooks实现左添右减
3.React实现添加多行输入框(点击一行增加一行)
4.React页面跳转取消上一个页面的所有请求
5.React配合axios请求拦截校验session，403跳转至登陆页面
6.Hooks使用createStore、Provider、useSelector、useDispatch实现connect功能
7.Hooks使用useReducer、createContext 、useContext实现模块数据共享，类似全局状态管理但不推荐做全局管理
六卿
见贤思齐焉，见不贤内自省