聊聊React Hook的那些事儿

2023-02-28

组件 hook todo

什么是reacthook首先，它是在react16.8版本中引入的概念，也就说如果你的react版本低于16.8，你是不能使用的，因此在使用它的时候，一定要注意react的版本。它将函数组件的功能升级了，原来只能在类组件中使用的state,context等都可以在函数组件中使用了。reacthook

什么是react hook

首先，它是在react16.8版本中引入的概念，也就说如果你的react版本低于16.8，你是不能使用的，因此在使用它的时候，一定要注意react的版本。

它将函数组件的功能升级了，原来只能在类组件中使用的state,context等都可以在函数组件中使用了。

react hook一般是以use开头，比如useState,useEffect，通过使用这种方式，我们就能够在函数组件中使用react的库的功能。

react hook 的优点

相比于类组件，函数组件更好理解，类组件中的this关键词，事件绑定都很让人头疼，而使用了react hook之后，这些问题就都可以避免了。

相比于类组件，你会发现函数组件的代码要少得非常多，代码看起来很简洁，使用起来也非常的方便，虽然官方没有说要移除类组件，但是官方更倾向使用函数组件，如果你是新入门react的话，强烈建议你使用react hook。

使用react hook 的几个准测

虽然react hook很方便，但是也要遵循几个原则来书写。

只有在组件的最顶层才可以使用react hook，也就意味着，你不能在循环，条件，嵌套函数中使用它。方便点记的话就是在return之前使用它。

只在react functions 中使用hook，不要在普通的js函数中使用它，当然你可以在自定义的hooks中使用hook。

React 常用内置hook

(1) useState

顾名思义，通过使用useState，我们可以在函数组件中创建，更新，操作state.

useState使用方法很简单，通过返回一个state变量和一个更新state变量的函数。

import { useState } from "react";

function Counter() {
    // Declare a new state variable, which we'll call "count"
    const [count, setCount] = useState(0);
    return (
        <div>
        Current Cart Count: {count}
            <div>
            <button onClick={() => setCount(count - 1)}>Add to cart</button>
            <button onClick={() => setCount(count + 1)}>Remove from cart</button>
            </div>
        </div>
    );
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

(2) useEffect

在react的生命周期中，我们有componentDidMount,componentDidUpdate,componentWillUnmount等方法，而useEffect就是整合了这些方法。

useEffect主要用在Api数据请求，更改状态变量等地方。

useEffect有两个参数，一个是要运行的函数，一个是包含组件的props,context,state等变量的数组。如果没有后面依赖的数组，就表示每次渲染都要执行第一个参数的函数。

import { useState, useEffect } from "react";
function Counter() {
    // Declare state variables
    const [count, setCount] = useState(0);
    const [product, setProduct] = useState("Eggs");
    useEffect(() => {
        console.log(`${product} will rule the world!`);
    }, [product]);
    return (
        <div>
        Current {product}'s count: {count}
            <div>
                <button onClick={() => setCount(count + 1)}>Add to cart</button>
                <button onClick={() => setCount(count - 1)}>Remove from cart</button>
                Change Product:{" "}
                <input type="text" onChange={(e) => setProduct(e.target.value)} />
            </div>
        </div>
    );
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.

(3) useContext

它提供了一个方法可以让数据被整个应用程序的所有组件访问到，相当于声明了一个全局变量，无论它被嵌套使用，还是如何使用，其它组件总是能够访问使用它。

它只有一个参数，就是React.createContext函数的返回值。

import React from "react";
// some mock context values
const users = [
{
    name: "Harry Potter",
    occupation: "Wizard",
},
{
    name: "Kent Clark",
    occupation: "Super hero",
},
];

export const UserContext = React.createContext(users);1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

import React, { useContext } from "react";
import { UserContext } from "./App";

export function UserProfile() {
    const users = useContext(UserContext);
    return (
        <div>
            {users.map((user) => (
            <li>
            I am {user.name} and I am a {user.occupation}!
            </li>
            ))}
        </div>
    );
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

(4) useReducer

这是一个和useState很类似的hook，唯一的不同就是它允许操作逻辑更复杂的状态更新。

它接收两个参数，一个是更新函数，一个是初始状态。它的返回值有两个，一个是被处理的状态state，一个是分派的函数。

简单理解就是useReducer通过提供的更新函数对state进行相应的更新处理。

import { useReducer } from "react";
import ReactDOM from "react-dom";

const initialTodos = [
  {
    id: 1,
    title: "Todo 1",
    complete: false,
  },
  {
    id: 2,
    title: "Todo 2",
    complete: false,
  },
];

const reducer = (state, action) => {
  switch (action.type) {
    case "COMPLETE":
      return state.map((todo) => {
        if (todo.id === action.id) {
          return { ...todo, complete: !todo.complete };
        } else {
          return todo;
        }
      });
    default:
      return state;
  }
};

function Todos() {
  const [todos, dispatch] = useReducer(reducer, initialTodos);

  const handleComplete = (todo) => {
    dispatch({ type: "COMPLETE", id: todo.id });
  };

  return (
    <>
      {todos.map((todo) => (
        <div key={todo.id}>
          <label>
            <input
              type="checkbox"
              checked={todo.complete}
              onChange={() => handleComplete(todo)}
            />
            {todo.title}
          </label>
        </div>
      ))}
    </>
  );
}

ReactDOM.render(<Todos />, document.getElementById('root'));1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.

自定义Hooks

通过组合使用react内置的hook，我们可以生成我们自己的hook。

//useFetch.js
import { useState, useEffect } from "react";

export function useFetch(url) {
    //values
    const [data, setData] = useState(null);
    const [error, setError] = useState("");
    useEffect(() => {
        fetch(url)
        .then(res => {
            if (!res.ok) {
            throw Error("something wrong, çould not connect to resource");
        }
        setData(res.json());
        })
        .then(() => {
            setError("");
        })
        .catch( error => {
            console.warn(`sorry an error occurred, due to ${error.message} `);
            setData(null);
            setError(error.message);
        });
    }, [url]);
    return [data, error];
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.