React Hooks与代数效应的羁绊

花开花落花中妖
160 阅读3分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第8天，点击查看活动详情

前言

现在搞技术的越来越卷了，简直不给我这种懒货留活路。长江后浪推前浪，多少懒货死在沙滩上呀。

image.png

面对材米油盐的绞杀，扶我起来，我还能坚持一会。这不刚开始了解一下React Hooks的设计理念，一个暴击就直击我的天灵盖，给我雷的淬不及防，差点再次躺平。

代数效应，瞬间疑问三连。

什么玩意？

没听过，有用吗？

关React Hooks什么鸟关系？

开场

有关这个陌生却又神奇的东西，你且听我娓娓道来。

代数效应是函数式编程中的一个概念，用于将副作用从函数调用中分离。

Algebraic effect handlers, are recently gaining in popularity as a purely functional approach to modeling effects. In this article, we give an end-to-end overview of practical algebraic effects in the context of a compiled implementation in the Koka languag

据说，React的开发团队使用代数效应作为心智模型，用来指导React的开发工作。

这么神奇，那我学会了，岂不是瞬间起飞？

我&*……%￥#。这群大佬们搞的东西就是高端，我花费了一点时间研究了一下，越看越糊涂，属实是不知所云。幸好，如果只是想要了解React Hooks，不需要彻底搞明白这个东西。

例子

这里我就借鉴一下我看到的一篇文章中的例子来阐述一下这个代数效应和React Hooks的关系。

假设，我们有这么一个场景，我们要计算一个学生的考试成绩（不同的学科的权重不同）。

function getStudentScore(id) {
    const subjectA = getSubjectScore(id);
    const subjectB = getSubjectScore(id);
    
    return subjectA + subjectB;
}

在这方法中，我们并不关注getSubjectAScore中发生了什么，只关注学科的成绩。但是，有个不好的情况是，每一个科目的成绩计算是异步的，为了获取到这个学科的权重的成绩，我们需要先请求服务端获取到成绩，然后乘以权重。

这种情况，我们实际开发过程中，通常是使用async和await来解决异步的问题。

但是，async这个东西具有传染性，一旦一个方法使用了之后，后续依赖于这个函数的结果的函数都需要使用async或者promise.then来解决。

这时候，我们的主角就出场了。假设我们有一个神奇的语法糖try handle，它提供了两个神奇的操作符——perform、resume。假设通过perform，我们可以从一个线程切换到另一个线程，而handle可以捕获这种切换，并且可以接收到携带的参数，然后可以通过resume来将结果通知到原始线程。

伪代码大致如下：

function getSubjectScore(id) {
    const sorce = perform id;
    
    return sorce;
}

try {
    getStudentScore(1);
} handle {
    resume with 560;
}

到这里，是不是感觉跟hook的逻辑很像了？哈哈哈，如果还不是很清楚，我们再来进一步转化一下看看

function useSubjectScore(id) {
    const [score, setScore] = useState(0);
    
    useEffect(() => {
        fetch(...)
            .then(score => setScore(score));
    }, [id]);
    
    reutrn score;
}

还是不太清楚？我们再来转化一下使用的地方，相信看完之后就秒懂了。

function StudentScore (props) {
    const subjectScore = useSubjectScore(props.id);
    
    return (
        <div>{subjectScore}<div>
    )
}

落幕

万万没想到啊，我只是单纯的想要了解一下React Hooks的源码，竟然还牵扯到了心智模型。好在这不是我前进路上必须攻克的高点，只需要简单了解即可。这里分享一下我的学习笔记，希望大家有所帮助，也欢迎大家在下方留言讨论。

avatar
文章
阅读
粉丝