随笔分类 - teach
摘要：之前已经介绍过了React的相关生命周期，这里介绍下通过生命周期函数componentWillReceiveProps实现组件性能优化。 之前案例中的组件存在性能问题，即父组件的state更新时频繁渲染了子组件，也就是说父组件的输入框的值改动造成了子组件render的频繁触发渲染，性能上存在缺陷。
阅读全文
摘要：综上所示，React生命周期钩子可以分为4个大阶段 1、Initialization初始化阶段 2、Mounting虚拟DOM挂载阶段 3、Updation组件更新阶段 4、Unmounting组件卸载阶段 通俗理解，就是在组件的某一时刻，自动执行的函数。从这个角度来看的话，constructor也
阅读全文
摘要：学习react的同学肯定看过这种写法 注意这里的ref，写法为 ref = {(input)=>{this.input=input}}等价于ref = {input=>this.input=input}等价于ref = {(input)=>this.input=input} 这里主要是ES6箭头函数
阅读全文
摘要：基本类型校验： 之前的案例中，父组件向子组件传递的数据里，并没有做数据类型校验 虽然正确传递和使用了，但是在子组件里并没有做传递数据的类型验证，也就是说，此时传递任何值都不会报错。 开发经验丰富的小伙伴都知道，当项目复杂性较大时，如果不对数据类型做校验，后期很容易出现一种错误，即“业务逻辑错误”。
阅读全文
摘要：Facebook为了方便调试React代码，推出了React Developer Tools调试工具，方便开发者高效快速调试代码。下载方式，利用Chrome的拓展程序 添加后该图标便会放到页面右上角，该图标有几种状态，测试如下 1、打开淘宝发现图标灰色，说明淘宝没有使用react 2、打开知乎，发现
阅读全文
摘要：我们使用create-react-app脚手架时，会发现入口文件index.js中有这样一个引入使用。 这个文件可以视情况用或者不用，它是用来做离线缓存等任务的，实际上就是为react项目注册了一个service worker。这样的话，如果在线上，只要访问过一次该网站，以后即使没有网络也可以访问（
阅读全文
摘要：JSX支持遍历语法，如下 除了上面数组遍历方式，还有另一种，如下所示 结合for循环（外部） 注意： 主流循环写法是 map，jsx里面不能用for循环，因为for循环不是表达式。可以用Array::map方法，注意给返回的每一个组件设置一个唯一的key。 .
阅读全文
摘要：前言 JavaScript 发展至今已经发展出多种数组的循环遍历的方法,不同的遍历方法运行起来那个比较快,不同循环方法使用在那些场景,下面将进行比较: 各种数组遍历的方法 for 语句 代码: var arr = [1,2,4,6] for(var i = 0, len = arr.length;
阅读全文
摘要：三元表达式也叫三目运算符，较为常见，语法 condition ? result1 : result2 二元表达式也叫二目运算符，语法 result1 || result2 如果结果1存在则显示结果1，否则显示结果2 .
阅读全文
摘要：小结： React遵循从上到下的数据流向，即单向数据流。 1、单向数据流并非‘单向绑定’，甚至单向数据流与绑定没有‘任何关系’。对于React来说，单向数据流（从上到下）与单一数据源这两个原则，限定了React中要想在一个组件中更新另一个组件的状态（类似于Vue的平行组件传参，或者是子组件向父组件传
阅读全文
摘要：（1）图片处理 首先回顾下图片引入方式 1、js创建图片引入 2、css结合背景图background-image: url('')引入 3、图片标签引入<img src="" alt="" /> 1、首先在js里创建图片插入 接着进行打包输出，测试如下 发现图片并没有被打包过来... ...，接下
阅读全文
摘要：先来个简单案例： <button id="btn">点击</button> <script type="text/javascript"> var btn = document.querySelector('#btn') btn.addEventListener('click',function()
阅读全文
摘要：（1）ES6语法解析转换ES5 为了方便测试，我们先将mode模式改为开发模式development，首先编写ES6语法进行相关测试 然后打包测试，发现打包后的js文件仍旧是ES6语法 接下来安装相关依赖 npm i babel-loader @babel/core @babel/preset-en
阅读全文
摘要：（1）打包后的文件分析 首先将打包后的文件进行适当删减，Ctrl+Shift+L可以同时选中所有相同结构内容 结构如下 (function(modules){ ... })( { ... } ) 分析可知本质为匿名函数即IIFE函数，执行时会传入后面函数执行符里的对象，接下来分析下传入对象 对象构成
阅读全文
摘要：（1）版本注意 npm 5.2.0开始npm便开始携带了npx （2）npx是什么？ npx是一个工具，它是npm v5.2.0引入的一条命令（npx），是npm的一个包执行器，只要为了提高从npm注册表使用软件包的体验 。 npm使得它非常容易地安装和管理托管在注册表上的依赖项， npx使得使用C
阅读全文
摘要：1、ES6模块导入使用import...from...，{}里存放导入的方法 2、可以一起导入，也可以分开导入 3、named as myName中的as为重命名 4、import * as mylib from 'src/lib' 把模块里定义导出的所有方法，绑定到mylib对象上 5、impor
阅读全文
摘要：Javascript只有函数作用域，什么块儿啊、神马文件啊统统都认为是一个命名空间的，有时候因为一些重名问题导致的错误让人莫名其妙，难以调试解决。 在JavaScript中全局变量经常会引起命名冲突，甚至有时侯重写变量也不是按照你想像中的顺序来的，可以看看下面的例子： var sayHello =
阅读全文
摘要：根据上面展示代码中二者定义组件的语法格式不同之外，二者还有很多重要的区别，下面就描述一下二者的主要区别。 （1）函数this自绑定 React.createClass创建的组件，其每一个成员函数的this都有React自动绑定，任何时候使用，直接使用this.method即可，函数中的this会被正
阅读全文
摘要：React.Component有三种手动绑定方法： 可以在构造函数中完成绑定 可以在调用时使用method.bind(this)来完成绑定 可以使用arrow function来绑定。 拿上例的handleClick函数来说，其绑定可以有： 1、构造函数绑定 constructor(props) {
阅读全文
浙公网安备 33010602011771号