【ReactHooks 使用攻略】useState和useReducer的区别-阿里云开发者社区

【ReactHooks 使用攻略】useState和useReducer的区别

2023-10-07 151

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 一句话总结：useState用于简单的状态管理和局部状态更新，而useReducer用于复杂的状态逻辑和全局状态管理。

一句话总结：

useState用于简单的状态管理和局部状态更新，而useReducer用于复杂的状态逻辑和全局状态管理。

useState和useReducer是React中的两个不同的状态管理钩子。

示例代码

下面是它们的区别以及代码示例：

useState:

useState是React提供的基本状态管理钩子。
它通过返回一个包含状态值和更新状态值的数组来处理单个状态。
useState是基于当前状态的值进行更新的。
主要用于简单的状态管理和局部状态更新。

代码示例：

import React, { useState } from 'react';
function Counter() {
  const [count, setCount] = useState(0);
  const increment = () => {
    setCount(count + 1);
  };
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

useReducer:

useReducer是React提供的更高级的状态管理钩子。
它接受一个reducer函数和初始状态作为参数，并返回当前状态和一个dispatch函数来触发状态更新。
useReducer通过传入的reducer函数来更新状态，该函数接受当前状态和action作为参数，并返回新的状态。
主要用于管理复杂的状态逻辑和全局状态管理。

代码示例：

import React, { useReducer } from 'react';
const initialState = {
  count: 0,
};
function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error('Unknown action type');
  }
}
function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  const increment = () => {
    dispatch({ type: 'increment' });
  };
  const decrement = () => {
    dispatch({ type: 'decrement' });
  };
  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}