为什么在ReactJS中使用React Hooks而不是类

在本文中，我们将会学习为什么要在ReactJS中使用React Hooks而不是类。

React Hooks 是在React 16.8中新增的功能，允许函数组件持有状态、管理生命周期事件，并利用其他在基于类组件中之前独占使用的React特性。通过使用Hooks，开发可重用和模块化的代码更加简单、清晰和直观。

基于类的组件 在React中是一种替代方法，用于使用JavaScript类创建可重用的UI组件。它们通过扩展React.Component类并实现诸如render()等方法来定义组件的UI。基于类的组件有着自己的状态和生命周期技巧。

语法：

import React, { useState } from 'react';   

const MyComponent = () => {    
    const [state, setState] = useState(initialValue);       
    // ...   
};

使用Hooks的优势胜过使用类：

可读性和简洁性 与基于类的组件相比，Hooks提供了更简单和更短的语法。使用Hooks可以创建功能组件，而不需要类，使代码更易于阅读和理解。通过消除处理“this”关键字、构造函数和生命周期函数的麻烦，Hooks能够生成更好的代码。
代码可重用性 通过允许您在多个组件之间提取和重用逻辑，Hooks提高了代码的可重用性。您可以使用自定义的Hooks在没有使用高阶组件或渲染属性的情况下，隔离和交互状态行为。
更有效的管理 使用Hooks可以更精确地对相关代码进行分组和管理。您可以在单个组件内部使用各种Hooks来单独处理不同的关注点，如状态管理、副作用和上下文。
防止与类相关的问题 在React组件中使用类可能会导致有关函数绑定、生命周期方法和性能改进的不明确情况。这些问题可以通过Hooks来解决，它们提供了一种更简单的处理状态和效果的方法。
提升性能 Hooks使性能优化更加容易。使用类似“useCallback”和“useMemo”的Hooks可以缓存函数和值，减少额外的渲染次数，提高组件性能。
未来的灵活性 在过去的几年里，React一直在推广使用Hooks作为编写组件的主要方法。React团队推荐使用Hooks来创建React组件，因为他们正在投资于增强和扩展其功能。使用Hooks可以保证与未来的React版本的兼容性。
示例： 在这个示例中，我们使用“useState”hook来操作状态。

import React, { useState } from 'react'; 
const Counter = () => { 
    const [count, setCount] = useState(0); 
    const incrementCount = () => { 
        setCount(count + 1); 
    }; 
    return ( 
        <div> 
            <h1>Count: {count}</h1> 
            <button onClick={incrementCount}> 
                Increment 
            </button> 
        </div> 
    ); 
}; 
export default Counter;

输出 :

为什么在ReactJS中使用React Hooks而不是类

示例： 在这个示例中，我们使用类来操作状态。

import React, { Component } from 'react'; 
class Counter extends Component { 
    constructor(props) { 
        super(props); 
        this.state = { 
            count: 0, 
        }; 
    } 
    incrementCount() { 
        this.setState({ 
            count: this.state.count + 1, 
        }); 
    } 
    render() { 
        return ( 
            <div> 
                <h1>Count: {this.state.count}</h1> 
                <button onClick={() => this.incrementCount()}> 
                    Increment 
                </button> 
            </div> 
        ); 
    } 
} 
export default Counter;

输出：

为什么在ReactJS中使用React Hooks而不是类

React Hooks 和 Classes 之间的区别：

方面	Hooks	类
语法	Hooks 使用常规的 JavaScript 函数	类使用 class 语法和 `extends React.Component 。`
状态管理	useState hook 用于定义和更新状态变量。	在类中，状态使用 this.state 对象定义，并使用 this.setState() 更新。
生命周期方法	为了处理组件的生命周期事件，类中包含像 componentDidMount、componentDidUpdate 和 componentWillUnmount 这样的生命周期方法。	Hooks 中的 useEffect hook 用于处理相关的生命周期事件。
代码组织	在类中，相关逻辑和状态常常分散在许多生命周期方法和类方法中。	Hooks 允许你通过将其拆分为较小的自定义 hook，将相关逻辑组合在一起。
可重用性	通过使用高阶组件 (HOCs) 或渲染属性，可以重用类。	Hooks 通过允许你设计封装一组相关功能的自定义 hook 来鼓励重用。
学习曲线	React 自其早期版本起就拥有类，因此有更多的教学材料和代码示例可供选择。	另一方面，稍后开始使用的 hooks 提供了更简单、更符合逻辑的编写组件的方法。