用 React Hooks 构建响应式和可复用的 UI 组件

2024-01-10 13:32:17







**React Hooks 简介** 

React Hooks 是 React 16.8 引入的新特性，它允许我们在函数组件中使用状态和生命周期函数。这使得函数组件更加强大和灵活，并且可以让我们编写更简洁、更易于维护的代码。

**React Hooks 的用法** 

React Hooks 的用法非常简单，只需要在函数组件中调用它们即可。例如，我们可以使用 `useState` Hook 来声明一个状态变量：

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

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

在这个示例中，我们使用了 useState Hook 来声明一个名为 count 的状态变量，并使用 setCount 函数来更新该状态变量的值。

使用 React Hooks 构建响应式和可复用的 UI 组件

React Hooks 可以用来构建响应式和可复用的 UI 组件。例如，我们可以使用 useEffect Hook 来监听状态变量的变化，并根据状态变量的变化更新组件的 UI：

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}