优化useState使用

useBatchState

原因：传统的useState在state数量太多时，使用起来有一些不便之处，且代码量大不够美观

• 传统方式：

	const ProductList: React.FC = () => {
  	    let [visible, setVisible] = useState<boolean>(false);
	    let [pageSize, setPageSize] = useState<number|undefined>(10);
	    let [current, setCurrent] = useState<number|undefined>(1)
       .....
     }

可以看到，即使只有三个变量已经很麻烦了

• 使用useBatchState
  • useBatchState源码

	function useBatchState<T>(initState: T) {
	  const [state, setState_] = useState<T>(initState)
	  const setState = (newState: Partial<T>) => {
	    setState_({
	      ...state,
	      ...newState,
	    })
	  }
	  return {
	    state,
	    setState,
	  }
	}
	
export { useBatchState }

• 使用

interface IState {
  visible: boolean
  pageSize: number | undefined
  current: number
}
const ProductList: React.SFC<IProps> = () => {
  let { state, setState } = useBatchState<IState>({
    visible: false,
    pageSize: 10,
    current: 1,
  })
....
// 使用时
const { visible, pageSize, current } = state
// 修改时
setState({
    current: 1,
  })

} 

这样就能在FC和SFC中如同class一样使用state了，并且代码量会减少很多，看起来美观