likes
comments
collection
share

如何理解函数式组件?

作者站长头像
站长
· 阅读数 33

今天读了一篇很好的文章,是讲解关于useEffect这个api的,叫useEffect 完整指南,是react的核心维护者本人自己写的,这本文章写的很好,也很长,有点类似于迷你书(文中原话),还没看完的时候,我有一种自己想要出来讲讲我对于react函数式组件的理解的冲动。

我非常喜欢把函数作为组件这种编程方式,因为函数是JavaScript语言本身的特性,因此,如果组件即函数,那么关于函数的基础知识在组件里就仍然适用,而且函数非常容易编写,意味着组件也很容易创建,可以让组件变得非常的轻量化,有利于组件的拆分。

接着我们开始讲我准备讲解的内容。为了书写方便,我们接写来函数时组件统一简写为FC。

一个FC的基本结构是这样子的:

    function Component() {
        // 先是各种变量声明、函数定义、hooks调用等
        const a = x
        
        const [data, setData] = useState(defaultData)
        
        const anyFunc = () => {} 
        
        useEffect(() => {}, [])
        
        // 最后返回jsx
        return <></>
    }

基于这个结构,我们先讲解一些基本事实:

  • 一个组件就是一个普通的JavaScript函数,并没有什么特殊,即便是返回的JSX,经过编译后也是一个对象,因此,它就是一个返回对象的函数。
  • 这个函数的返回值,会被React用于这个组件的渲染
  • 每一次重新渲染的过程,就是重新调用这个函数,重新得到返回值的过程,因此,重新渲染等价于重新调用。
  • 每一次调用函数,函数内的代码从第一行开始,直到遇到return语句,都会依次重新执行一遍,所以,中间定义的各种变量,hooks调用都会重新执行一遍

ok,接下来我们看一个例子:

function Counter() {
  const [count, setCount] = useState(0);

  function handleAlertClick() {    
      setTimeout(() => { alert('You clicked on: ' + count); }, 3000);  
  }
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
      <button onClick={handleAlertClick}>Show alert</button>
     </div>
  );
}

这个例子就是文章开头说的那篇文章里的,这个例子很简单,有两个按钮,一个是非常常见的计数器,另一个是一个按钮,点击后,调用setTimeout函数,3s后输出count的值。你可以点击这里体验

现在,进行如下操作:

  1. 点击count到3
  2. 此时点击另一个按钮
  3. 在3s计时器结束前,继续点击count到5

现在请你判断,在计时器结束后,会输出什么?

答案是3。

其实答案不太重要,毕竟这个问题表面也就是让你在3和5之间选择而已,这个例子真正想让读者自省的是,答案为什么是3?你是否理解了以上操作步骤背后整个的react运作过程?

我们结合刚刚讲的几个基本事实来梳理这个过程。

  1. 当我们进行第(1)步的时候,这个函数反复执行了三次,为什么会重新执行,这是useState这个hooks返回的setState的作用,当我们调用setState,为state赋一个新的值之后,下一次调用useState,返回的state就是这个新值,另外,每次重新调用这个函数,内部的handleAlertClick函数都会重新定义一次,也就是说,每一次重新渲染,在jsx里面每一次绑定的handleAlertClick函数都是跟上一次渲染绑定的引用时不同的了,但是第一次、第二次渲染时,这个函数不管是被定义也好,被绑定为点击处理事件的引用函数也好,都没有意义,因为没有用到过。
  2. 当count为3的时候,我们我们进行了步骤(2),此时,第三次渲染时,定义的handleAlertClick函数被调用了,我们知道,函数被定义时,我们要会对内部的变量进行一个扫描,检测其中是否引用了非本函数内部定义的外部作用域的变量,如果有的话,那么不论这个函数在何时、何处被调用,他都可以始终访问到其内部的定义的这些外部作用域的变量,这是一个在代码编译阶段就会完成的过程,这个特性,在JavaScript里面被称为闭包。之所以叫闭包,可以形象的理解为,这个函数就像一个封闭的小背包,装着它里面的变量可以到处跑。我们可以看到,handleAlertClick函数内部是有一个访问外部变量的count的,我们知道,[count, setCount]这个语法其实是ES6的解构赋值语法,实际上每次执行的时候,我们都重新声明了一个count变量用于接收useState函数的返回值,因此,每一次执行时count变量的地址都是不一样的,所以每一次handleAlertClick函数定义的时候携带的闭包里面的count变量每次也都是不一样的,而第三次渲染时,handleAlertClick函数内部的携带的显示就是值3的那个count变量。
  3. 接着我们执行完步骤3,在我们加到5的过程中,函数又被重新执行了两次,又重复定义了count、handleAlertClick,但跟第一、二次一样,都没有意义,当3s计时器结束时,这个被setTimeout推入宏任务队列的函数内部携带的,其实是值为3的count,所以就输出了3。

我不知道是否讲解的足够清晰,假设读者已经充分理解的情况下,我们可以看到,这整个过程的解释逻辑本质上跟react的关系不大,完全就是一些函数的基础知识,这也是我提到:如果组件即函数,那么关于函数的基础知识在组件里就仍然适用这句话的原因。

所以,我对函数式组件的理解就是:React的设计哲学就是希望用函数来描述组件,让组件编写的心智模型跟编写JavaScript函数时的心智模型统一,减少开发者的心智负担,所以我喜欢这个设计。这跟hooks是没有关系的,你把上例中的useState抠掉,这个组件顶多就是没有办法记录状态,退化为"无状态"而已,这种"函数即组件"的设计哲学仍然成立,实际上,在hooks出现之前,函数式组件就是被普遍称为"无状态组件"的。

转载自:https://juejin.cn/post/7216631742085431351
评论
请登录