使用 React 挂钩优化服务器请求

1npx create-react-app digital-ocean-tutorial

 1...
 2Success! Created digital-ocean-tutorial at your_file_path/digital-ocean-tutorial
 3Inside that directory, you can run several commands:
 4
 5npm start
 6Starts the development server.
 7
 8npm run build
 9Bundles the app into static files for production.
10
11npm test
12Starts the test runner.
13
14npm run eject
15Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can’t go back!
16
17We suggest that you begin by typing:
18
19cd digital-ocean-tutorial
20npm start
21
22Happy hacking!

1cd digital-ocean-tutorial

1npm start

1Compiled successfully!
2
3You can now view digital-ocean-tutorial in the browser
4
5http://localhost:3000
6
7Note that the development build is not optimized.
8To create a production build, use npm run build.

 1[label /src/app.js]
 2
 3import React, { useEffect, useState } from 'react';
 4
 5function MyComponent() {
 6  const [data, setData] = useState([]);
 7  useEffect(() => {
 8    async function fetchData() {
 9      const response = await fetch('https://jsonplaceholder.typicode.com/posts');
10      const data = await response.json();
11      setData(data);
12    }
13    fetchData();
14  }, []);
15
16  return (
17    <div>
18      {data.map((item) => (
19        <div key={item.id}>
20          <h2>- {item.title}</h2>
21          <p>{item.body}</p>
22        </div>
23      ))}
24    </div>
25  );
26}
27
28export default MyComponent

 1[label /src/app.js]
 2
 3import { useEffect, useState, useMemo } from 'react';
 4
 5function MyComponent({ postId }) {
 6  const [data, setData] = useState({});
 7  useEffect(() => {
 8    async function fetchData() {
 9      const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`);
10      const data = await response.json();
11      setData(data);
12    }
13    fetchData();
14  }, [postId]);
15
16  const title = useMemo(() => data.title, [data]);
17
18  return (
19    <div>
20      <h2>{title}</h2>
21    </div>
22  );
23}
24
25export default MyComponent

 1[label /src/app.js]
 2
 3import { useReducer } from 'react';
 4
 5const initialState = { data: [], loading: false, error: '' };
 6const reducer = (state, action) => {
 7  switch (action.type) {
 8    case 'FETCH_DATA_REQUEST':
 9      return { ...state, loading: true };
10    case 'FETCH_DATA_SUCCESS':
11      return { ...state, data: action.payload, loading: false };
12    case 'FETCH_DATA_FAILURE':
13      return { ...state, error: action.payload, loading: false };
14    default:
15      return state;
16  }
17};
18
19function MyComponent() {
20  const [state, dispatch] = useReducer(reducer, initialState);
21
22  const fetchData = async () => {
23    dispatch({ type: 'FETCH_DATA_REQUEST' });
24    try {
25      const response = await fetch('https://jsonplaceholder.typicode.com/posts');
26      const data = await response.json();
27      dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data });
28    } catch (error) {
29      dispatch({ type: 'FETCH_DATA_FAILURE', payload: error.message });
30    }
31  };
32
33  return (
34    <div>
35      {state.loading ? (
36        <p>Loading...</p>
37      ) : state.error ? (
38        <p>{state.error}</p>
39      ) :
40        <div>
41          {state.data.map((item) => (
42            <div key={item.id}>
43              <h2>{item.title}</h2>
44              <p>{item.body}</p>
45            </div>
46          ))}
47        </div>
48      )}
49      <button onClick={fetchData}>Fetch Data</button>
50    </div>
51  );
52}
53
54export default MyComponent