面试官：说说对ReactHooks的理解？解决了什么问题？

本文转载自微信公众号「JS每日一题」，作者灰灰。转载本文请联系JS每日一题公众号。

成都创新互联专注于宁县网站建设服务及定制，我们拥有丰富的企业做网站经验。热诚为您提供宁县营销型网站建设，宁县网站制作、宁县网页设计、宁县网站官网定制、小程序设计服务，打造宁县网络公司原创品牌,更为您提供宁县网站排名全网营销落地服务。

一、是什么

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

至于为什么引入hook，官方给出的动机是解决长时间使用和维护react过程中常遇到的问题，例如：

难以重用和共享组件中的与状态相关的逻辑
逻辑复杂的组件难以开发与维护，当我们的组件需要处理多个互不相关的 local state 时，每个生命周期函数中可能会包含着各种互不相关的逻辑在里面
类组件中的this增加学习成本，类组件在基于现有工具的优化上存在些许问题
由于业务变动，函数组件不得不改为类组件等等

在以前，函数组件也被称为无状态的组件，只负责渲染的一些工作

因此，现在的函数组件也可以是有状态的组件，内部也可以维护自身的状态以及做一些逻辑方面的处理

二、有哪些

上面讲到，Hooks让我们的函数组件拥有了类组件的特性，例如组件内的状态、生命周期

最常见的hooks有如下：

useState
useEffect
其他

useState

首先给出一个例子，如下：

 
 
 
 
  
  
  
  import React, { useState } from 'react';   
  
  
     
  
  
  function Example() {   
  
  
    // 声明一个叫 "count" 的 state 变量   
  
  
    const [count, setCount] = useState(0);   
  
  
     
  
  
    return (   
  
  
         
  
  
        You clicked {count} times
   
  
  
         setCount(count + 1)}>   
  
  
          Click me

);

}

在函数组件中通过useState实现函数内部维护state，参数为state默认的值，返回值是一个数组，第一个值为当前的state，第二个值为更新state的函数

该函数组件等价于的类组件如下：

 
 
 
 
  
  
  
  class Example extends React.Component {   
  
  
    constructor(props) {   
  
  
      super(props);   
  
  
      this.state = {   
  
  
        count: 0   
  
  
      };   
  
  
    }   
  
  
     
  
  
    render() {   
  
  
      return (   
  
  
           
  
  
          You clicked {this.state.count} times
   
  
  
           this.setState({ count: this.state.count + 1 })}>   
  
  
            Click me

总的来讲，useState 使用起来更为简洁，减少了this指向不明确的情况

class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
componentDidMount() {
document.title = `You clicked ${this.state.count} times`;
}
componentDidUpdate() {
document.title = `You clicked ${this.state.count} times`;
}
render() {
return (
You clicked {this.state.count} times
this.setState({ count: this.state.count + 1 })}>
Click me

import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
useEffect(() => { document.title = `You clicked ${count} times`; });
return (
You clicked {count} times
setCount(count + 1)}>
Click me
);
}

useEffect(() => {
function handleStatusChange(status) {
setIsOnline(status.isOnline);
}
ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
return () => {
ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
};
});

三、解决什么

通过对上面的初步认识，可以看到hooks能够更容易解决状态相关的重用的问题：

每调用useHook一次都会生成一份独立的状态

通过自定义hook能够更好的封装我们的功能

编写hooks为函数式编程，每个功能都包裹在函数中，整体风格更清爽，更优雅

hooks的出现，使函数组件的功能得到了扩充，拥有了类组件相似的功能，在我们日常使用中，使用hooks能够解决大多数问题，并且还拥有代码复用机制，因此优先考虑hooks

参考文献

https://zh-hans.reactjs.org/docs/hooks-state.html

https://zh-hans.reactjs.org/docs/hooks-effect.html

https://www.cnblogs.com/lalalagq/p/9898531.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

面试官：说说对ReactHooks的理解？解决了什么问题？

一、是什么

二、有哪些

其它 hooks

三、解决什么