详解React Hooks是如何工作的

 更新时间:2021年05月15日 09:14:50   作者:lovin  
React Hooks是在React 16.8版本新增的特性,在我看了React官网和一些博客对React Hook的讲解后还是觉得没有get到本质。本篇博客通过手动实现useState()来了解Hook的原理和本质。阅读此篇博客的前提是你要知道一些 React Hooks的基本用法和使用规则,不然会看得云里雾里。

1. React Hooks VS 纯函数

React Hook 说白了就是 React V18.6 新增的一些 API,API的本质就是提供某种功能的函数接口。因此,React Hooks 就是一些函数,但是 React Hooks 不是纯函数。

什么是纯函数呢?就是此函数在相同的输入值时,需产生相同的输出,并且此函数不能影响到外面的数据。
简单理解就是函数里面不能用到在外面定义的变量,因为如果用到了外面定义的变量,当外面的变量改变时会影响函数内部的计算,函数也会影响到外面的变量。

对于 React Hooks 提供的函数 API,恰恰就不是纯函数。
来看一个 useState 的使用语句 const [count, setCount] = useState(0),使用 useState 函数得到的结果并不是全都一样的,因为如果 useState(0) 每次得到的结果都是一样的,那 count 值就永远不会改变了,那 count 所在的页面就永远不会改变,和我们看到的结果就不一样了。由此可知,React Hooks 都不是纯函数,也就是说 Hooks 用到了函数外的变量。

那么是什么特性让 React Hooks 一定不能是纯函数呢?实际上是 React 框架和函数组件本身决定的。我们知道,React 页面渲染的原理就是通过每次 render 得到新的虚拟 DOM ,然后进行 DOM Diff 来渲染页面。而 React 的函数组件是通过执行整个函数得到一个虚拟 DOM。因此在每次页面渲染 render 时,在函数组件内部的所有语句都会重新执行一次。如果在函数组件内部使用的 React Hooks 是纯函数的话,就不会在每次渲染后得到不同的虚拟 DOM 了。

React 规定: 所有 React 组件都必须是纯函数,并禁止修改其自身 props 。

因此在 React V16.8 之前 React Hooks 还没出来的时候,函数组件因为是纯函数,只能返回一个固定的虚拟 DOM,不能包含状态,也不支持生命周期方法。因此,当时仅仅是支持函数组件,但函数组件相比于类组件限制太多,函数组件无法取代类组件,也没类组件好用。

React 希望组件是简单的而不是复杂的,React 认为组件的最佳写法应该是函数,而不是类。因此 React 就新增了 React Hooks,Hook 就是钩子的意思,是 React 提供给函数组件在需要外部功能和数据状态时将其 “钩” 进去,从而完善函数组件,使其能完全代替类组件。

React 的函数组件只能是纯函数,那么每次事件发生时重新 render 函数组件时得到不同的虚拟 DOM 的事就完全交给了 React Hooks,那么 React Hooks 是如何做到的呢?下面就手动实现一个 useState,useState 的具体细节肯定不是这样的,但原理和思路是一样的。

2. 简单 myUseState

React.useState 的第一次执行是将初始值赋予给一个 _state,之后的每次重新 render 时就是读取 _state 的值。[state, setState] 中的 setState 做的事就是改变 _state 的值,然后重新渲染页面。
根据这个原理实现 myUseState 函数如下:

import React from 'react';
import ReactDOM from 'react-dom';

let _state

function myUseState(initialValue){
  if(_state === undefined){
    _state = initialValue
  }
  const setState = (newValue)=>{
    _state = newValue
    render()
  }
  return [_state, setState]
}

function render(){
  ReactDOM.render(<App/>,document.getElementById('root'));
}

function App(){
  const [n, setN] = myUseState(0)
  return (
    <div>
      n: {n}
      <button onClick={() => setN(n+1)}>+1</button>
    </div>
  )
}

ReactDOM.render(<App/>,document.getElementById('root'));

3. 改进 myUseState

上述实现的 myUseState 存在 bug,当在函数组件内用到两次 myUseState 时就会出现问题了,二者共用一个 _state 会出现混乱。
因此需要将上述实现进行改进,改进的思路就是将 _state 定义为一个数据或者是对象,由于我们在函数使用时只传了一个数值,无法确定键值,因此只能使用数据。改进如下:

import React from 'react';
import ReactDOM from 'react-dom';

let _state = []
let index = 0

function myUseState(initialValue){
  const currentIndex = index
  if(_state[currentIndex] === undefined){
    _state[currentIndex] = initialValue
  }
  const setState = (newValue)=>{
    _state[currentIndex] = newValue
    render()
  }
  index++
  return [_state[currentIndex], setState]
}

function render(){
  index = 0
  ReactDOM.render(<App/>,document.getElementById('root'));
}

function App(){
  const [n, setN] = myUseState(0)
  const [m, setM] = myUseState(0)
  return (
    <div>
      n: {n}
      <button onClick={() => setN(n+1)}>+1</button>
      <br/>
      m: {m}
      <button onClick={() => setM(m+1)}>+1</button>
    </div>
  )
}

ReactDOM.render(<App/>,document.getElementById('root'));

4. 实现原理引发的 Hooks 规则

上述实现的 myUseState 肯定不是 React.useState 的具体实现代码,但实现原理是一致的。myUseState 函数封装了函数组件内的数据状态,并对该状态进行管理,以暴露出相关的操作接口的方式提供给函数组件使用。
这样一来,函数组件就和其数据状态分离了,函数组件只负责返回虚拟 DOM 本身就可以了,对于数据状态的管理完全交给其 “钩” 住的 React.useState Hook 就可以了。

从上述的实现思路可以发现,React Hooks 的实现其实是基于 全局变量 和 闭包 原理实现的特殊函数。

但是,正是因为这样的实现方式,限制了 React Hooks 的使用必须是 只在顶层调用Hook,意思就是说 不要在循环,条件或嵌套函数中调用 Hook,如果在 if 条件句中使用了 Hook, 导致组件每次渲染生成时 React.useState 语句的执行次数不对,就会打乱 index 的计数,从而导致数据维护的错误。

上述的实现原理依赖于 index 的正确计数,因此 React 依赖于调用 Hooks 的顺序,

以上就是详解React Hooks是如何工作的的详细内容,更多关于详解React Hooks的资料请关注脚本之家其它相关文章!

相关文章

  • React useReducer终极使用教程

    React useReducer终极使用教程

    useReducer是在react V16.8推出的钩子函数,从用法层面来说是可以代替useState。相信前期使用过 React 的前端同学,大都会经历从class语法向hooks用法的转变,react的hooks编程给我们带来了丝滑的函数式编程体验
    2022-10-10
  • React 中使用 RxJS 优化数据流的处理方案

    React 中使用 RxJS 优化数据流的处理方案

    这篇文章主要为大家介绍了React 中使用 RxJS 优化数据流的处理方案示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • 教你在react中创建自定义hooks

    教你在react中创建自定义hooks

    简单来说就是使用自定义hook可以将某些组件逻辑提取到可重用的函数中。 自定义hook是一个从use开始的调用其他hook的Javascript函数,下面看下react中创建自定义hooks的相关知识,感兴趣的朋友一起看看吧
    2021-11-11
  • 从头写React-like框架的工程搭建实现

    从头写React-like框架的工程搭建实现

    这篇文章主要介绍了从头写React-like框架的工程搭建实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • React中Provider组件详解(使用场景)

    React中Provider组件详解(使用场景)

    这篇文章主要介绍了React中Provider组件使用场景,使用Provider可以解决数据层层传递和每个组件都要传props的问题,本文结合示例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-02-02
  • React文件名和目录规范最佳实践记录(总结篇)

    React文件名和目录规范最佳实践记录(总结篇)

    React在使用时非常灵活,如果没有一个规范约束项目,在开发过程中会非常混乱,本文将介绍几个优秀的规范,介绍文件名和目录前,需要先简述一下几种通用的类型,用来区分文件的功能,感兴趣的朋友一起看看吧
    2022-05-05
  • React的Props、生命周期详解

    React的Props、生命周期详解

    “Props” 是 React 中用于传递数据给组件的一种机制,通常作为组件的参数进行传递,在 React 中,props 是只读的,意味着一旦将数据传递给组件的 props,组件就不能直接修改这些 props 的值,这篇文章主要介绍了React的Props、生命周期,需要的朋友可以参考下
    2024-06-06
  • React18新增特性released的使用

    React18新增特性released的使用

    本文主要介绍了React18新增特性released的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-05-05
  • React手稿之 React-Saga的详解

    React手稿之 React-Saga的详解

    这篇文章主要介绍了React手稿之 React-Saga的详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • 详解React中常见的三种路由处理方式选择

    详解React中常见的三种路由处理方式选择

    这篇文章主要为大家详细介绍了React中常见的三种路由处理方式该如何选择,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-01-01

最新评论