探索鲜为人知的钩子及其重要性-DEV365 开发者社区

在React version 16.8中引入的挂钩，可为React的状态和生命周期特征提供功能组件访问。挂钩使组件通过使开发人员能够将组件分为可以轻松连接的较小部分来使组件更有条理和重复使用。
最常用的钩子是koude0和koude1在React Apps中很有用，因为useState允许开发人员将状态添加到功能组件中，而useEffect有助于管理副作用，例如数据获取和DOM更新。两个钩子都可以组合以执行复杂的任务。
尽管这些基本钩子对于创建反应应用是必需的，但本文着重于揭示鲜为人知的钩子，这些钩子提供了可提高性能和简化代码的专业解决方案。

usecontext

koude4 hook是React的基本组成部分，它提供了一种更好的方式来管理全球国家。它提供了一种在多个嵌套组件上共享状态的方法，而无需通过组件树的每个级别传递道具。

用例：计数器应用

当状态被传递到嵌套组件而无需使用useContext钩的嵌套组件时，如下示例时，它会导致所谓的“道具钻探”。

import React, { useState } from 'react';

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

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

function Counterchild ({ count }) {
  return (
    <div>
      <h2>Counter Child</h2>
      <ChildComponent count={count}/>
    </div>
  );
};

function Counterdisplay ({ count }) {
  return (
    <div>
      <h3>Counter Display</h3>
      <p>Count: {count}</p>
    </div>
  );
};

export default Counter;

在此示例中，count状态在Counter组件中定义，并且通过Counterchild的道具传递到Counterdisplay。每个组件作为道具接收count状态，允许它们显示其值。
尽管该方法有效，但当状态通过许多嵌套的儿童组件传递时，它会变得冗长。
要使用useContext钩，我们首先导入createContext并初始化它。

import { useState, createContext } from "react";

const count = createContext()

接下来，我们将包裹需要状态的组件树，并带有上下文提供商。

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

  return (
<UserContext.Provider value={user}>
    <div>
      <h1>Counter</h1>
<button onClick={() => setCount(count + 1)}>Increment Count</button>
      <Counterchild count={count}/>
    </div>
</UserContext.Provider>
  );
};

要使用位于父组件中的先前创建的上下文，我们需要导入useContext。

import { useContext } from "react";

现在，我们的上下文可用于儿童组件。

function Counterdisplay() {
  const user = useContext(count);

  return (
    <div>
      <h3>Counter Display</h3>
      <p>Count: {count}</p>
    </div>
  );
}

USEREF

koude14 hook允许我们创建对一个值或DOM元素的可变引用。与useState挂钩不同，useref在其值变化时不会引起重新渲染。
useRef接受一个参数作为初始值，并返回一个称为current的对象。例如：

const initialValue = ''
const reference = useRef(initialValue)

可以使用current对象访问并更改参考：

  useEffect(() => {
    reference.current = 'My Reference';
  });

用例1：跟踪应用程序重新租赁

，如果我们试图使用useState钩子来计算应用程序渲染的次数，因为它会导致重新渲染本身，我们将启动无限循环。为了避免这种情况，我们可以使用useRef钩：

import { useState, useEffect, useRef } from "react";

function App() {
  const [inputValue, setInputValue] = useState("");
  const count = useRef(0);

  useEffect(() => {
    count.current = count.current + 1;
  });

  return (
    <>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <h1>Render Count: {count.current}</h1>
    </>
  );
}

在上面的示例中，我们将引用的初始值设置为使用useRef(0)，并使用count.current访问计数的值。

用例2：聚焦输入元素

useRef可用于保存对DOM元素的引用，然后我们可以通过执行以下内容直接访问和执行此元素的功能：

定义用于访问元素的参考
将引用分配给要与
交互的元素的ref属性

import { useRef } from "react";

function App() {
  const inputElement = useRef();

  const focusInput = () => {
    inputElement.current.focus();
  };

  return (
    <>
      <input type="text" ref={inputElement} />
      <button onClick={focusInput}>Focus Input</button>
    </>
  );
}

在上面的示例中，创建的参考已分配给input标签，我们能够使用分配给其的参考将元素聚焦。

限制

更新引用应在useEffect回调或内部处理程序内部（事件处理程序，计时器处理程序等）内完成，而不是在功能组件函数的直接范围内，因为功能组件的功能范围应计算输出或调用钩子。

import { useRef } from "react";

function App() {
  const count = useRef(0);
      useEffect(() => {
    count.current++; // Success

    setTimeout(() => {
      count.current++; // Success
    }, 1000);
  }, []);

  count.current++; // Error
}

用户编号

koude27 hook用于以更有条理的方式管理复杂状态逻辑。这是useState的替代方法，当国家改变需要进行许多动作时，特别有用。
useReducer具有还原功能和初始状态。它返回当前状态和一个调度函数，您可以使用这些函数来发送操作以根据还原函数中定义的逻辑更新状态

用例：创建计数器

import { useReducer } from 'react';

// Reducer function
const 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 initialState = { count: 0 };
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
    </div>
  );
}

export default Counter;

在此示例中，还原功能处理不同的操作（“增量”和“减少”）来更新状态。 useReducer用{ count: 0 }钩住状态，并提供一个调度函数来触发这些动作。
当我们单击“增量”按钮时，它会派遣类型'增量'的操作，这会导致状态更新并增加计数。同样，单击“减少”按钮可以调度类型'deconment'的动作，从而减少了计数。

USECALLBACK

koude32 hook主要用于记忆功能，以防止其对每个渲染的不必要重新创造。当将功能发送给儿童组件作为道具时，这可能非常有帮助。

用例：提高性能

useCallback的基本语法如下：

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

function ChildComponent({ handleClick }) {
  console.log('ChildComponent rendered');
  return <button onClick={handleClick}>Click me</button>;
}

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

  // Using useCallback to memoize the function
  const increment = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  console.log('ParentComponent rendered');

  return (
    <div>
      <p>Count: {count}</p>
      <ChildComponent handleClick={increment} />
    </div>
  );
}

increment函数被记住，因为如果依赖关系（在这种情况下为count）没有更改，则useCallback钩可确保渲染之间的函数保持相同。这样可以防止当ParentComponent重新租赁时，不必要的增量功能。
然后将增量函数作为handleClick Prop传递给ChildComponent。多亏了useCallback，handleClick Prop在渲染之间仍将保持稳定，即使ParentComponent更新了其状态。

被订购

koude43和useCallback钩子具有一些相似之处。主要区别是useMemo返回一个记忆的值，而useCallback返回记忆的功能。

用例：提高性能

useMemo钩可用于保持昂贵的资源密集型功能，从而不必要地运行，从而改善了React应用程序的性能。

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

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

  // Using useMemo to optimize a calculation
  const squaredCount = useMemo(() => {
    console.log('Calculating squaredCount');
    return count * count;
  }, [count]);

  console.log('ParentComponent rendered');

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

export default ParentComponent;

在此示例中，使用useMemo挂钩来优化squaredCount值的计算，计算取决于计数状态。通过将[count]指定为依赖关系数组，我们确保仅在计数状态更改时重新计算计算。

单击“增量”按钮时，计数状态会更新，从而触发了ParentComponent的重新渲染。但是，由于useMemo优化，squaredCount的计算仅在计数状态发生变化时发生，避免了不必要的重新计算。

结论

React钩子是用于创建动态和有效应用的前端开发的关键工具。本文深入研究了鲜为人知的挂钩，例如“ usecontext”，“ useref”，“ usereducer”，“ usecallback”和“ usememo”，它们为各种挑战提供了解决方案。我敦促您尝试并在项目中加入这些钩子，以更好地了解React的功能。

资源

Complete React hooks documentation