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

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

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

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

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

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

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

    我也不知道我这样的方法是否科学
    towry
        5
    towry   110 天前
    如果看不懂,说明你了解的相关知识比较少。

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

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

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

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

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

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