React 入门有什么教材吗

2021-07-13 17:59:36 +08:00
 Mr0C

前端写过 Vue,看 React 的文档感觉非常懵逼,求推荐教程

4238 次点击
所在节点    React
22 条回复
changwei
2021-07-14 23:50:59 +08:00
react 的核心思想非常简单,就是 UI=render(props),并且 props 为不可变类型(你是可以强行修改 props 的,但是这样的修改不会产生视图渲染更新,也不是优雅的代码写法),所以是单项数据流

学不会 react 的情况下应该想想自己的 ECMAScript6 学得如何,比如当我之前 ECMAScript6 没有学好的时候,看到 this.handleClick().bind(this)这种代码也会感到很奇怪,会纳闷为什么写 onClick={alert(1)}是错误的,会产生代码运行时自动执行事件函数的 BUG,而要写成 onClick={()=>alert(1)},直到后来我彻底把 ECMAScript6 和浏览器工作的整个流程弄懂以后才算明白这其中的原理

react 的文档作者是默认你对 JS 非常熟悉,所以举出的例子和说明对于不熟悉 JS 的人来说会看得一头雾水(比如如上两个问题),因为作者写作文档针对的就是从传统开发过来的具有多年开发经验的前端工程师,确实对新手不太友好。

React 官方文档自己对自己的定位就是 JavaScript 框架,是在 JS 的基础上引入 JSX 语法糖以及函数式组件,是从传统 HTML+CSS+JS 开发演进过来的,所以你得站在传统开发的视角上去看待 React 提供给你的语法糖,你就会觉得他比传统开发优雅很多。Vue 单文件组件那一套其实是从 W3C 的 web component 提案演进过来的,所以你会觉得它完全就是一套全新的开发思路,你不太方便从传统开发的视角上理解他的写法。

https://github.com/cw1997/ez-react-dom/
另外我推广一下自己写的一个简单的 react-dom 实现方案,不到三百行代码,如果你真的 JS 学的比较好(最好还是科班出身,至少知道有一个叫做递归的算法),应该很容易看懂,你能看懂这个实现,就能明白 React 的运作到底是怎么回事,为什么 react 的状态需要使用不可变数据,为什么 react 是单项数据流,为什么要用 onChange 反向进行状态更新。

https://github.com/cw1997/ez-react
另外我的这个代码里面做了一个小小的改进,就是有关我前面提到事件需要手动绑定 this 的操作,如果你对 JS 很熟悉的话,你可以看看这个项目里面是如何做到对事件 handle 函数自动绑定 this 的(用了 ES6 的 reflect 机制)

写 React 需要非常深厚的 ES6 基础,写优雅的 React 还需要非常深厚的 TypeScript 基础和理解函数式编程的思想,加油!
shilianmlxg
2021-07-19 10:59:19 +08:00
@changwei 谢谢大佬 现在就去看 es6 相关的教程书籍

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/789313

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX