从入门到精通：30分钟搞定React Hooks

2023-09-19 10:06:34







## React Hooks简介

React Hooks是一组内置的函数，可让你在函数组件中使用state和生命周期函数。这使得你无需编写class组件，即可构建交互式且可重用的组件。

Hooks的引入是为了解决class组件的一些痛点，例如：

* class组件的写法冗长且难以维护。
* class组件中的this容易混淆。
* class组件的生命周期函数难以理解和使用。

Hooks的出现解决了这些问题，让React组件的编写变得更加简单、直观和易于维护。

## 核心Hooks

React Hooks主要包括以下几个核心Hooks：

* `useState`：用于管理组件的状态。
* `useEffect`：用于处理组件的生命周期事件。
* `useContext`：用于在组件之间共享数据。

## 使用Hooks

接下来，我们将通过一些示例代码来演示如何使用Hooks。

### 使用`useState`管理状态

```javascript
import React, { useState } from 'react';

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

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

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

export default MyComponent;

在这个示例中，我们使用useState来管理组件的状态。useState函数接受一个初始状态值作为参数，并返回一个数组，数组的第一个元素是当前状态值，第二个元素是一个函数，用于更新状态值。

使用`useEffect`处理生命周期事件

import React, { useEffect } from 'react';

const MyComponent = () => {
  useEffect(() => {
    console.log('组件已挂载');
  }, []);

  return (
    <div>
      <h1>MyComponent</h1>
    </div>
  );
};

export default MyComponent;

在这个示例中，我们使用useEffect来处理组件的挂载生命周期事件。useEffect函数接受两个参数，第一个参数是一个回调函数，回调函数将在组件挂载时执行，第二个参数是一个数组，数组中列出了依赖项。如果依赖项发生变化，回调函数将再次执行。

使用`useContext`在组件之间共享数据

import React, { useContext } from 'react';

const MyContext = React.createContext('default value');

const MyProvider = (props) => {
  const value = 'some value';
  return <MyContext.Provider value={value}>{props.children}</MyContext.Provider>;
};

const MyComponent = () => {
  const value = useContext(MyContext);

  return (
    <div>
      <h1>{value}</h1>
    </div>
  );
};

export default MyProvider;
export default MyComponent;