关于为什么使用React新特性Hook的一些实践与浅见

最新推荐文章于 2024-10-30 10:42:33 发布

python-花猫

最新推荐文章于 2024-10-30 10:42:33 发布

阅读量188

点赞数

分类专栏： python 文章标签： python

本文链接：https://blog.csdn.net/python_doris/article/details/103735269

版权

本文探讨为何使用React Hook，通过示例说明如何用useEffect解决生命周期问题，阐述自定义Hook如何提升组件复用性。虽然Hook简化了函数组件的代码，但不应盲目改造旧的class组件，它们各有适用场景。

摘要由CSDN通过智能技术生成

前言

关于Hook的定义官方文档是这么说的：

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

简单来说，就是在使用函数式组件时能用上state，还有一些生命周期函数等其他的特性。

如果想了解Hook怎么用，官方文档和阮一峰的React Hooks 入门教程都讲得很清楚了，我建议直接看官方文档和阮大神的文章即可。

本篇博客只讲为什么要用React的Hook新特性，以及它解决了什么问题。

为什么使用Hook？

让我们先看看别人怎么说。

示例代码：

import React, {
    Component } from "react";

export default class Button extends Component {
   
  constructor() {
   
    super();
    this.state = {
    buttonText: "Click me, please" };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
   
    this.setState(() => {
   
      return {
    buttonText: "Thanks, been clicked!" };
    });
  }
  render() {
   
    const {
    buttonText } = this.state;
    return <button onClick={
   this.handleClick}>{
   buttonText}</button>;
  }
}

并且提出：

这个组件类仅仅是一个按钮，但可以看到，它的代码已经很"重"了。真实的 React App 由多个类按照层级，一层层构成，复杂度成倍增长。
再加入 Redux，就变得更复杂。

实际上，上面这个代码的“重”有部分来源于写法问题，他可能并没有“重”，让我们看看下面这种class写法:

import React, {
    Component } from "react";

export default class Button extends Component {
   
  state = {
   
    buttonText: "Click me, please"
  }
  handleClick = () => {
   
    this.setState(() => {
   
      return {
    buttonText: "Thanks, been clicked!" };
    });
  }
  render() {
   
    const {
    buttonText } = this.state;
    return <button onClick