React Hook 运行原理揭秘：深入浅出，带你领略 React Hook 的运作之道

前端

2023-09-04 11:45:50

React Hook 是 React 16.8 版本引入的一种新特性，它允许你在函数组件中使用状态和生命周期方法。这使得函数组件更加强大，也让 React 代码更加简洁。

React Hook 的运行原理是基于闭包。闭包是指一个函数及其作用域内的变量的集合。当一个函数被调用时，它会创建一个新的执行上下文，该执行上下文包含该函数的局部变量和参数，以及对外部变量的引用。

当一个 React Hook 被调用时，它会创建一个新的闭包。该闭包包含该 Hook 的状态和生命周期方法，以及对组件状态的引用。当组件重新渲染时，该闭包会被重新创建。

这种运行机制允许 React Hook 在函数组件中使用状态和生命周期方法。

useState

useState 是一个 React Hook，它允许你在函数组件中创建和管理状态。

useState 的用法非常简单，你只需要调用它并传入一个初始状态值。它会返回一个数组，数组的第一个元素是状态的当前值，数组的第二个元素是一个函数，用于更新状态。

例如，以下代码使用 useState 创建了一个名为 count 的状态：

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

你可以在组件的任何地方使用 count 和 setCount。例如，以下代码使用 count 和 setCount 来实现一个计数器：

const handleClick = () => {
  setCount(count + 1);
};

return (
  <div>
    <p>Count: {count}</p>
    <button onClick={handleClick}>Increment</button>
  </div>
);

useEffect

useEffect 是一个 React Hook，它允许你在函数组件中执行副作用。

副作用是指任何会影响组件外部状态的操作，例如：

更改 DOM
发起网络请求
设置定时器

useEffect 的用法也非常简单，你只需要调用它并传入一个回调函数。该回调函数会在组件挂载、更新和卸载时被调用。

例如，以下代码使用 useEffect 来在组件挂载时设置一个定时器：

useEffect(() => {
  const timer = setTimeout(() => {
    console.log('Hello, world!');
  }, 1000);

  return () => {
    clearTimeout(timer);
  };
});

useReducer

useReducer 是一个 React Hook，它允许你在函数组件中使用 Redux 的 reducer。

reducer 是一个纯函数，它接收两个参数：当前状态和一个动作。reducer 返回一个新的状态。

useReducer 的用法也非常简单，你只需要调用它并传入一个 reducer 和一个初始状态值。它会返回一个数组，数组的第一个元素是状态的当前值，数组的第二个元素是一个函数，用于分发动作。

例如，以下代码使用 useReducer 来实现一个计数器：

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);

你可以在组件的任何地方使用 count 和 dispatch。例如，以下代码使用 count 和 dispatch 来实现一个计数器：

const handleClick = (type) => {
  dispatch({ type });
};

return (
  <div>
    <p>Count: {count}</p>
    <button onClick={() => handleClick('INCREMENT')}>Increment</button>
    <button onClick={() => handleClick('DECREMENT')}>Decrement</button>
  </div>
);