你应该知道的关于 React Hooks 的事情

React……我们都知道这个库在科技行业的重要性。大多数应用程序都因为它的优点和特性而转向 React。 React 有很多特性。 React 钩子就是其中之一。 React hooks 于 2018 年 10 月首次发布。 在 React 中，很多开发人员使用生命周期方法，它只是一系列组件。它从 React 组件的诞生到死亡都在使用。

使成为（）， componentDidMount(), componentDidUpdate() componentWillUnmount() 所有这些都是生命周期方法。 React hooks 是状态管理和生命周期方法的替代方法。有许多用于不同目的的钩子。其中一些是 useReducer、useState、useCallBack、useMemo、useRef、useDispatcher 等。

在这篇博客中，我们将通过一些示例讨论常见的钩子、 React 钩子的好处、 React 钩子的规则。

使用 React Hook 的好处

Hook 为开发人员提供了很多好处。它使您的组件更好，并有助于编写清晰、简洁和可维护的代码。它只是从您的组件中删除了所有不必要的代码，并使您的代码更具可读性。但问题是什么时候使用 React 钩子？

在编写函数组件时使用 Hooks，并希望向其添加一些状态。早些时候，这项工作是通过使用类完成的，但现在您可以在函数组件中编写钩子。

钩子规则

以下是使用 React 钩子的主要规则……

1.总是在顶层调用钩子。不要在循环、条件或嵌套函数中调用它。您将确保每次渲染组件时都可以以相同的顺序调用钩子。

2.无法从常规 JavaScript 函数调用钩子。你可以从 React函数组件调用它。一个钩子可以调用另一个钩子。

钩子效应

Hooks 效果允许您在函数组件中执行副作用。钩子效应没有使用可用的类内组件的函数组件。钩子效果类似于生命周期方法componentDidMount()、componentDidUpdate() 和 componentWillUnmount()。

钩子效应具有以下共同特征……

• 更新 DOM
• 从服务器 API 获取和使用数据
• 设置订阅

下面是React 钩子的示例之一。

Javascript

import React, { useState, useEffect } from 'react';  
    
function CounterExample() {  
  // Declare a new state variable, which we'll call "count"  
  const [count, setCount] = useState(0);  
  const incerementCount = () =>setCount(count+1);
    
  useEffect(() => {  
    // Update the document title using the browser API  
    document.title = `You clicked ${count} times`;  
  });
    
  return (  
    
  
        
  
You clicked {count} times
  
    
        
        Click me  
        
    
  
  );  
}  
export default CounterExample;

上下文挂钩

React 中有 Context hook 的概念。 Context hook 用于 Context API。你在 React 中创建上下文，这个钩子用于与创建的上下文交互。下面给出一个例子……

Javascript

import React, { useContext } from 'react';
const ExampleContext = React.createContext();
function Display() {
   const Examplevalue = useContext(ExampleContext);
   return 
{Examplevalue}, This value is from context.
;
}
function App() {
   return (
      
         
      
   );
}

减速机挂钩

如果您使用过 Redux，您可能听说过这个词。 Reducer hook 作为 state hook 的替代品。当一个状态改变时，它被捆绑在一个叫做 Reducer 的中心函数。之后，状态将根据操作和现有状态进行更新。下面给出了其中一个示例……您可以按如下所示重写状态挂钩示例……

Javascript

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: throw new Error();
  }
}
  
function App() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      
Count: {state.count}
       dispatch({type: 'increment'})}>+
       dispatch({type: 'decrement'})}>-
    
  );
}

参考挂钩

引用钩子是指由 render 方法创建的 React 元素。下面给出一个例子……

Javascript

import React, { useRef } from 'react';
function App() {
  const newElement = useRef(null);
  const onButtonClick = () => {
    newElement.current.focus();
  };
  return (
    <>
      
      Focus to Element
    
  );
}

最后的想法

我们已经通过代码示例讨论了主要钩子及其用法。这些钩子不限于此。一旦你有了 React 的经验，你就会使用更多的钩子，比如 useDispatch、useSelect 等。它们中的每一个都有自己的应用程序。