2020-01-15 19:29:01 shadothew 阅读数 8
  • 2019 react入门至高阶实战,含react hooks

    这是2019 react入门到高级新课程 学习react,不仅能带来技术提升,同时提高开发效率和体验,更能带来好的就业机会。 本课程主要分为以下几个部分:  一,前端工程化基础?  主要学习node和npm、yarn的基本用法  二,es6语法 学习必备的es6常用语法 。 三,react基础知识  学习如何搭建react项目,以及react组件,jsx语法、css处理方案、生命周期等基础知识。 并且根据这些知识开发一个个人网站。 四,react进阶知识?? 学习表单的处理,事件处理,Portals的使用,以及数据请求和API管理等进阶知识。 五,react高阶知识?? 学习react高级特性,react hooks,以及整个react生态体系的构成和应用 。 努力学习哟,带你精通react。

    1979 人正在学习 去看看 梁富城

时隔半年,又重新用回了React的框架。
这次因为没有人带我,也暂时没有分配任务,所以留给我的学习时间是很充裕的。况且,经过小半年的实习,我也成长了很多,对前端的认识已经提高了不少。更开心的是,从WINDOWS系统升级到了MBP的MacOS系统,操作和环境搭建也有些许不同。带着不一样的心情,再次重新学习React给我带来的感触良多。这次学习的轨迹确实值得记录一下。

1. react的官网

因为这一次的时间比较充裕,自己的技术水平也比较高了,于是,我并不追求立刻上手的快速搭建。这一次,我选择了稳扎稳打的保守学习路径,即从官方文档入手。
写过文档的人都知道,每一份文档都是一位技术人泣血的结晶,必定是吹毛求疵式的尽善尽美。而React这种占有量巨大的前端框架的官方文档一定也是考虑良多,尽量会给水平不一的使用者提供最大可能的帮助的。因此我选择了从官网入手。
并且,官网的风格也在很大程度上体现了这个框架的风格。多说无益,上手。

1)React官网首页

首先,我选择了官网的首页React官网首页。之前实习因为是急着上手做需求,所以直接就上手实践,甚至开始看项目文档了。但是现在既然选择了稳扎稳打夯实基础,自然不能这么冒进。
由于太过初学者的线上修改代码太小学生气质了,所以,我从官网推荐的Tania Rascia 的 React 概览开始入手。这位姐姐的博客写的很简洁,直戳重点,对React的组件的概念以及传参的概念的解释很容易理解。
这一篇博客也解决了我在之前直接上手就做的过程中产生的问题:

  • 为什么React的组件可以直接引入,在使用时直接标签这个名字就可以了?

在之前我做的时候,一直以为React render的语言就是HTML,所以上述的东西让我很疑惑。但是这篇博客对React使用的语言的介绍让我恍然大悟。这些东西看起来很基础,但是可能是因为过于基础,在之前的学习中才会一直被我忽略掉。JSX
当然,JSX更接近HTML,其在使用中的注意事项还有如下几点

  1. className用于代替class添加CSS类(classJavaScript中的保留关键字)。
  2. JSX中的属性和方法为camelCase- onclick将变为onClick。
  3. 自闭合标签必须以斜杠结尾-例如 <img />

而在Javascript语言的使用中,JSX语言也有很多便利之处。例如
JavaScript表达式也可以使用大括号(包括变量,函数和属性)嵌入JSX内。

const name = 'Tania'
const heading = <h1>Hello, {name}</h1>

2) React实践教学

在这一部分中,我跟着教程实现了一个能够判断输赢的井字棋。
主要做了如下工作:

  1. 在macOS的环境下安装了Node.js以及npm,首先搭建好了React开发的环境,这里不得不感叹一句,mac真的好好用啊!
  2. 在mac上面安装了我比较习惯使用的编辑器:vscode,顺便安装了几个比较好用的插件,我一般用的都是补全、标记还有框架相关的插件,太多了比较繁琐。
  3. 跟着教程一步一步去做。

最终实现了一个井字棋。
效果如下:
没法生成gif图,后续再补上,反正就是有了一个游戏的效果。

一些思考

在进行这个小游戏的开发的过程中,我并没有遇到什么困难,但是我发现了一个很有意思的东西,那就是在每一次传参之前都会有一个super(props)的操作。
但是在我之前进行vue的开发的过程中,并没有这样的操作。上一次见到super这个函数(?)还是在看红宝书的时候,原型链那一节中介绍到的,子类继承父类的构造器时使用的。
不会就问谷歌吧。
查到了很多相关的资料,下面整理一下的对这个问题理解的路径。

  1. 首先是对super的理解。
    之前在看书也好,做项目也好的时候,基本没有用到过super这个函数,了解也仅限于它是子类用来继承父类的一座桥梁。
    这一部分的理解主要参考super - Javascript | MDN

总结起来,就是一句话,super前子类没有this,super后子类才有this。
然后是一篇大概最著名的关于我们为什么要写super(props)
的帖子:为什么我们要写 super(props) ?
第一次搜索的时候,google给我推送的就是这一篇帖子,起初我在基本忘记了类与继承的相关知识的时候直接去看了这篇帖子,结果看得云里雾里的。然后,我又去了解了上面的👆关于super的解释,再回过头来看这篇帖子。
这篇文章首先对前面提到的那个super的作用举例进行了解释,然后对super()和super(props)的区别进行了分析。
总之就是super()在构造函数执行完之后再给出this,所以如果你中间有用到this指针的话,就会报出undefined的错误。
今天先看到这里,后续再补充。

2016-07-17 23:39:55 Chanlarin 阅读数 461
  • 2019 react入门至高阶实战,含react hooks

    这是2019 react入门到高级新课程 学习react,不仅能带来技术提升,同时提高开发效率和体验,更能带来好的就业机会。 本课程主要分为以下几个部分:  一,前端工程化基础?  主要学习node和npm、yarn的基本用法  二,es6语法 学习必备的es6常用语法 。 三,react基础知识  学习如何搭建react项目,以及react组件,jsx语法、css处理方案、生命周期等基础知识。 并且根据这些知识开发一个个人网站。 四,react进阶知识?? 学习表单的处理,事件处理,Portals的使用,以及数据请求和API管理等进阶知识。 五,react高阶知识?? 学习react高级特性,react hooks,以及整个react生态体系的构成和应用 。 努力学习哟,带你精通react。

    1979 人正在学习 去看看 梁富城

为了能稳固基础,我们一定要逐步地来进行学习。

倘若你正在建造一间房子,那么为了能快点完成,你是否会跳过建造过程中的部分步骤?如在具体建设前先铺设好部分石头?或直接在一块裸露的土地上先建立起墙面?

又假如你是在堆砌一个结婚蛋糕:能因为上半部分装饰起来更有趣,而直接忽略了下半部分?

不行吗?

当然不行。众所周知,这些做法只会导致失败。

因此,不要想着通过接触 React 来将 ES6 + Webpack + Babel + React + Routing + AJAX 这些知识一次性学好。因为想一下,就能明白这难道不正是导致学习失败的原因吗?

既然我把该文章称作是一条学习路线,那么每一次都应该走好每一步。既不要尝试去跨越,也不要贪步。

一步一脚印。若把其置身于每一天的那么一点时间,那么也许几周就能把整个学习完成。

制定该路线的主要目的在于:使你在学习过程中避免头脑不堪重负。因此,请脚踏实地地去学习 React 吧。

当然,你也可以为整个学习过程制定一个可打印的 PDF 文件,以便在学习过程中能够查记。

第零步:JavaScript

在学习之前的你,理应对 JavaScript 有所了解,或至少是 ES5 标准下的 JavaScript。可若了解甚少,那么,你就应该停下手头上的工作,学习好该基础部分后,才可迈步前行。

可倘若早已熟知 ES6 所带来的新特性,那么请继续。因为如你所料,React 的 API 接口在 ES5 和 ES6 两标准间存在着较大的差异性。所以对于你来说,熟悉两种标准其特性的不同至关重要。尽管发生了异常,你也可以通过两种标准之间的转换,寻找出广泛有效的答案。

第半步:NPM

NPM 在 JavaScript 世界中,可谓是软件管理方的王者。然而,在这里你却并不需要学习太多关于 NPM 自身的东西。只要在安装好后 (连同 Node.js),学习如何使用其安装软件即可。(npm install <package name>

第一步:React

学习一个新的编程技术,我们往往会从熟悉的 Hello World 教程开始。首先,我们可以通过使用 React 官方教程所展示的原生 HTML 文件来实现,而该文件包含有一些 script 标签。其次,我们还可以通过使用像 React Heatpack 这样的工具来快速上手。

尝试一下该三分钟运行起 Hello World 的教程

第二步:构建后摒弃

由于这一步是一个棘手的中间过程,所以往往会有大量的人忽略了该步。

谨记,请勿犯这样的错误。因为,倘若对 React 的概念没有一个稳固的掌握而擅自前行,那么,最后只会对自己的大脑搪塞过多的知识,以致遗忘。

当然,该步需要一定时间的斟酌:该构建什么呢?是工作中的一个原型项目?还是能贴合于整个框架的一些 Facebook 克隆项目呢?

其实,我们应该构建的都不是这些项目。因为,它们要不是包裹过甚,以致无甚可学;要不是过于庞大,以致成本过高。

尤其是工作中的“原型项目”,它们更为糟糕。因为在你心目中,早已明白这些项目并不会占有一席之地。况且,该类项目往往会长期驻留在原型阶段,或变成线上的软件。最终,你将无法摒弃或重写。

此外,把原型项目当作学习的项目将会为带来大量的烦恼。对于你来说,你可能会就未来的因素考虑一切可能发生的事情。而当你认为这不仅仅是一个原型的时候,你就会产生疑惑 —— 是否要测试一下呢?我应该要保证架构能延伸扩展……我需要延后重构的工作吗?还是不进行测试呢?

为了解决该问题,我希望能用上我所写的一篇指引《为 Augular 开发者所准备的 React》:一旦你完成了 “Hello World” 的基础课程,你将如何去学习 ”think in React” 的课程。

在这里,我有一些个人的提议给到大家:那就是,理想的项目是介乎于 “Hello World” 和 ”All of Twitter“ 之间。

另外,请尝试去构建一些官方文档列表中所展示的项目(TODOs、beers、movies),然后,借此学会数据流(data flow)的工作原理。

当然,你也可以把一些已有的大型 UI 项目(Twitter、Reddit、Hacker News等)分割成一小块来构建 —— 即把其瓜分成组件(components),并使用静态的数据去进行构建。

总的来说,我们需要构建的,理应是一些小型且可被摒弃的应用程序项目。这些项目必须是可摒弃的。否则,你将深陷于一些不为重要的东西,如可维护性和代码结构等。

值得提醒的是,如果你曾经订阅于我,那么当《为 Angular 开发者准备的 React》发布的时候,你将会第一时间收到通知。

第三步:Webpack

构建工具是学习过程中的一个主要的难点。搭建 Webpack 的环境会让你感觉是一件繁杂的工作,而且,完全不同于 UI 代码的书写。这就是为什么我要将 Webpack 放在了整个学习路线的第三步,而不是第零步。

在这里,我推荐一篇名为《Webpack —— 令人疑惑的地方》的文章,作为对 Webpack 的简介。此外,该文章还讲述了 Webpack 本身所具有的一些思考方式。

一旦你清楚 Webpack 所负责的工作(打包生成各种的文件,而不仅仅是 JS 文件) —— 以及其中的工作原理(适用于各种文件类型的加载器),那么,Webpack 对于你来说将会是一个更为欣喜的部分。

第四步:ES6

如今,进入了整个路线的第四步。上述的所有将会作为下面的铺垫。之前,在学习 ES6 过程中,所学到的部分也将会让你写出更为利落简洁的代码 —— 以及性能更高的代码。回想起一开始那时候,某些问题本不应卡住在那 —— 但现在的你,已然清楚知道为啥 ES6 能完美地融合在其中。

在 ES6 中,你应该学习一些常用的部分:箭头函数(arrow functions)、let/const、类(classes)、析构(destructuring)和import

第五步:Routing

有些人会把 React Router 和 Redux 这两个概念混为一谈 —— 但是,它们之间并没有任何的关系或依赖。因此,你可以(也理应)在深入 Redux 之前学习如何去使用 React Router。

由于在之前“think in React”的教程中,积累了坚实的基础。因此,相比于第一天学习 React Router,我们此时更能从基于组件(component-based)的构建方式中,领悟出更多的精髓。

第六步:Redux

Dan Abramov,作为 Redux 的创造人,他会告诉你们不要过早地接触 Redux。其实,这是有缘由的 —— Redux 其复杂度在早期的学习过程中,将会带来灾难性的影响。

虽然,在 Redux 背后所隐藏着的原理相当简单,但想要从理解跃至实践,却是一个很大的跨度。

因此,重复第二步所做的:构建一次性的应用程序。通过些许的 Redux 经验,去逐渐理解其背后的工作原理。

非步骤

在前面列出的步骤中,你曾否看见过”选择一个模板项目“的字眼吗?并没有。

若仅通过挑选大量模板项目中的其中一个,去深入学习 React。那么,后面将只会带来大量的疑惑。虽然这些项目会含有一切可能的库,且规定要求一定的目录结构 —— 但对于小型的应用程序,或开始入门的我们来说,并不需要。

也许你会说,“Dave,我可并不是在构建一个小应用。我所构建的,是一个服务于上万用户级别的复杂应用!”……那么,请你重新阅读一下关于原型的理解

该如何应对

对于 React 来说,虽然有大量的学习计划需要采取,且有大量的东西需要学习 —— 但一切需要循规蹈矩,一步一脚印。

虽说我已提供了一系列的步骤,那如果你在学习的过程中会忘记了步骤的顺序或跳过了某一步,那怎么办?

你会想,要是有一个能监督的方式就最好了……

-----------------------------------------------------------------------------------------------------------------------

在github上面看到的


2016-03-10 22:23:53 weixin_34284188 阅读数 12
  • 2019 react入门至高阶实战,含react hooks

    这是2019 react入门到高级新课程 学习react,不仅能带来技术提升,同时提高开发效率和体验,更能带来好的就业机会。 本课程主要分为以下几个部分:  一,前端工程化基础?  主要学习node和npm、yarn的基本用法  二,es6语法 学习必备的es6常用语法 。 三,react基础知识  学习如何搭建react项目,以及react组件,jsx语法、css处理方案、生命周期等基础知识。 并且根据这些知识开发一个个人网站。 四,react进阶知识?? 学习表单的处理,事件处理,Portals的使用,以及数据请求和API管理等进阶知识。 五,react高阶知识?? 学习react高级特性,react hooks,以及整个react生态体系的构成和应用 。 努力学习哟,带你精通react。

    1979 人正在学习 去看看 梁富城

本项目已作废,替代项目为 React-Study,欢迎交流学习。

项目地址:webpack-es6-react

这是一个基础的,综合了webpack,es6,react的学习模板。

本模板也方便你对 react 生态圈中其他相关知识的学习,比如你想学习 react-router,redux 或是 css-modules都可以以此模板为基础进行延伸学习。

webpack-es6-react

本模板应用了以下技术

Demo

react-transform-boilerplate

使用方法

git clone https://github.com/minooo/webpack-es6-react.git
cd webpack-es6-react 
npm install
npm start
打开 http://localhost:5000/

注意:package.json 的 scripts 中内置了三个命令
start 用于开发模式,方便调试,撸码
build 开发完毕后,就可以打包文件了,当然这个模板足够简单,不能应用于实际生产中,这里只是一个示范。
lint 检测你的js代码是否规范。

package.json 中的部分 包/库 说明

  • babel-core babel6 的基础模块

  • babel-eslint ESLint 是前端JS代码检测利器。而 babel-eslint 则允许你检测所有的 Babel 代码。

  • babel-loader 这个包允许你使用 Babel 和 webpack 转译(Transpiling) JavaScript 文件。

  • babel-plugin-react-transform 这个插件通过任意转换的方式去封装 React 组件。换句话说,你可以随心所欲的摆弄你的组件了。

  • babel-plugin-transform-runtime 在 Babel 转换过程中,详细的展示引用的相关辅助工具和内置命令,并自动的聚合填充你的代码而不会污染全局。

  • babel-preset-es2015 此预设包含了所有的 es2015 插件。

  • babel-preset-react 此预设包含了所有的 React 插件。

  • babel-preset-stage-0 此预设包含了 stage 0 中的所有插件。

  • eslint JavaScript 语法检测利器:分析出你代码潜在的错误和非标准用法。

  • eslint-plugin-react ESLint 中关于 React 语法检测的插件。

  • react-transform-hmr 一个 React 转换装置,该装置通过引用 Hot Module Replacement API 使热重载 React 的类成为可能。

  • react-transform-catch-errors 呈现你 React 组件的错误信息。

  • webpack-dev-server 为 wepack app 提供一个服务器,如果你的代码有任何变化,浏览器将自动刷新显示,极大的方便前期开发。

  • babel-runtime Babel 自带的运行环境。

根目录下部分文件说明

  • .babelrc : 什么是 .babelrc 文件呢?熟悉 linux 的同学一定知道,rc 结尾的文件通常代表运行时自动加载的文件,配置等。同样在这里也是有同样作用的。里面的 env 字段,可以对 BABEL_ENV 或 NODE_ENV 指定不同的环境变量,进行不同编译。

  • eslintignore 通知 eslint 忽略那些不应该被检测的文件。

  • eslintrc eslint 配置文件,使 JavaScript 代码规范化,标准化书写。

为什么要做这个模板

react 现在已经不能简单的说是一个库了,而是一个生态系统。围绕其出现的新技术层出不穷,而 babel 的出现让我们提前用上了下一代 javascript——es6, 作为前端的我们势必要紧随时代潮流。

2018-05-08 14:42:16 bury_ 阅读数 1014
  • 2019 react入门至高阶实战,含react hooks

    这是2019 react入门到高级新课程 学习react,不仅能带来技术提升,同时提高开发效率和体验,更能带来好的就业机会。 本课程主要分为以下几个部分:  一,前端工程化基础?  主要学习node和npm、yarn的基本用法  二,es6语法 学习必备的es6常用语法 。 三,react基础知识  学习如何搭建react项目,以及react组件,jsx语法、css处理方案、生命周期等基础知识。 并且根据这些知识开发一个个人网站。 四,react进阶知识?? 学习表单的处理,事件处理,Portals的使用,以及数据请求和API管理等进阶知识。 五,react高阶知识?? 学习react高级特性,react hooks,以及整个react生态体系的构成和应用 。 努力学习哟,带你精通react。

    1979 人正在学习 去看看 梁富城

最近准备系统学习React,首先看了官方文档,React官方中文文档,读到快速开始的React理念这一章,就动手写了一下Demo,按照提示实现了一遍,效果如下:
Github地址:https://lucyzlu.github.io/React-demo-product-list/my-app/build/index.html
JSFiddle:

下面提取官方文档中重要的点复制到此处,以及动手的过程中遇到的一些问题记录,最后贴上完整的HTML,CSS以及React+JSX源码以供参考。

1.功能和效果

提供的效果图如下,这是一个商品列表,上面的部分是对商品进行过滤搜索的交互区域,下面部分是根据用户的输入进行过滤后的商品列表展示。
效果图

如何进行组件化呢?
官方提供了如下的组件化划分方案:
这里写图片描述
在这里你会看到,我们的简单应用中有5个组件。我们把每个组件展示的数据用斜体表示。
这里写图片描述
组件层级可以表示成:
这里写图片描述
看起来很明了,那么就动手实现吧。我选择从底层组件开始写,一直写到顶层组件。

2.实现的步骤

整个步骤顺序:
第一步:把 UI 划分出组件层级

第二步:用 React 创建一个静态版本(也就是只在组件中只使用props进行单项数据流传递(不使用state),从父组件到子组件,并且在每个组件中使用render函数定义要渲染的UI,所有组件写好之后,为顶级组件提供一个数据看一下整个静态的UI是否正确)

第三步:定义 UI 状态的最小(但完整)表示(也就是确定有哪些state),考虑state时遵循如下3个问题:

  1. 它是通过 props 从父级传来的吗?如果是,他可能不是 state。
  2. 它随着时间推移不变吗?如果是,它可能不是 state。
  3. 你能够根据组件中任何其他的 state 或 props 把它计算出来吗?如果是,它不是 state。

第四步:确定你的 State 应该放在哪个组件中,遵循的4个问题如下:

  1. 确定每一个需要这个 state 来渲染的组件。
  2. 找到一个公共所有者组件(一个在层级上高于所有其他需要这个 state 的组件的组件)
  3. 这个公共所有者组件或另一个层级更高的组件应该拥有这个 state。
  4. 如果你没有找到可以拥有这个 state 的组件,创建一个仅用来保存状态的组件并把它加入比这个公共所有者组件层级更高的地方。

第五步:添加反向数据流(也就是向props中添加事件处理程序,触发父组件传递给子组件用于修改父组件中state的回调函数,注意这里每个组件只能直接修改存储在自己内部的state,调用this.setState()函数进行修改,并不能直接修改自己上级或者下级组件的state:当要修改自己上级组件的state时,可以调用上级组件通过props传递给自己的回调函数;对下级组件的数据传递通过props)

3.问题

实现的过程中遇到了两个问题,

1.JSX语法问题
一个是语法上面的问题,在定义ProductTable时使用了嵌套map函数,第一个map函数return的时候没有用一个顶级元素将其他元素包裹起来导致报错,因此:
map返回JSX的时候,要用一个顶级元素包裹起来,比如用tbody,否则会报错
一个table里可以有多个tbody标签

{this.props.categoryArray.map((item, index) => {
                    return (
                        <tbody key={index}>
                            <tr key={index}>
                                <td colSpan="2"><ProductCategoryRow category={item[0].category} /></td>
                            </tr>

                            {
                                item.map((line) => {
                                    if (line.name.toLowerCase().includes(this.props.filterText.toLowerCase())&&(this.props.onlyStocked?line.stocked:true)) {
                                        return (<ProductRow name={line.name} price={line.price} inStock={line.stocked} key={line.name} />)
                                    } else {
                                        return null;
                                    }

                                })

                            }
                        </tbody>
                    )
                })}

2.回调函数的this绑定(这一点理解很重要)
如下,当引擎调用onChange事件指定的事件处理程序时,该回调函数内部的this默认是指向undefined的,因此调用this.props时就会报错,不能调用undefined的属性,

class SearchBar extends React.Component {
    constructor(props) {
        super(props);
        this.handleInputChange = this.handleInputChange.bind(this);
    }

    handleInputChange(e) {
        const target = e.target;
        const value = target.type == "checkbox" ? target.checked : target.value;
        target.type == "checkbox" ? this.props.onCheckedChange(value) : this.props.onValueChange(value);
    }

    render() {
        return (
            <div className="searchBar">
                <div> <input type="text" className="insetShadow" placeholder="Search..." value={this.props.search} value={this.props.search} onChange={this.handleInputChange} /></div>
                <div><input type="checkbox" name="filter" checked={this.props.isChecked} onChange={this.handleInputChange} /> <label htmlFor="filter">Only show products in stock</label></div>
            </div>
        );
    }
}

解决办法之一是在constructor中使用bind函数显式绑定回调函数内的this。关于bind函数

3.数据结构问题
第三个问题是针对这个Demo的一个问题,就是展示商品列表的同时还要给同类的商品展示一个共同的类别名(也就是组件ProductCategoryRow),那么ProductCategoryRow要显示的Category名从何而来呢?观察一下JSON接口返回的数据:

[
  {category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"},
  {category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball"},
  {category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball"},
  {category: "Electronics", price: "$99.99", stocked: true, name: "iPod Touch"},
  {category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5"},
  {category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7"}
];

我们可以将JSON数据进行改造,改成一个二维数组,二维数组的每个数组元素里的产品元素都具有相同的Category,那么展示的时候提取其第一个产品元素的Category就可以了,改造后的二维数据如下:

this.data = [
            [{ category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football" },
            { category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball" },
            { category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball" }],
            [{ category: "Electronics", price: "$99.99", stocked: true, name: "iPod Touch" },
            { category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5" },
            { category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7" }]
        ];

4.源码

github源码:https://github.com/LucyZlu/React-demo-product-list

5.参考

React官方中文文档
bind应用场景和理解

2018-07-13 10:13:05 DreamSeeker_1314 阅读数 163
  • 2019 react入门至高阶实战,含react hooks

    这是2019 react入门到高级新课程 学习react,不仅能带来技术提升,同时提高开发效率和体验,更能带来好的就业机会。 本课程主要分为以下几个部分:  一,前端工程化基础?  主要学习node和npm、yarn的基本用法  二,es6语法 学习必备的es6常用语法 。 三,react基础知识  学习如何搭建react项目,以及react组件,jsx语法、css处理方案、生命周期等基础知识。 并且根据这些知识开发一个个人网站。 四,react进阶知识?? 学习表单的处理,事件处理,Portals的使用,以及数据请求和API管理等进阶知识。 五,react高阶知识?? 学习react高级特性,react hooks,以及整个react生态体系的构成和应用 。 努力学习哟,带你精通react。

    1979 人正在学习 去看看 梁富城

Today , I will study the state and lifecycle hooks of React.

class Clock extends React.Component {

  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

Let’s quickly recap what’s going on and the order in which the methods are called:

  1. When <Clock /> is passed to ReactDOM.render(), React calls the constructor of the Clock component. Since Clock needs to display the current time, it initializes this.state with an object including the current time. We will later update this state.

  2. React then calls the Clock component’s render() method. This is how React learns what should be displayed on the screen. React then updates the DOM to match the Clock’s render output.

  3. When the Clock output is inserted in the DOM, React calls the componentDidMount() lifecycle hook. Inside it, the Clock component asks the browser to set up a timer to call the component’s tick() method once a second.

  4. Every second the browser calls the tick() method. Inside it, the Clock component schedules a UI update by calling setState() with an object containing the current time. Thanks to the setState() call, React knows the state has changed, and calls the render() method again to learn what should be on the screen. This time, this.state.date in the render() method will be different, and so the render output will include the updated time. React updates the DOM accordingly.

  5. If the Clock component is ever removed from the DOM, React calls the componentWillUnmount() lifecycle hook so the timer is stopped.

this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment
}));

====

// Correct
this.setState(function(prevState, props) {
  return {
    counter: prevState.counter + props.increment
  };
});

You have to be careful about the meaning of this in JSX callbacks. In JavaScript, class methods are not bound by default. If you forget to bind this.handleClick and pass it to onClick, this will be undefined when the function is actually called.

This is not React-specific behavior; it is a part of how functions work in JavaScript. Generally, if you refer to a method without () after it, such as onClick={this.handleClick}, you should bind that method.


React 学习资料汇总

阅读数 157

React学习笔记

阅读数 13275

没有更多推荐了,返回首页