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

[shilianmlxg]

看到一些 vue3.0 composition api 的组件 和 react 的 hooks 组件 都觉得有点晕，扯不清。
是不是 js 基础不彳亍。
以前没系统学过 js
现在听一个大佬的 看《 JavaScript 设计模式与开发实践》
但是看到张鑫旭的 10 问 10 答，说的前端入门级别码农，不看继承一样风生水起，直接 跳过，因为在这个阶段你看不懂。

[find456789]

学下 es6+ 就差不多了， 京东买几本新的书，别看 10 年前的老书

设计模式 和语言是不一样的，

[shilianmlxg]

@find456789 请问下大佬 阮一峰的 es6 感觉有些晦涩难懂 请问有推荐 es6 相关的书籍📚嘛

[renmu123]

阮一峰的书很容易读了，现在都是用 class 了，不用老一套的继承了。
你看不懂是因为你写的代码太小，多写一点理解会深很多

[find456789]

@shilianmlxg

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

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

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

我也不知道我这样的方法是否科学

[towry]

如果看不懂，说明你了解的相关知识比较少。

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]

写业务的话
es6 用的最多的就是解构赋值和...操作符，新增的几个 array 方法，promise.then.catch.finally.all ，能 const 就 const，不能就 let，await = await 以下的内容都写在 promise.then 里
至于继承？ react 或者各种现代语言的精神就是组合优于继承
别的什么 generator，symbol，proxy，也就是知道有这么个东西，从来没用过，用到再细看吧

[Leviathann]

@Leviathann 哦 忘了 lambda 也是 es6 的，我现在基本都不写 function 都是写 lambda，去 tm 的瞎 jb 指的 this

[shilianmlxg]

@find456789 谢谢大佬，你把我心里想的通过语言组织说出来了。别人都是刷题，我是要刷知识点我才能懂。谢谢大佬解惑

[shilianmlxg]

@towry 请问大佬 需要先补充哪些知识点呢，看慕课网的 vue3 教程或者 react hooks 教程 感觉跳跃太快跟不上，说到底还是基础薄弱

[shilianmlxg]

@Leviathann 请问大佬 lambda 就是大家口中的箭头函数嘛 是不是类似于
get2 = diameter => Math.PI * diameter
这种啊 这种属于函数柯里化还是属于高阶函数呢

[mxalbert1996]

Hooks 是一种设计模式，或者说是一种（声明式编程的）思想，跟具体的语言其实没太大关系。Dart 写的 Flutter 和 Kotlin 写的 Jetpack Compose 里都有类似的概念。关键还是要理解这种思想。

[Leviathann]

@shilianmlxg 柯里化是把一个多参数函数变成每次传一个参数返回一个函数，直到传到最后一个参数再最终执行函数
比如 (a, b) => a + b 改成 (a) => (b) => a + b 就是柯里化，我一般是利用它闭包的特性从不同的作用域依次传入 a 和 b 两个参数
高阶函数是参数和返回值可能是函数的函数，比如 map 、filter 都是高阶函数，因为参数都是一个函数，还有柯里化之后除了最后一次调用，之前每次调用都返回一个函数，所以也是高阶函数

这个 get2 是啥，如果是 const get2 = diameter => Math.PI * diameter 那就是一个普通的 lambda 函数吧

[Yvette]

JS 基础可以看看 JavaScript: Understanding the Weird Parts 这个课，个人觉得讲得很不错。这里有试听版

[xarthur]

React 的 Hook 和 JS 基础其实没什么关系……

[shilianmlxg]

@xarthur 请问下大佬 看不懂 hooks 需要看哪些需要掌握的东西呢
比如你完成一个主线任务的前提，是要达成这个主线的支线任务
那么 hooks 相关的支线任务是哪些呢

[ianva]

其实很简单，我们先了解 react 组件是如何运行的，

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

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

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

[ianva]

当然真实的 react 组件和 hooks 比这要复杂很多，比如 state 的变化会让组件重新渲染等等，但是本质是在一个永远根据 props 运行的函数中通过全局变量存储本地状态数据的过程。

[violetlai]

看不懂就写 照着写 跟别人写 看视频写 多写多用在看就会了

[shilianmlxg]

@ianva 谢谢大佬 这 demo 我都看起来感觉有点吃力。

[XTTX]

如果英语可以， 看看 react-trainning 的 react hooks 的学习视频。 纯粹 reacthooks 里最好的教学。没有之一