资讯专栏INFORMATION COLUMN

React Hook起飞指南

姘搁『 / 2339人阅读

摘要:起飞指南作者元潇方凳雅集出品目前放出来了个内置,但仅仅基于以下两个,就能做很多事情。行代码实现一个全局元潇根组件挂上即可子组件调用随时随地实现一个局部元潇的本质是的一个语法糖,感兴趣可以阅读一下的类型定义和实现。

React Hook起飞指南

作者:元潇 方凳雅集出品

16.8目前放出来了10个内置hook,但仅仅基于以下两个API,就能做很多事情。所以这篇文章不会讲很多API,也不会讲API的基本用法,只把这两个能做的事情讲清楚,阅读全文大概5-10分钟。

状态管理:useState

副作用管理:useEffect

这两个api就是hook世界里的镰刀和锤子,看似简单的两个api实际上所代表的,是相比以前截然不同的一种新的编程模型。

前言:已经有了class component,为什么又来了一个hook?

Dan在他的博客上提到:

我们知道组件和自上而下的数据流可以帮助我们将大型UI组织成小型,独立,可重用的部分。 但是,我们经常无法进一步破坏复杂组件,因为逻辑是有状态的,无法提取到函数或其他组件中。而hook让我们可以将组件内部的逻辑组织成可重用的隔离单元。

所以,一句话总结hook带来的变革就是:将可复用的最小单元从组件层面进一步细化到逻辑层面。

基于这一点优势,在后面我们看可以看到,基于hook开发的应用里的所有组件都不会随业务增长而变得臃肿,因为在hook的世界里,状态逻辑和UI是解耦的。UI只需要消费最终计算出来的状态数据,hook只关注状态的计算和改变。

一、有状态的函数

useState组件是有状态的:

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }
  render() {
    return (
      

You clicked {this.state.count} times

); } }

函数是无状态的:

const Example = props => {
  const { count, onClick } = props;
  return (
    

You clicked {count} times

); }

hooks是有状态的函数:

import { useState } from "react";
const Example = () => {
    const [count, setCount] = useState(0);
    return (
      

You clicked {count} times

); }

Think: useState生产出来的setter在更新state的时候不会合并,这点不同于传统class组件的setState方法,为什么这样设计?

// Don"t do such like this ↓
const [data, setData] = useState({ count: 0, name: "zby" });
useEffect(() => {
  // data: { count: 0, name: "zby" } -> { count: 0 }
  setData({ count: 1 });
}, []);

我们的应用都是从小到大发展起来的,初始充分的组件划分和状态设计是保证应用后续可维护性的重要一环,因为随着应用的扩增,组件难免变得臃肿。所以有时我们也从一开始就一步到位引入redux之类的状态管理。

但现在,在我们的“纯函数”组件里,每个useState都会生产出一对儿state和stateSetter,我们无需考虑更多的状态树的设计和组件的划分设计,逻辑代码直接从根组件写起,渐进式开发变得可行

所谓“渐进式”开发:概括应用的发展路径大致可以分为以下3个阶段:

1. 前期farm:
只需要把相关 state 组合到几个独立的 state 变量即可应付绝大多数情况;

2.中期gank:当组件的状态逐渐变得多起来时,我们可以很轻松地将状态的更新交给reducer来管理(详情在下文第二章展开);

3.大后期团战:不光状态多了,状态的逻辑也越来越复杂的时候,我们可以几乎0成本的将繁杂的状态逻辑代码抽离成自定义hook解决问题(详情在下文第三章展开);

基于hook,我们的开发过程,变得比以往更有弹性。所以这样的渐进式的开发变得可行且高效。

二、 高度灵活的redux,纯粹、无依赖

上文说道,当组件的状态逐渐变得多起来时,我们可以很自然的将状态的更新交给reducer来管理。

不同于真正的redux,在实际应用中,hook带来了一种更加灵活和纯粹的模式。现在我们可以用10行代码实现一个全局的redux,也可以用2行代码随时随地实现一个局部的redux。

A:10行代码实现一个全局redux:

import React from "react";
const store = React.createContext(null);
export const initialState = { name: "元潇" };
export function reducer(state, action) {
  switch (action.type) {
    case "changeName": return { ...state, name: action.payload };
    default: throw new Error("Unexpected action");
  }
}
export default store;

Provider根组件挂上即可

import React, { useReducer } from "react";
import store, { reducer, initialState } from "./store";
function App() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
     
      
) }

子组件调用

import React, { useContext } from "react";
import store from "./store";
function Child() {
  const { state, dispatch } = useContext(store);
  ...
}

B:随时随地实现一个局部redux

import React, { useReducer } from "react";
const initialState = { name: "元潇" };
function reducer(state, action) {
  switch (action.type) {
    case "changeName": return { ...state, name: action.payload };
    default: throw new Error("Unexpected action");
  }
}
function Component() {
  const [state, dispatch] = useReducer(reducer, initialState);
  ...
}

useState的本质是useReducer的一个语法糖,感兴趣可以阅读一下hooks的类型定义和实现。

三、自定义hook

上上文说道,当组件发展到一定程度,不光是状态多了,状态的逻辑也越来越复杂的时候,我们可以几乎0成本的将繁杂的状态逻辑代码抽离成自定义hook解决问题。

当我们想在两个函数之间共享逻辑时,我们会把它提取到第三个函数中。而组件和 hook 都是函数,所以也同样适用这种方式。不同的是,hook 是有状态的函数,它能实现以往纯函数所不能做到的更高级别的复用——状态逻辑的复用。

且先看下面两个demo示例

A:class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
      name: undefined
    };
  }
  componentDidMount() {
    service.getInitialCount().then(data => {
      this.setState({ count: data });
    });
    service.getInitialName().then(data => {
      this.setState({ name: data });
    });
  }
  componentWillUnmount() {
    service.finishCounting().then(() => {
      alert("计数完成");
    });
  }
  addCount = () => {
    this.setState({ count: this.state.count + 1 });
  };
  handleNameChange = name => {
    this.setState({ name });
  };
  render() {
    const { count, name } = this.state;
    return (
      

You clicked {count} times

); } }
B:function useCount(initialValue) {
  const [count, setCount] = useState(initialValue);
  useEffect(() => {
    service.getInitialCount().then(data => {
      setCount(data);
    });
    return () => {
      service.finishCounting().then(() => {
        alert("计数完成");
      });
    };
  }, []);
  function addCount() {
    setCount(c => c + 1);
  }
  return { count, addCount };
}
function useName(initialValue) {
  const [name, setName] = useState(initialValue);
  useEffect(() => {
    service.getInitialName().then(data => {
      setName(data);
    });
  }, []);
  function handleNameChange(value) {
    setName(value);
  }
  return { name, handleNameChange };
}
const App = () => {
  const { count, addCount } = useCount(0);
  const { name, setName } = useName();
  return (
    

You clicked {count} times

); };

A有2个状态:count和name,还有与之相关的一票儿逻辑,散落在组件的生命周期和方法里。虽然我们可以将组件的state和变更action抽成公共的,但涉及到副作用的action,到最终还是绕不开组件的生命周期。但一个组件的生命周期只有一套,不可避免的会出现一些完全不相干的逻辑写在一起。如此一来,便无法实现完全的状态逻辑复用。

在B中,我们将count相关的逻辑和name相关的逻辑通过自定义hook,封装在独立且封闭的逻辑单元里。以往class组件的生命周期在这里不复存在。生命周期是和UI强耦合的一个概念,虽然易于理解,但它天然距离数据很遥远。而hook以一种类似rxjs模式的数据流订阅实现了组件的副作用封装,这样的好处就是我们只需要关心数据。所以hook所带来的,绝不仅仅只是简化了state的定义与包装。

这个动画,很好的展示了A->B前后相关联的状态逻辑的组织方式变化。

业务实战记录:

这是一个商品详情页用到的SKU选择组件

我们使用hook将原有的class组件进行重构,这个重构的过程就是一个状态逻辑的抽取过程。

我们将组件核心的2个状态和相关的逻辑,抽到了2个独立的自定义hook中(见下图)。这样做的好处很明显,我们的组件只需要去消费这两个hook产出的value和function,状态的维护和更新细节,已经被封装在hook里。

const { specPath, handleSpecPathChange } = useSkuSpecPath({
    defaultSpecPath,
    dataSource
  });
const { skus, handleSkuAmountChange } = useSkuAmount({
  defaultSelectedSkus,
  dataSource
});

在这里提出一个自定义hook的设计范式:

const { state, handleChange, others } = useCustomHook(config, dependency?);

其中config声明了hook所需要的数据,可能是内部useState的初始值,也可能是结构化的数据,总结起来就是这个hook的配置

dependency通常只有hook内使用了useEffect、useCallback这类API,需要我们声明依赖的时候需要传入。

左边是重构后的代码(脱敏代码,领会精神就好),原先核心的通用逻辑被抽到useSkuSpecPath和useSkuAmount这两个hook里后,这个组件变成了它们的调用方。后续不管UI组件如何变化和扩展,只要符合它们的接口格式约定,就可以随时随地地复用这些逻辑,很快地实现一个新的sku选择组件。

总结:自定义hook实现了状态逻辑与UI分离,通过合理抽象自定义hook,能够实现非常高级别的业务逻辑抽象复用。

推荐一个网站,里面收集了一些有意思的自定义hook

四、未来引用Dan的一句话:
hook可以涵盖class组件的所有使用场景,同时在抽取、测试和重用代码方面提供了更大的灵活性。这就是为什么Hooks代表了我们对React未来的愿景。

react16.8以上的应用里,大家可以立马用起来了。

彩蛋

hook原理: Not magic,just array

let hooks, i;
function useState() {
  i++;
  if (hooks[i]) {
    // 再次渲染时
    return hooks[i];
  }
  // 第一次渲染
  hooks.push(...);
}
// 准备渲染
i = -1;
hooks = fiber.hooks || [];
// 调用组件
Component();
// 缓存 Hooks 的状态
fiber.hooks = hooks;

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/106775.html

相关文章

  • React Hook 不完全指南

    摘要:使用完成副作用操作,赋值给的函数会在组件渲染到屏幕之后。如此很容易产生,并且导致逻辑不一致。同时,这也是很多人将与状态管理库结合使用的原因之一。当我们通过的第二个数组类型参数,指明当前的依赖,就能避免不相关的执行开销了。 前言 本文内容大部分参考了 overreacted.io 博客一文,同时结合 React Hook 官方 文章,整理并归纳一些笔记和输出个人的一些理解 什么是 Hoo...

    Lin_R 评论0 收藏0
  • 盘点 9 月份 yyds 的开源项目

    摘要:地址励志计算机教程励志要成为一名谷歌软件工程师,但没有专业背景的他,只能通过自己的努力来达成理想。最终,虽然没有去谷歌,但他人到中年,还顺利成为了一名亚马逊的技术专家,年薪百万。 本文盘点 8 月份 GitHub 上 Star 数攀升最快的开源项目,他们分别是: 1. GitHub 排...

    Cheng_Gang 评论0 收藏0
  • React教程:组件,Hooks和性能

    摘要:顾名思义,受控组件的值由控制,能为与用户交互的元素提供值,而不受控制的元素不获取值属性。另外我发现受控组件更容易理解和于使用。只是一种把组件作为参数的函数,并且与没有包装器的组件相比,能够返回具有扩展功能的新组件。其中三个基本的是,和。 翻译:疯狂的技术宅原文:https://www.toptal.com/react/... 本文首发微信公众号:jingchengyideng欢迎关...

    edagarli 评论0 收藏0
  • 理解 React Hooks 的 Capture Value 特性

    摘要:在读了一些文章后,大致是找到自己总是掉坑的原因了没理解中的特性。通过这个示例,相信会比较容易地理解特性,并如何使用来暂时绕过它。在知道并理解这个特性后,有助于进一步熟悉了的运行机制,减少掉坑的次数。 由于刚使用 React hooks 不久,对它的脾气还拿捏不准,掉了很多次坑;这里的 坑 的意思并不是说 React hooks 的设计有问题,而是我在使用的时候,因为还没有跟上它的理念导...

    curlyCheng 评论0 收藏0
  • 精益 React 学习指南 (Lean React)- 1.3 React 组件

    摘要:无状态组件除了可以通过来创建组件以外,组件也可以通过一个普通的函数定义,函数的返回值为组件渲染的结果。这就是为什么要有属性,属性能够帮助定位与数组元素的关系,在重渲染的时候能够实现渲染优化。 书籍完整目录 1.3 React 组件 showImg(https://segmentfault.com/img/bVvLOW); 1.3.1 React 组件介绍 在 React 中组件是第一元...

    cyrils 评论0 收藏0

发表评论

0条评论

姘搁『

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<