V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
shilianmlxg
V2EX  ›  React

看 react hooks 项目看不懂 是不是证明基础不够,先补补 js 基础

  •  
  •   shilianmlxg · 2021-07-07 20:39:05 +08:00 · 3140 次点击
    这是一个创建于 1235 天前的主题,其中的信息可能已经有所发展或是发生改变。
    看到一些 vue3.0 composition api 的组件 和 react 的 hooks 组件 都觉得有点晕,扯不清。
    是不是 js 基础不彳亍。
    以前没系统学过 js
    现在听一个大佬的 看《 JavaScript 设计模式与开发实践》
    但是看到张鑫旭的 10 问 10 答,说的前端入门级别码农,不看继承一样风生水起,直接 跳过,因为在这个阶段你看不懂。
    20 条回复    2021-08-05 15:54:09 +08:00
    find456789
        1
    find456789  
       2021-07-07 20:42:36 +08:00
    学下 es6+ 就差不多了, 京东买几本新的书,别看 10 年前的老书

    设计模式 和语言是不一样的,
    shilianmlxg
        2
    shilianmlxg  
    OP
       2021-07-07 21:00:34 +08:00
    @find456789 请问下大佬 阮一峰的 es6 感觉有些晦涩难懂 请问有推荐 es6 相关的书籍📚嘛
    renmu123
        3
    renmu123  
       2021-07-07 21:16:30 +08:00 via Android
    阮一峰的书很容易读了,现在都是用 class 了,不用老一套的继承了。
    你看不懂是因为你写的代码太小,多写一点理解会深很多
    find456789
        4
    find456789  
       2021-07-07 21:18:00 +08:00
    @shilianmlxg

    我也是 js 新手, 至少买 2 本不同作者的书, 然后结合网上一些文章, 来看, 因为不同作者 对同一个知识点,聊的深度不一样,角度也不一样, 可能 a 作者的聊法 你听不懂, 但 b 作者的聊法你可以秒懂, 所以 要多看一些不同人输出的知识

    具体我也没有什么书推荐,我基本都是看网上一些人分享的知识碎片, 或者连载文章 , 阮一峰的 es6 我也看过

    你先把书硬着头皮看一次,代码跟着输入一次, 然后就实战,遇到不懂,就查书,差资料

    我也不知道我这样的方法是否科学
    towry
        5
    towry  
       2021-07-07 21:39:01 +08:00
    如果看不懂,说明你了解的相关知识比较少。

    1. rect 为什么要引入 hooks 模式。( react 文档有说明,vue3 也有,其实 vue3 就是参考 react 的, https://v3.cn.vuejs.org/guide/composition-api-introduction.html#%E4%BB%80%E4%B9%88%E6%98%AF%E7%BB%84%E5%90%88%E5%BC%8F-api )。
    2. hooks 是怎么工作的?原理是什么?比如你用 useState,react 是怎么将这个 state 和 这个 state 所处的 function 组件关联起来的?

    明白这两点,你会发现 hooks 是真的好用。
    Leviathann
        6
    Leviathann  
       2021-07-07 21:49:31 +08:00
    写业务的话
    es6 用的最多的就是解构赋值和...操作符,新增的几个 array 方法,promise.then.catch.finally.all ,能 const 就 const,不能就 let,await = await 以下的内容都写在 promise.then 里
    至于继承? react 或者各种现代语言的精神就是组合优于继承
    别的什么 generator,symbol,proxy,也就是知道有这么个东西,从来没用过,用到再细看吧
    Leviathann
        7
    Leviathann  
       2021-07-07 21:56:38 +08:00
    @Leviathann 哦 忘了 lambda 也是 es6 的,我现在基本都不写 function 都是写 lambda,去 tm 的瞎 jb 指的 this
    shilianmlxg
        8
    shilianmlxg  
    OP
       2021-07-07 22:08:18 +08:00
    @find456789 谢谢大佬,你把我心里想的通过语言组织说出来了。别人都是刷题,我是要刷知识点我才能懂。谢谢大佬解惑
    shilianmlxg
        9
    shilianmlxg  
    OP
       2021-07-07 22:10:31 +08:00
    @towry 请问大佬 需要先补充哪些知识点呢,看慕课网的 vue3 教程或者 react hooks 教程 感觉跳跃太快跟不上,说到底还是基础薄弱
    shilianmlxg
        10
    shilianmlxg  
    OP
       2021-07-07 22:12:00 +08:00
    @Leviathann 请问大佬 lambda 就是大家口中的箭头函数嘛 是不是类似于
    get2 = diameter => Math.PI * diameter
    这种啊 这种属于函数柯里化还是属于高阶函数呢
    mxalbert1996
        11
    mxalbert1996  
       2021-07-07 23:18:02 +08:00 via Android
    Hooks 是一种设计模式,或者说是一种(声明式编程的)思想,跟具体的语言其实没太大关系。Dart 写的 Flutter 和 Kotlin 写的 Jetpack Compose 里都有类似的概念。关键还是要理解这种思想。
    Leviathann
        12
    Leviathann  
       2021-07-08 00:53:01 +08:00
    @shilianmlxg 柯里化是把一个多参数函数变成每次传一个参数返回一个函数,直到传到最后一个参数再最终执行函数
    比如 (a, b) => a + b 改成 (a) => (b) => a + b 就是柯里化,我一般是利用它闭包的特性从不同的作用域依次传入 a 和 b 两个参数
    高阶函数是参数和返回值可能是函数的函数,比如 map 、filter 都是高阶函数,因为参数都是一个函数,还有柯里化之后除了最后一次调用,之前每次调用都返回一个函数,所以也是高阶函数

    这个 get2 是啥,如果是 const get2 = diameter => Math.PI * diameter 那就是一个普通的 lambda 函数吧
    Yvette
        13
    Yvette  
       2021-07-08 08:00:50 +08:00
    JS 基础可以看看 JavaScript: Understanding the Weird Parts 这个课,个人觉得讲得很不错。这里有试听版
    xarthur
        14
    xarthur  
       2021-07-08 10:08:18 +08:00 via iPhone
    React 的 Hook 和 JS 基础其实没什么关系……
    shilianmlxg
        15
    shilianmlxg  
    OP
       2021-07-08 11:09:00 +08:00
    @xarthur 请问下大佬 看不懂 hooks 需要看哪些需要掌握的东西呢
    比如你完成一个主线任务的前提,是要达成这个主线的支线任务
    那么 hooks 相关的支线任务是哪些呢
    ianva
        16
    ianva  
       2021-07-08 13:37:52 +08:00
    其实很简单,我们先了解 react 组件是如何运行的,

    react 组件的本质,就是一个当满足触发条件后,执行一个函数,该函数根据输入的参数返回一个值。

    如果仅仅如此,这就是一个纯函数,但是 react 组件不仅仅如此,比如它还需要处理自身上下文的状态也就是 state,用 state 去记录一个 local 的数据,独立于传入的参数 props,这就需要引入全局的变量去做这件事。

    我们简单实现两个 hooks,并模拟一个 react 组件,应该大概就明白啥意思了

    ianva
        17
    ianva  
       2021-07-08 13:41:52 +08:00
    当然真实的 react 组件和 hooks 比这要复杂很多,比如 state 的变化会让组件重新渲染等等,但是本质是在一个永远根据 props 运行的函数中通过全局变量存储本地状态数据的过程。
    violetlai
        18
    violetlai  
       2021-07-08 14:48:04 +08:00
    看不懂就写 照着写 跟别人写 看视频写 多写多用在看就会了
    shilianmlxg
        19
    shilianmlxg  
    OP
       2021-07-08 15:26:18 +08:00
    @ianva 谢谢大佬 这 demo 我都看起来感觉有点吃力。
    XTTX
        20
    XTTX  
       2021-08-05 15:54:09 +08:00
    如果英语可以, 看看 react-trainning 的 react hooks 的学习视频。 纯粹 reacthooks 里最好的教学。没有之一
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2734 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 14:54 · PVG 22:54 · LAX 06:54 · JFK 09:54
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.