Thecai--CSDN博客

原创 Number和parseInt

Number的转换规则布尔值 true：1 false：0 数值，直接返回 Null 0 Undefind NAN 字符串如果字符串全部为数值字符，数值字符前面有加减号，转换为十进制数值（忽略前置0）字符串包含有效浮点值格式，则转换为相应的浮点值十六进制格式0xf 空字符串为0 其他情况NAN 对象，调用valueOf（）方法一元+操作符的转换规则与Number相同parseInt的转换规则字符串最前面的空格会被忽略，因此空字符串转换为NAN par..

2021-08-10 23:24:06 137

原创 == 和 ===

区别： ===在比较操作数的时候不会进行强制类型转换===注意点+0 和 -0相等 NAN不相等为了解决上述两个问题，新增了Object.is(value1,value2)方法。== 强制转换规则如果任一操作数是布尔值，将其转换为数值如果一个操作数是字符串，另一个操作数是数值，将字符串转换为数值如果一个操作数是对象，另一个操作数不是，则调用对象的valueOf方法取原始值，再根据前面的规则比较 null和undefined相等 NAN不等于任何操作数如果两个操作数都是..

2021-08-10 23:11:08 111

原创 var let const

Var 和 let的区别let是块级作用域声明，var是函数作用域声明 let声明不会被提升，var声明会被提升（let临时死区） let禁止重复声明，var可以在循环中使用let声明，每次循环都会创建一个新的i，而var声明始终维护一个变量全局作用域中的let声明变量，不会被绑定到全局对象上，而var会Const每个通过const声明的变量，必须进行初始化。...

2021-08-10 01:03:17 96

原创讲讲浮动元素以及如何清除浮动？

浮动浮动元素同时处于常规流内和流外的元素。其中块级元素认为浮动元素不存在，而浮动元素会影响行内元素的布局，浮动元素会通过影响行内元素间接影响了包含块的布局。浮动引发的问题浮动元素不能撑开父元素的高度，如果父元素没有设置高度，而子元素存在浮动元素的话，可能会出现高度塌陷的问题。清除浮动的方法直接设置父元素的高度大部分情况下父元素的高度并不是固定的，而是希望由子元素的高度撑起。使用BFC（此处可引申考察BFC相关内容）使父元素成为一个BFC，由于BFC的特性，可以撑起浮动..

2021-08-08 17:22:27 158

原创 React中的refs是用来做什么的？

refs是什么？React 中的 Refs提供了一种方式，允许我们访问 DOM节点或在 render方法中创建的 React元素本质为ReactDOM.render()返回的组件实例，如果是渲染组件则返回的是组件实例，如果渲染dom则返回的是具体的dom节点使用方法创建Refs 使用 React.createRef() 创建ref，并通过 ref 属性附加到 React 元素。 class MyComponent extends React.Component { constr..

2021-08-08 16:46:37 1304

原创 react中设置key值的作用

在什么场景下需要设置key？通常应用于列表渲染中，比如通过一个数组渲染出多个列表项时，需要对每一项设置一个唯一的key值来进行标识。key值的作用元素key属性的作用是用于判断元素是新创建的还是被移动的元素，从而减少不必要的Diff。一旦组件加上了key值，react就会在渲染时对该组件的身份进行校验，首先校验新旧组件的key值是不是一致，不一致的话，该组件直接销毁，然后在新建该组件；如果一致，则比较组件的属性是否发生变化，如果发生变化，则采用diff算法进行对比，然后得出差异对象，如..

2021-08-08 16:13:45 686

原创 React中组件间的通信方式

通信场景父子组件间的通信（父->子，子->父）兄弟组件间的通信父组件向后代组件的通信非关系组件间的通信父组件向子组件传递父组件在调用子组件的时候，只需要在子组件标签内传递参数，子组件通过props属性就能接收父组件传递过来的参数function EmailInput(props) { return ( <label> Email: <input value={props.ema

2021-08-08 15:44:11 195

原创 React中的事件绑定方法

为什么需要事件绑定？由于类的方法默认不会绑定this，因此在调用的时候如果忘记绑定，this的值将会是undefined。通常如果不是直接调用，应该为方法绑定this。事件绑定方法在构造函数中使用bind绑定thisconstructor(props) {super(props);this.handleClick = this.handleClick.bind(this);}在函数调用时使用bind绑定this<button onClick={this.handl

2021-08-08 15:05:24 230

原创讲讲React中的事件处理

React中的事件处理是什么？React 合成事件（SyntheticEvent）是 React 模拟原生 DOM 事件所有能力的一个事件对象，即浏览器原生事件的跨浏览器包装器。它根据 W3C 规范来定义合成事件，兼容所有浏览器，拥有与浏览器原生事件相同的接口。为什么要使用合成事件？进行浏览器兼容，实现更好的跨平台避免垃圾回收方便事件统一管理合成事件与原生事件的区别？React 事件的命名采用小驼峰式（camelCase），而不是纯小写。使用 JSX 语法时你需要传入一个函数作

2021-08-08 14:47:27 125

原创讲讲React中的State和Props

基本概念在React中，组件的数据存储在props和state中。一个组件的显示形态可以由数据状态和外部参数所决定。外部参数——props组件从概念上可以理解为一个函数，因为函数也是封装一个独立可复用的功能，而props就可以理解为函数接收的参数。 props为从外部传入组件内部的数据。特性只读性不变性在子组件中，props在内部不可变的，如果想要改变它，只能通过外部组件传入新的props来重新渲染子组件，否则子组件的props和展示形式不会改变数据状态——stat

2021-08-08 12:27:17 243

原创讲讲React的生命周期

创建constructor() 实例过程中自动调用的方法，在方法内部通过super关键字获取来自父组件的props。初始化state状态或者在this上挂载方法。 static getDerivedStateFromProps(nextProps, prevState) 第一个参数为即将更新的props，第二个参数为上一个状态的state，可以比较props 和 state来加一些限制条件，防止无用的state更新该方法需要返回一个新的对象作为新的state或者返回null...

2021-08-08 12:04:07 66

原创简单介绍一下React，及其特性？

简单概括react是一个用于构建用户界面的JS库，遵循组件化的设计模式。通过render方法接收输入的数据，并返回要展示的内容React的特性jsx语法单向数据绑定虚拟DOM 声明式编程 Component声明式编程https://zhuanlan.zhihu.com/p/26085755“在声明式编程中，开发者要做的事情只是描述“我要的是什么样子”，至于具体怎么做，并不是开发者要关心的事情。在React中，每个组件通过render函数返回“这个组件应该长得什么样”，而不

2021-08-08 11:30:26 230

原创 grid布局

容器属性Grid-template-rows grid-template-columns定义列宽和行高属性值可以使用repeat（）函数repeat()接受两个参数，第一个参数是重复的次数（上例是3），第二个参数是所要重复的值有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。为了方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为"片段"）。如果两列的宽度分别为1fr和2

2021-08-07 02:31:45 221

原创讲讲flex的属性

容器的属性容器指采用flex布局的元素，包含六个属性flex-direction决定主轴的方向row | row-reverse | column | column-reverseflex-wrap当一条轴线排不下所有项目时，该如何换行nowrap | wrap | wrap-reverseflex-flow || 的简写形式默认值为 row nowrapjustify-content主轴对齐方式flex-start | flex-end | center |

2021-08-07 02:00:31 59

原创 CSS知识点记录（一）

分类器选择器分类：基本选择器组合选择器属性选择器伪类选择器伪元素选择器常用的伪类选择器子元素选择器：:first-child last-childnth-child: nth-child(n) nth-last-child(n) nth-of-type(n)Nth-child 和 nth-of-type的区别，nth-child会找到父元素下的第n个元素，如果和指定类型一致，则选中，nth-of-type会先找出所有指定类型的子元素，再找到其中的第n个CSS单位em

2021-08-06 01:25:35 63

原创谈谈HTTPS

Https- 超文本传输安全协议HTTP+SSL/TLS解决问题： HTTP明文传输不安全的特性HTTPS过程客户端通过URL访问服务器建立SSL连接服务端收到客户端请求后，将网站的证书信息传送给客户端客户端验证证书信息，通过后协商SSL连接的安全等级客户端建立会话密钥，通过公钥将会话密钥加密，传送给网站服务器利用私钥解密会话密钥利用会话密钥建立通信为什么需要对称加密和非对称加密结合非对称加密保障会话密钥传输的安全性，但非对称加密传输效率较慢，需要使用对称加密来进行会话对

2021-08-05 01:22:03 65

原创谈谈CDN

CDN-内容分发网络解决问题：降低网络拥塞，提高用户访问响应速度和命中率一句话概括：根据用户位置就近分配资源关键技术包括：内容存储和分发概念CDN服务质量指标：命中率和回源率命中率：访问资源在缓存系统中，可直接返回回源率：缓存中没有，通过代理的方式回源站读取原理应用CDN时，DNS不再返回IP地址，而是CNAME别名记录，指向CDN的全局负载均衡访问CDN服务器，进行智能调度，返回最合适的边缘节点，就近访问CDN的缓存代理回源策略缓存系统划分层次，分成一级缓存

2021-08-05 00:22:37 91

原创谈谈ES6中的类Class

class是ES6中的新增语法，是一种语法糖, typeof className会返回function基础用法class className { constructor(){}; fun() {}; static fun1() {}; }继承使用class child extends parent { constructor() { super(); }}类和自定义类型的区别函数声明会被提升，类声明不会类声明中的.

2021-08-04 00:53:05 82

原创实习一个月总结

实习总结（一）解bug或者写需求涉及到先前嵌套较深的逻辑时，开始的时候比较没耐心，看mentor帮我解了几个问题之后，比刚开始能够更耐心一步步排查了遇到一些稍微复杂一点的需求，有时候会在某一个点上钻牛角，这时候其实应该跳出来重新梳理一遍再去看，这一点做的还不够好，着急担心浪费时间反倒会更浪费时间，希望能学会手紧心松。还是时刻要注意当前要解决的问题，有时候遇到一些问题可能想着想着就偏了。要合理安排好给自己消化东西的时间，不要一直纠结需求。我在其他一些事上也存在被事情赶着走的状态，要学会给总结留时间吧

2021-08-02 23:05:12 102

qq_33094147的博客