React Hooks 要点-js教程-PHP中文网

React Hooks Essentials

概念亮点：

什么是 Hook？
为什么使用 Hook？
useState
使用效果
使用Reducer
useRef
自定义挂钩
使用 dispacth 切换
UseHooks.com 是什么？

1. 什么是 Hooks 以及为什么

在 React 中，Hooks 是特殊函数，允许您在功能组件中使用状态和其他 React 功能，而无需将它们转换为类组件。 React 16.8 中引入的钩子使组件之间的逻辑重用、处理状态管理以及管理数据获取或订阅等副作用变得更加容易，所有这些都在功能组件内进行。

2. 为什么使用钩子？

更简洁的代码： Hooks 允许您直接在功能组件中管理状态和副作用，从而简化了组件的结构。
可重用性：自定义挂钩允许您重用有状态逻辑，而无需重复代码或重组组件。
功能组件： Hooks 使您能够编写与类组件一样强大的功能组件，从而形成更加一致的代码库。

3. 使用状态

useState 钩子是管理功能组件状态的基础。您可以使用此钩子无缝管理状态，而不是通过 this.setState() 使用类组件。

语法：

const [state, setState] = useState(initialState);

登录后复制

例如） 在此示例中，它使用值 0 初始化 count，并在单击按钮时使用 setCount 函数更新它。

import React, { useState } from 'react';

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

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

登录后复制

4.使用效果

useEffect 钩子允许您处理组件中的副作用，例如获取数据、更新 DOM 或订阅事件。

语法：

useEffect(() => {
  // Side effect logic
  return () => {
    // Cleanup
  };
}, [dependencies]);

登录后复制

例如） 在此示例中，useEffect 在组件安装时从 API 获取数据。空数组 [] 作为第二个参数确保效果仅运行一次（如 componentDidMount）。

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

function DataFetcher() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return (
    <div>
      {data ? <p>{data.title}</p> : <p>Loading...</p>}
    </div>
  );
}

登录后复制

5.使用Reducer

当你的状态逻辑变得更加复杂时，请考虑使用 useReducer 而不是 useState。它与 Redux 类似，但在组件级别。您可以使用它来管理基于操作类型的状态转换。

语法：

const [state, dispatch] = useReducer(reducer, initialState);

登录后复制

例如） 在此示例中，useReducer 处理两个操作：递增和递减。您可以使用调度来根据这些操作触发状态更新。

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </div>
  );
}

登录后复制

6.useRef

useRef 钩子提供了一种直接访问和操作 DOM 元素或跨渲染存储可变值的方法，而不会导致重新渲染。

语法：

const myRef = useRef(initialValue);

登录后复制

例如） 在此示例中，useRef 允许直接访问输入字段，从而能够在单击按钮时以编程方式将其聚焦。

import React, { useRef } from 'react';

function InputFocus() {
  const inputRef = useRef(null);

  const handleFocus = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleFocus}>Focus Input</button>
    </div>
  );
}

登录后复制

7. 自定义挂钩

挂钩的强大功能之一是您可以创建自定义挂钩来封装和重用跨组件的逻辑。自定义钩子从使用开始，只是可以使用其他钩子的常规 JavaScript 函数。

例如） 在此示例中，useFetch 钩子处理数据获取逻辑，并且可以在多个组件中重用。

import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(data => {
        setData(data);
        setLoading(false);
      });
  }, [url]);

  return { data, loading };
}

function App() {
  const { data, loading } = useFetch('https://api.example.com/data');

  return <div>{loading ? <p>Loading...</p> : <p>{data.title}</p>}</div>;
}

登录后复制

8. 与调度切换

dispatch 方法可以与 useReducer 结合使用来创建切换状态，这有助于处理模态、下拉列表或切换主题等组件。

例如） 调度方法中的切换操作在 true 和 false 之间切换 isVisible 状态，从而切换内容的可见性。

import React, { useReducer } from 'react';

const initialState = { isVisible: false };

function reducer(state, action) {
  switch (action.type) {
    case 'toggle':
      return { isVisible: !state.isVisible };
    default:
      return state;
  }
}

function ToggleComponent() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <button onClick={() => dispatch({ type: 'toggle' })}>
        {state.isVisible ? 'Hide' : 'Show'} Details
      </button>
      {state.isVisible && <p>Here are the details...</p>}
    </div>
  );
}

登录后复制