React Hooks的基本用法及其优缺点

2023-12-04 00:01:42

前言

在Hooks没有出现之前，函数组件基本只做展示功能，涉及到状态管理，我们需要用到class组件或者数据管理框架（redux/dva/mobx）; hooks组件趋向函数化编程。更简单，组件颗粒度更小，更容易复用，并且有更高的性能。

Hooks的基本用法

Hooks是一种新的React API，它允许你在函数组件中使用状态和生命周期方法。Hooks包括useState、useEffect、useContext、useReducer等。

useState

useState是用于管理状态的Hook。它接受一个初始状态值作为参数，并返回一个包含当前状态值和一个更新状态的函数的数组。

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

useEffect

useEffect用于处理副作用，例如在组件挂载或卸载时执行某些操作。它接受一个函数作为参数，该函数将在组件挂载后或卸载前执行。

useEffect(() => {
  console.log('组件挂载了');

  return () => {
    console.log('组件卸载了');
  };
});

useContext

useContext用于在组件之间共享数据。它接受一个Context对象作为参数，并返回Context对象的当前值。

const ThemeContext = React.createContext('light');

function MyComponent() {
  const theme = useContext(ThemeContext);

  return (
    <div className={`theme-${theme}`}>
      Hello world!
    </div>
  );
}

useReducer

useReducer用于管理复杂的状态。它接受一个reducer函数和一个初始状态值作为参数，并返回一个包含当前状态值和一个更新状态的函数的数组。

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return state + 1;
    case 'decrement':
      return state - 1;
    default:
      return state;
  }
};

const [count, dispatch] = useReducer(reducer, 0);

Hooks的优缺点

Hooks相对于传统类组件有以下优势：