
react学习笔记
文章平均质量分 92
冰雪为融
我与我周旋久,宁做我
展开
-
理解redux-thunk
理解redux-thunk前言前面我们已经用了三篇文章详细介绍了 Redux 的概念、原理及 Middleware 机制。今天我们来看一个 Redux 官方出品的 middleware 库:redux-thunk。可能大部分用了 Redux 的项目都会用到redux-thunk,但你有没有想过这个库到底是用来干嘛的?如果我不用它行不行?这篇文章我们就来详细聊一下这个库。其实很早之前我就看过它的代码,看到它的代码量的时候被震惊了,没想到一个 GitHub 上 Star 数过万的项目,总的代码行数只转载 2021-01-27 22:18:04 · 576 阅读 · 0 评论 -
多端统一开发框架 - Taro
ArchSummit全球架构师峰会深圳站<9折报名>最后一周!Google、Facebook、Netflix、BAT等100+国内外顶尖架构师的深度复盘和讲解,立即了解详情:sz2018.archsummit.comTaro - 多端开发框架Taro 是什么?Taro 是由京东 - 凹凸实验室打造的一套遵循 React 语法规范的多端统一开发框架。现如今市面上端的形态多种多样,Web、...转载 2018-06-09 19:36:59 · 12788 阅读 · 2 评论 -
react中的refs属性的使用方法
在React中,render执行的结果得到的并不是真正的DOM节点,结果仅仅是轻量级的JavaScript对象,我们称之为virtual DOM。 虚拟DOM是React的一大亮点,具有batching(批处理)和高效的Diff算法。这让我们可以无需担心性能问题而”毫无顾忌”的随时“刷新”整个页面,由虚拟 DOM来确保只对界面上真正变化的部分进行实际的DOM操作。但是...原创 2018-05-16 19:45:56 · 5515 阅读 · 0 评论 -
深入学习react中的setState 函数
原文链接地址:https://www.oschina.net/translate/functional-setstate-is-the-future-of-reactReact 已经在 JavaScript 中普及了函数式编程。 这导致一些大型框架采用了 React 使用的基于组件的 UI 模式。 现在功能性发烧已经蔓延到整个网络开发生态系统中。但 React 团队并没有停下脚步,他们继续深入挖掘...转载 2018-05-15 18:07:42 · 3470 阅读 · 0 评论 -
理解react中的props和state
Props对于使用它的组件来说,是只读的,要想修改Props,只能通过该组件的父组件修改。State是可变的,是组件内部维护的一组用于反映组件UI变化的状态集合;props:1、props意为属性,只可父组件改变子组件的props,而子组件不能自更新。(组件内部的this.props属性是只读的,不能修改)2、props是子组件暴露给外部的公有接口。3、props是一个父组件传递给子组件的数据流,...原创 2018-05-14 22:56:28 · 1419 阅读 · 0 评论 -
react实现TodoList案例
说明一下:实现这个案例需要准备的东西实在太多,不可能把所有的代码都贴上来(贴了,您也未必想看啊,哈)所以,css代码,配置文件,无关逻辑的就不往这上面贴了(想必大家既然选择做这个案例,这些基本的东西也都是会的,如果有什么疑问或者想要完整的源码的可以留言,嗯、互相帮助,互相进步)需要掌握的知识点:webpack、npm、CommonJs、ES6、react、react-router功能效果:(从上到...原创 2018-05-19 18:14:26 · 1299 阅读 · 1 评论 -
warning.js:33 Warning: A component is changing a controlled input of type text to be uncont
今天在做一个小练习的时候,真的是踩了很多坑,还好最后还是爬出来了,现在分享出来,希望帮到遇到和我一样问题的你,也是避免自己再次踩坑里报错内容:Warning: A component is changing a controlled input of type text to be uncontrolled. Input elements should not switch from contr...原创 2018-05-13 19:22:30 · 9412 阅读 · 0 评论 -
了解什么是JSX以及它的语法
一、什么是JSX?JSX 即 JavaScript XML,是一种在 React 组件内部构建标签的类 XML 语法。JSX 并不是一门新的语言,仅仅是个语法糖(syntactic sugar),允许开发者在 JavaScript 中书写 HTML 语法。最后,每个 HTML 标签都转化为 JavaScript 代码来运行。这样对于使用 JavaScript 来构建组件以及组件之间关系的应用,在代...原创 2018-05-12 20:17:23 · 1977 阅读 · 1 评论 -
深入理解 react-router 路由系统
在 web 应用开发中,路由系统是不可或缺的一部分。在浏览器当前的 URL 发生变化时,路由系统会做出一些响应,用来保证用户界面与 URL 的同步。随着单页应用时代的到来,为之服务的前端路由系统也相继出现了。有一些独立的第三方路由系统,比如 director,代码库也比较轻量。当然,主流的前端框架也都有自己的路由,比如 Backbone、Ember、Angular、React 等等。那 react...转载 2018-05-18 17:29:16 · 489 阅读 · 0 评论 -
React Router中Link和NavLink的学习总结
Link现在,我们应用需要在各个页面间切换,如果使用锚点元素实现,在每次点击时,页面被重新加载,React Router提供了<Link>组件用来避免这种状况发生。当 你点击<Link>时,url会更新,组件会被重新渲染,但是页面不会重新加载嗯、先看个例子import {Link} from 'react-router-dom';const Header = ()=>...原创 2018-05-18 17:26:20 · 47062 阅读 · 4 评论 -
React Router v4 知识点介绍
转载:https://www.jianshu.com/p/6a45e2dfc9d9万恶的根源距离React Router v4 正式发布也已经过去三个月了,这周把一个React的架子做了升级,之前的路由用的还是v2.7.0版的,所以决定把路由也升级下,正好“尝尝鲜”...江湖传言,目前官方同时维护 2.x 和 4.x 两个版本。(ヾ(。ꏿ﹏ꏿ)ノ゙咦,此刻相信机智如我的你也会发现,ReactRou...转载 2018-05-18 16:12:57 · 254 阅读 · 0 评论 -
react中的属性验证
PropType导出一系列验证器,这些验证器可以用来确保接收到的数据是有效的。在验证属性之前,要先安装一个propTypes库,执行npm i -S prop-types使用之前要先引入prop-type验证属性前要先定义好一个对象,添加属性验证不要忘了将定义好的对象挂载在组件上面我们可以设定一个属性是一个特定的js类型,默认情况下,下面的这些都是可选的 PropTypes.array, P...原创 2018-05-11 22:39:51 · 1093 阅读 · 0 评论 -
react中的无状态函数式组件
无状态函数式组件,顾名思义,无状态,也就是你无法使用State,也无法使用组件的生命周期方法,这就决定了函数组件都是展示性组件,接收Props,渲染DOM,而不关注其他逻辑。其实无状态函数式组件也是官方比较推荐的一种方式,尽量让底层的组件变成无状态函数式组件,也即组件尽量只用来显示数据,把数据操作的逻辑都放在顶层,然后从顶层把数据传到底层嗯,看个例子,使用类组件和无状态函数式组件两种方法进行对比顶...原创 2018-05-17 22:20:48 · 6864 阅读 · 0 评论 -
React Router 4 简易入门
React Router4是一个流行的纯React重写的包。现在的版本中已不需要路由配置,现在一切皆组件。本文涵盖了开始使用React Router构建网站所需要的一切知识。我们将会为本地运动队制作一个网站。代码想看网站最终效果,查看demo点击预览安装React Router被拆分成三个包:react-router,react-router-dom和react-router-native。rea...转载 2018-05-17 11:41:50 · 275 阅读 · 0 评论