React怎么做组件化开发

一、背景

React从诞生以来就备受关注。移动端方面，React-Native虽然一直都处于0.xx.xx版本，但发展迅速。下面是2017年前端框架使用情况，图片引用自stateofjs

React不是以传统样式、行为、结构分层来组织代码的，而是以Component作为分割单位，因此组件化开发无疑是一个顺其自然之举。

二、直观的组件分类

项目中，我们常常遇到一个问题：这个组件是否应该connect redux，或者只是一个纯UI组件？如何更好地定义分割组件的粒度，以达到快、好、省地开发？

可以先读读Redux作者Dan在2015年写的这篇关于组件的文章：
《展示类组件与容器组件》

2015年的他认为可以简单地把组件分为：

纯展示类(外貌协会的，只负责UI，更关心长成什么样)
容器类(靠脑子的组织者，一般不直接包含UI，而是内部再包着纯展示类或容器类组件，更关心怎么工作的)

然而，Dan在2019年在文章里补充了以下内容：

Update from 2019: I wrote this article a long time ago and my views have since evolved. In particular, I don’t suggest splitting your components like this anymore. If you find it natural in your codebase, this pattern can be handy. But I’ve seen it enforced without any necessity and with almost dogmatic fervor far too many times. The main reason I found it useful was because it let me separate complex stateful logic from other aspects of the component. Hooks let me do the same thing without an arbitrary division. This text is left intact for historical reasons but don’t take it too seriously.

大致的意思就是，"之前的方法不好，别用了，哥们，改用Hooks吧"
好吧！还有这种操作...

三、Hooks是什么？

Hooks 是React 16.8新增的一个功能，目的是可以提取组件的逻辑，转换成可复用的函数。
下面是一段简单的用了useState Hook的代码，体验一下：

import React, { useState, useEffect } from 'react';

function FriendStatus(props) {
  const [isOnline, setIsOnline] = useState(null);

  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }

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

  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}

这是一段对外暴露'好友在线状态'(FriendStatus)的函数。
传统的class extends Component中，我们需要:

把isOnline放在state中，
通过this.state.isOnline来读取，
通过setState({ isOnline: true/false })来改变状态。

而Hooks就能很清晰地用useState把这两个行为放在一起，类似Java Bean的getter和setter一样简单。

Hooks使逻辑更加清晰。在绑定和移除监听函数时，还可以写在一起，提高了代码的可读性。移动端方面，React Hooks也将作为React Native 0.59的一部分发布，赶快耍起来吧。
如果要详细了解，请移步：Hooks 介绍(官网)

四、组件设计原则

当然了，不管官方给出多少新特性，经典的设计原则几乎是通用的，比如在设计组件时：

单一功能：不要让你的组件做太多事
扁平化的数据结构：Array+Object不要嵌套太深
更加纯粹的 State 变化：State变化应该符合逻辑
低耦合：组件应该独立自主，不应该太'亲密'，互相依赖不好
集中/统一的状态管理：不要把数据零散地存取在多处

这里推荐这篇React官网的文章：React 哲学

最后编辑于：2019.03.05 20:24:52