顾_-CSDN博客

原创 CSS的三种编写方式

内联样式/行内样式：在标签内部通过style属性来设置样式。 <p style="color:red;font-size:20px;"> </p> 内部样式表：在head标签内编写style标签，通过选择器来为选中的元素设置样式。 <head> <style> p{ color:red; font-size:20px; } </sty...

2022-04-01 16:48:35 396

原创 CSS设置居中的方法

position（子元素宽高度已知） .parent{ position:relative;}.child{ width:100px; height:100px; position:absolute; top:0; bottom:0; left:0; right:0; margin:auto;} position（子元素宽高度未知） .parent{ position:relat.

2022-04-01 16:48:00 545

原创纯函数的概念

一类特别的函数，无论何时只要是同样的实参都会得到同样的输出结果。注意：1、不得改写参数数据。2、不能调用Date.now()和Math.random()等不纯的方法。3、不会产生任何副作用，例如网络请求、输入和输出设备。例如：redux的reducer函数必须是一个纯函数。...

2022-03-31 14:43:44 127

高阶函数：接收的参数为函数或者返回值是一个函数。常见的高阶函数：定时器、Promise、数组的一些方法、函数对象的bind方法。高阶组件（一种特别的高阶函数）：接收的参数为组件并且返回一个新组件，新组件会向旧组件传递一些特定属性，用于扩展组件的功能。例：react-redux中的connect函数为高阶函数，调用connect会返回一个高阶组件，这个高阶组件接收一个UI组件，返回一个容器组件，容器组件会向UI组件传递特定的属性。函数柯里化：通过函数调..

2022-03-31 14:42:53 1204

原创 call、apply和bind的区别

——第一个参数为对象，可以指定其为函数执行时的this。——call和apply方法的调用会直接引起函数对象的调用，bind会返回一个新函数，不会直接引起函数对象的调用。//函数的实参从第二个参数开始依次传递fun.call(obj,a,b)//函数的实参封装为数组作为第二个参数统一传递fun.apply(obj,[a,b])//bind为高阶函数，返回一个绑定了this指向的新函数，函数的实参从第二个参数开始依次传递fun.bind(obj,a,b)()...

2022-03-31 14:42:10 49

原创 BrowserRouter生产模式404问题

问题：生产模式下，刷新某个路由路径时，会出现404错误。原因：项目根路径后的path会被当作后台路由路径，去请求对应的后台路由，但是不存在。解决：在后台路由中间件声明之后，使用自定义中间件去读取返回index页面展现。注意：前端路由的路径不要与后台路由路径相同（并且请求方式也相同）。 const fs = require('fs') // 自定义中间件，必须在路由器中间件之后声明使用 app.use((req, res) => { fs.re..

2022-03-31 14:40:49 820

原创 setState()的使用方法

对象式：setState(stateChange,callback)——新状态不依赖于原状态。函数式：setState((state,props)=>stateChange,callback)——新状态依赖于原状态。——stateChange：状态改变对象，只包含改变的内容。——callback：可选的回调函数，在状态更新完毕并且页面也更新完毕（render()）后调用，可以用于获取最新的状态数据。 setState()更新状态是异步的还是同步的？ 1、在react控制的回调函数

2022-03-31 14:39:06 914

原创 React生命周期

旧生命周期： 1、挂载时（由ReactDom.render()触发）：constrcutor()——componentWillMount()——render()——componentDidMount() 2、setState()时：shouldComponentUpdate()——componentWillUpdate()——render()——componentDidUpdate() 3、forceUpdate()时：componentWillUpdate()——render()——com..

2022-03-31 14:37:27 436

原创 jsonp跨域原理

基本原理：浏览器端：动态生成一个script标签来请求后台接口，标签的src属性就是接口的url。定义一个接收响应数据的函数，并将函数名作为请求参数提交给后台。服务器端：接收到请求处理产生结果数据，返回一段JS代码，JS代码中会对定义好的函数执行调用，并将结果数据作为实参传给函数。浏览器端：收到响应后自动执行JS代码，调用定义好的函数，得到结果数据。注意： 1、jsonp只能解决GET类型的ajax请求跨域问题。 2、jsonp请求不是ajax请求，而是一般的get..

2022-03-31 14:35:34 407

原创 DOM的diffing算法

基本原理当状态中数据发生变化时，react会根据新数据生成新的虚拟DOM，然后将新虚拟DOM和旧虚拟DOM进行diff比较，如果内容没有变化，就直接使用之前的真实DOM，如果有变化，就根据新虚拟DOM生成新的真实DOM，然后将新的真实DOM渲染到页面中替换旧真实DOM。虚拟DOM中key的作用： 1、将新虚拟DOM和旧虚拟DOM进行diff比较时，如果在旧虚拟DOM中找到了和新虚拟DOM 相同的key，就比较两者的内容，如果内容没变，则直接使用之前的真实DOM，如果内容变了，就根据..

2022-03-31 14:34:44 588

原创 React组件优化

问题： 1、只要执行setState()，组件就会重新render()，即使state没有任何变化。 2、父组件重新render()，子组件也会重新render()，即使子组件没有任何变化。原因： shouldComponentUpdate()默认返回true，即使数据没有任何变化render()也会执行。解决方法： 1、重写shouldComponentUpdate()方法，比较新旧state和props数据，只有数据发生变化时才返回true，否则返回false..

2022-03-31 14:33:59 664

原创 JS中深拷贝和浅拷贝的区别

对于引用类型的变量，变量名保存在栈内存中，变量值保存在堆内存中，并且在栈内存中会提供一个引用地址指向堆内存中的变量值。浅拷贝 ——当变量B复制变量A时，只是将变量A保存在栈内存的地址值赋值给了变量B，此时变量A和B保存的是同一个地址。当变量A通过这个地址修改指向的对象中的数据时，变量B也会受到影响。深拷贝 ——当变量B复制变量A时，在堆内存中开辟了一个新的内存空间来保存这个新的对象。此时虽然变量A和B指向的对象看上去是一模一样的，但是变量A和B在栈内存中保存的地址值不一样，它们指

2022-03-31 14:31:36 131

qq_41759751的博客