React-状态管理useState 与 reducer

useState分散逻辑 vs reducer 聚合逻辑

useState

React 的一个Hook，再函数组件中管理组件的状态，并在状态更新时，重新渲染组件

• 缺点： 当有多个状态时，需要写多个，维护困难

reducer

• 先定义好reducer，就是把要操作的行为定义好，之后使用useReducer
• 示例

  const reducer = (state,action) => {
  	switch(state, type) { // 这里拿到state
  		case 'Add': // 对state进行添加操作
  			const id = state.length +1
  			return [...state, {id:id, title: action.payload, show: false}]
  		case 'Delete':
  			return state.filter(task => task.id !== action.payload)
  		default: 
  			return state
  	}
  }

• 使用useReducer来调用reducer的操作和初始化state
• 示例：

  const [state, dispatch] = useReducer(reducer, [
  	{id:1, title:"第一条",show: false},
  	{id:2, title:"第二条",show: false},
  ])

• 使用和调取方法
  • state 就是数据，也是usestate里的值，dispatch就相当于setState
  • 调用方法：dispatch({type:’Delete’, payload: id}) // type传要执行的操作，payload传在该事件中要改变什么，在reducer中要定义
• 如果有生成初始值的函数，为避免性能浪费，可以把函数也一起传进useReducer

  // 如果createState不能计算除初始值，需要定义一个默认，如果可以直接传null
  const [state, dispatch] = useReducer(reducer, null ,createInitState)