React hooks 从入门到实战

2024-02-08 00:57:34

React hooks 入门

React hooks 是一种新的 API，它允许我们在函数组件中使用 state 和生命周期方法。这使得我们可以编写更简洁、更易维护的 React 组件。

要使用 React hooks，我们需要先导入它们。我们可以使用以下代码来导入 hooks：

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

useState hook

useState hook 可以让我们在函数组件中使用 state。我们可以使用以下代码来使用 useState hook：

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

这将创建一个名为 count 的 state 变量，它的初始值为 0。我们可以使用 setCount() 方法来更新 count 的值。

useEffect hook

useEffect hook 可以让我们在函数组件中使用生命周期方法。我们可以使用以下代码来使用 useEffect hook：

useEffect(() => {
  // 副作用代码
}, [dependencies]);

useEffect hook 的第一个参数是一个函数，这个函数会在组件挂载、更新和卸载时执行。useEffect hook 的第二个参数是一个数组，这个数组指定了 useEffect hook 应该在哪些情况下执行。

实战：数据查询小工具

现在我们已经了解了 React hooks 的基本用法，我们可以来构建一个数据查询小工具了。

首先，我们需要创建一个 React 组件来渲染数据查询小工具的界面。我们可以使用以下代码来创建这个组件：

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

const DataQueryTool = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    setLoading(true);
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(response => response.json())
      .then(data => {
        setData(data);
        setLoading(false);
      });
  }, []);

  return (
    <div>
      {loading ? (
        <div>Loading...</div>
      ) : (
        <ul>
          {data.map(item => (
            <li key={item.id}>{item.title}</li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default DataQueryTool;

这个组件使用 useState hook 来管理数据和加载状态。它使用 useEffect hook 来在组件挂载时拉取数据。

接下来，我们需要创建一个 React 组件来渲染数据查询小工具的查询表单。我们可以使用以下代码来创建这个组件：

import React, { useState } from 'react';

const SearchForm = () => {
  const [searchTerm, setSearchTerm] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    // 查询数据
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={searchTerm} onChange={e => setSearchTerm(e.target.value)} />
      <button type="submit">查询</button>
    </form>
  );
};

export default SearchForm;

这个组件使用 useState hook 来管理搜索词状态。它使用 handleSubmit() 方法来处理查询表单的提交事件。

最后，我们需要创建一个 React 组件来将数据查询小工具和查询表单组合在一起。我们可以使用以下代码来创建这个组件：

import React from 'react';

import DataQueryTool from './DataQueryTool';
import SearchForm from './SearchForm';

const App = () => {
  return (
    <div>
      <SearchForm />
      <DataQueryTool />
    </div>
  );
};

export default App;