React Hooks 重新定义 React 编程范式

前端

2023-11-21 19:03:23

React Hooks：开启 React 编程的新时代

函数组件的魅力

React Hooks 为 React 开发带来了令人振奋的新格局，将重点从类组件转移到了函数组件。函数组件提供了一系列优势，包括：

简洁明了： 函数组件的代码更简洁，无需书写冗长的类声明、构造函数和其他类相关的代码。
可测试性增强： 函数组件缺乏内部状态和生命周期方法，使其更容易进行单元测试。
高可复用性： 函数组件可以更轻松地复用，因为它们独立于特定实例。

React Hooks 的核心：状态提升

React Hooks 的核心概念是“状态提升”，它允许函数组件访问和修改通常存储在类组件内部状态中的数据。通过这种机制，函数组件可以像类组件一样管理其状态。

关键 React Hooks

React Hooks 提供了一系列强大工具，每个 Hook 都可实现特定的功能：

useState： 管理组件状态的利器。
useEffect： 在组件生命周期中执行副作用的帮手。
useContext： 共享组件树中数据的必备工具。
useReducer： 管理复杂状态的救星。

React Hooks 的实战

使用 React Hooks 非常简单。只需在函数组件中调用相应的 Hook，即可轻松访问和修改组件状态或执行副作用。

useState Hook

import React, { useState } from "react";

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

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

export default MyComponent;

在上面的代码中，useState Hook 管理着组件的 count 状态。每当用户点击按钮时，setCount() 函数会更新 count 状态，从而实时更新组件中的显示值。

useEffect Hook

import React, { useEffect } from "react";

const MyComponent = () => {
  useEffect(() => {
    console.log("组件已挂载");

    return () => {
      console.log("组件已卸载");
    };
  }, []);

  return <h1>组件</h1>;
};

export default MyComponent;

useEffect Hook 可以在组件生命周期中执行副作用。在此示例中，它在组件挂载时打印一条消息，并在组件卸载时打印另一条消息。

useContext Hook

import React, { useContext } from "react";

const MyContext = React.createContext(null);

const MyProvider = (props) => {
  return (
    <MyContext.Provider value="Hello world">
      {props.children}
    </MyContext.Provider>
  );
};

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

  return <h1>{value}</h1>;
};

export default MyComponent;

useContext Hook 允许组件在整个组件树中共享数据。在此示例中，MyProvider 组件提供了一个“Hello world”值，而 MyComponent 组件通过 useContext() 函数访问该值。

useReducer Hook

import React, { useReducer } from "react";

const reducer = (state, action) => {
  switch (action.type) {
    case "increment":
      return state + 1;
    case "decrement":
      return state - 1;
    default:
      return state;
  }
};

const MyComponent = () => {
  const [count, dispatch] = useReducer(reducer, 0);

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => dispatch({ type: "increment" })}>+</button>
      <button onClick={() => dispatch({ type: "decrement" })}>-</button>
    </div>
  );
};

export default MyComponent;