看 react hooks 项目看不懂 是不是证明基础不够，先补补 js 基础
shilianmlxg · 2021-07-07 20:39:05 +08:00 · 3139 次点击这是一个创建于 1234 天前的主题，其中的信息可能已经有所发展或是发生改变。
看到一些 vue3.0 composition api 的组件 和 react 的 hooks 组件 都觉得有点晕，扯不清。
是不是 js 基础不彳亍。
以前没系统学过 js
现在听一个大佬的 看《 JavaScript 设计模式与开发实践》
但是看到张鑫旭的 10 问 10 答，说的前端入门级别码农，不看继承一样风生水起，直接 跳过，因为在这个阶段你看不懂。
是不是 js 基础不彳亍。
以前没系统学过 js
现在听一个大佬的 看《 JavaScript 设计模式与开发实践》
但是看到张鑫旭的 10 问 10 答，说的前端入门级别码农，不看继承一样风生水起，直接 跳过，因为在这个阶段你看不懂。
 |
1
find456789 2021-07-07 20:42:36 +08:00
学下 es6+ 就差不多了， 京东买几本新的书，别看 10 年前的老书
设计模式 和语言是不一样的， |
 |
2
shilianmlxg OP @find456789 请问下大佬 阮一峰的 es6 感觉有些晦涩难懂 请问有推荐 es6 相关的书籍📚嘛
|
 |
3
renmu123 2021-07-07 21:16:30 +08:00 via Android
阮一峰的书很容易读了，现在都是用 class 了，不用老一套的继承了。
你看不懂是因为你写的代码太小，多写一点理解会深很多 |
|
4
find456789 2021-07-07 21:18:00 +08:00
@shilianmlxg
我也是 js 新手， 至少买 2 本不同作者的书， 然后结合网上一些文章， 来看， 因为不同作者 对同一个知识点，聊的深度不一样，角度也不一样， 可能 a 作者的聊法 你听不懂， 但 b 作者的聊法你可以秒懂， 所以 要多看一些不同人输出的知识 具体我也没有什么书推荐，我基本都是看网上一些人分享的知识碎片， 或者连载文章 ， 阮一峰的 es6 我也看过 你先把书硬着头皮看一次，代码跟着输入一次， 然后就实战，遇到不懂，就查书，差资料 我也不知道我这样的方法是否科学 |
 |
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 是真的好用。 |
 |
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，也就是知道有这么个东西，从来没用过，用到再细看吧 |
|
7
Leviathann 2021-07-07 21:56:38 +08:00
@Leviathann 哦 忘了 lambda 也是 es6 的，我现在基本都不写 function 都是写 lambda，去 tm 的瞎 jb 指的 this
|
|
8
shilianmlxg OP @find456789 谢谢大佬，你把我心里想的通过语言组织说出来了。别人都是刷题，我是要刷知识点我才能懂。谢谢大佬解惑
|
|
9
shilianmlxg OP @towry 请问大佬 需要先补充哪些知识点呢，看慕课网的 vue3 教程或者 react hooks 教程 感觉跳跃太快跟不上，说到底还是基础薄弱
|
|
10
shilianmlxg OP @Leviathann 请问大佬 lambda 就是大家口中的箭头函数嘛 是不是类似于
get2 = diameter => Math.PI * diameter 这种啊 这种属于函数柯里化还是属于高阶函数呢 |
 |
11
mxalbert1996 2021-07-07 23:18:02 +08:00 via Android
Hooks 是一种设计模式，或者说是一种（声明式编程的）思想，跟具体的语言其实没太大关系。Dart 写的 Flutter 和 Kotlin 写的 Jetpack Compose 里都有类似的概念。关键还是要理解这种思想。
|
|
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 函数吧 |
 |
13
Yvette 2021-07-08 08:00:50 +08:00
JS 基础可以看看 JavaScript: Understanding the Weird Parts 这个课，个人觉得讲得很不错。这里有试听版
|
 |
14
xarthur 2021-07-08 10:08:18 +08:00 via iPhone
React 的 Hook 和 JS 基础其实没什么关系……
|
|
15
shilianmlxg OP |
 |
16
ianva 2021-07-08 13:37:52 +08:00
其实很简单，我们先了解 react 组件是如何运行的，
react 组件的本质，就是一个当满足触发条件后，执行一个函数，该函数根据输入的参数返回一个值。 如果仅仅如此，这就是一个纯函数，但是 react 组件不仅仅如此，比如它还需要处理自身上下文的状态也就是 state，用 state 去记录一个 local 的数据，独立于传入的参数 props，这就需要引入全局的变量去做这件事。 我们简单实现两个 hooks，并模拟一个 react 组件，应该大概就明白啥意思了  |
|
17
ianva 2021-07-08 13:41:52 +08:00
当然真实的 react 组件和 hooks 比这要复杂很多，比如 state 的变化会让组件重新渲染等等，但是本质是在一个永远根据 props 运行的函数中通过全局变量存储本地状态数据的过程。
|
 |
18
violetlai 2021-07-08 14:48:04 +08:00
看不懂就写 照着写 跟别人写 看视频写 多写多用在看就会了
|
|
19
shilianmlxg OP @ianva 谢谢大佬 这 demo 我都看起来感觉有点吃力。
|
 |
20
XTTX 2021-08-05 15:54:09 +08:00
如果英语可以， 看看 react-trainning 的 react hooks 的学习视频。 纯粹 reacthooks 里最好的教学。没有之一
|
Select Language