React useRudecer和useState用法？

最新推荐文章于 2024-12-11 14:04:37 发布

原创最新推荐文章于 2024-12-11 14:04:37 发布 · 485 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #前端 #reactjs

本文深入讲解React中的useState和useReducer钩子，通过实例演示如何管理简单的计数状态及复杂的引用类型状态，帮助读者理解不同场景下钩子的应用。

.函数组件没有自身的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'
            }
        )
        
    }