【React】后台开发学前端 04 - React组件02

本文链接：https://blog.youkuaiyun.com/goalietang/article/details/133031810

上一章：【React】后台开发学前端 04 - React组件01 - JSX, 类组件

前言

用单独一个篇幅来介绍React所推荐的函数式组件，是因为在版本16以后，有了hooks函数后，函数组件完全可以替代类组件做任何事情。而且写法优雅，并且强调一下，是React推荐的方式。

虽然这种Javascript里面的function的写法对后端开发来说很不友好。而且相比较来说类组件做起来更面向对象，对于后端开发更容易理解一些。但是自从我接触了函数式组件依赖，我渐渐喜欢上了这种简单明了的写法。介绍函数组件之前，先说说它和类组件的大致区别：

区别	函数组件	类式组件
是否有 this	没有	有
是否有生命周期	没有	有
是否有状态 state	没有	有
编写形式	函数形式	类形式

所以说函数式组件是静态组件。是一个三无产品（没有this没有生命周期没有state）

而我们说过，类组件被称作动态组件。（有所有支持其能够动态的因子）

静态函数组件

抛开支持其“动起来”的那些个东西，其实写一个静态的函数组件他其实特别的简单

export default function App() {
  return (
    <>
      <h1>Hello, World！</h1>
      <ul>
        <li>first</li>
        <li>second</li>
        <li>thrid</li>
      </ul>
      <button key='123'>Button</button>
    </>
  );
}

看看上面，这是一个叫做App的组件，他由“export default”来导出，便于其他组件import使用。

他是一个函数式组件。里面有一个return，包含了一个标题，一套列表和一个按钮。

特别注意的是，他的返回跟类组件返回一样，要求只能是一个节点，所以要嘛就用一个<div>标签作为输出单节点标签，要嘛就用我上图的<></>的空标签来包住要返回的多标签来返回。

最后渲染到页面的如下：

具体聊聊函数和类组件的区别

这个话题真的对我们后端开发学习前端来说挺重要的。为什么放着根后台java相似的类组件不用，就要去用函数主键来搞。

其实在React16以前，函数组件真的不被看好的。因为就一个只能写静态页面的主键，除了那些动不了的页面，只用作纯展示的页面，单反遇到一个可以互动的页面，可以动态渲染的页面，函数组件都没有用武之地。但是在React16以后，引入了一个爆炸式的东西，就是各种Hooks函数，配合这些Hooks函数用函数式组件编程不要太爽。(Hooks的学习我们放在后面)

我们来了了为什么有了类组件，React还要推行函数组件，首先抛开hooks函数对函数组件的影响我们来具体的分析class和function组件两者区别：

class组件是有状态的组件，可以定义state状态。函数组件是无状态的。
class组件有生命周期。函数组件没有生命周期，函数组件使用的是Hooks。
class组件是有this对象的。函数组件没有this对象。
组件调用：class组件实例化后调用render方式调用。函数组件是直接调用的。
class组件内部render方法return返回渲染jsx模板。函数组件直接返回即可。
ref获取子组件的对象。class组件可以直接获取到，函数组件无法直接获取到。
绑定bind改变this指向，只适用于class组件。

根据上面的区别，然后我们来谈谈为什么React要推行函数组件，首先来说是优雅，但是fb团队花那么大的力气，拽着整个React社区往一个前所未有的方向前进，原因肯定不仅仅是“写法更优雅”。真正的原因可能如下面描述：

Hooks是比HOC和render props更优雅的逻辑复用方式。这个是很多人喊“真香”的原因。优雅的逻辑复用方式，会促进一个更加蓬勃的生态，这对于原本生态就很强的React来说是如虎添翼。会有更多的人愿意把自己的逻辑抽离成hooks（因为真的太优雅了），发布为library，为react生态添砖加瓦（看看这段时间各种基于hooks的状态管理工具）。我还认为，很快会出现一些“hooks生态圈”的“lodash”。
函数式组件的心智模型更加“声明式”。hooks（主要是useEffect）取代了生命周期的概念（减少API），让开发者的代码更加“声明化”：

旧的思维：“我在这个生命周期要检查props.A和state.B（props和state），如果改变的话就触发xxx副作用”。这种思维在后续修改逻辑的时候很容易漏掉检查项，造成bug。
新的思维：“我的组件有xxx这个副作用，这个副作用依赖的数据是props.A和state.B”。从过去的命令式转变成了声明式编程。
其实仔细想一想，人们过去使用生命周期不就是为了判断执行副作用的时机吗？现在hooks直接给你一个声明副作用的API，使得生命周期变成了一个“底层概念”，无需开发者考虑。开发者工作在更高的抽象层次上了。
类似的道理，除了声明副作用的API，react还提供了声明“密集计算”的API（useMemo），取代了过去“在生命周期做dirty检查，将计算结果缓存在state里”的做法。React内核帮你维护缓存，你只需要声明数据的计算逻辑以及数据的依赖。

3. 函数式组件的心智模型更加“函数式”。为未来的并发模式打下基础。（其实react从一开始就受到了很多函数式编程的影响，现在推行函数式组件算是“回归初心”）。