React useRudecer和useState用法？

.函数组件没有自身的state 所有通过hook引入外部的组件进来 所有的hook都要用useState来引用.

import { useState } from "react";
import { useReducer } from "react";

1.先了解useState

a. useState的状态就是定义的初始 值 setCount自定义 就是操作状态的方法 useState返回的是一个数组

b.useState 单个数据，不是复杂的数据结构

import Show from "./show";
import IButton from "./iButton";

export default () => {

const [count, setCount] = useState(0);

  const add = () => setCount(count + 1);
  const minus = () => setCount(count - 1);

return (
    <div>
      <Show count={count}></Show>
      <IButton name="+" onClick={add}></IButton>
      <IButton name="-"  onClick={miuns}></IButton>
    </div>
  );
}


//./iButton.js下面的引用组件
export default ({name='按钮',onClick=()=>{}}) => {
    return <div>
        <button onClick={onClick}>{name}</button>
    </div>
}
//./Show.js下面的引用组件

export default ({count}) => {
    return <div>
     <h1>{count}</h1>
    </div>
}

 但如果想要操作引用类型的数据呢？

如果使用uesReduer在某些场景下，uesReduer会比 useState 更适用，例如 state 逻辑较复杂且包含多个子值，或者下一个 state 依赖于之前的 state 等。并且，使用 uesReduer还能给那些会触发深更新的组件做性能优化，因为你可以向子组件传递 dispatch 而不是回调函数 。

   2.useReducer 用来定义复杂的数据里面有一个reducer 是处理器  ，状态，关于状态的操作逻辑，封装

 useReducer有两个参数第一个参数是初始状态值 ，reducer（ dispatch） 处理函数

 useReduer的返回值是一个数组[当前的状态值，触发函数]

 dispatch函数是用来触发reducer的

 reducer 他可以接收两个参数 一个是当前的state 第二个参数是action对象 ，action 对象是用来描述当前方生的行为，通用type的属性.来

 const [count, dispatch] = useReducer((state,action) => 
        // console.log('run', state,action);
       switch (action.type) {
        case 'ADD':
             return state + 1
        case 'MIUNS':
              return state - 1
         default:
             return state
      }
          reducers[action.type](state)
    ,0)

const add = () => {
        dispatch(
            {
                type:'ADD'
            }
        )
        
    }
    const miuns = () => {
        dispatch(
            {
                type:'MIUNS'
            }
        )
        
    }