2021 年 2月随笔档案 - 程序员草莓

css面试题-圣杯布局

摘要：单列布局： div header。div body。div footer。两列布局：中间有：div body里面有 div left right。 left： float：left。三列布局： middle。 right： float： right。买票，飞上去，骑在第一个人脑袋上，是有红色的阅读全文

posted @ 2021-02-28 23:20 程序员草莓阅读(98) 评论(0) 推荐(0)

2.1组件1 state属性知识点：setState 还可以怎么写？

摘要：阅读全文

posted @ 2021-02-26 18:30 程序员草莓阅读(48) 评论(0) 推荐(0)

6.1 React组件 Component的两个问题

摘要：1 Component的两个问题： 1 只要执行 setState（），即使不改变状态数据，组件也会重新render（）》效率低。 2 只要当前组件重新render（），就会自动重新渲染render子组件，即使子组件没有使用到父组件的任何数据。》效率低。 1 只要执行setState（），哪阅读全文

posted @ 2021-02-26 18:11 程序员草莓阅读(100) 评论(0) 推荐(0)

7.1 React异步加载

摘要：参考博客：https://www.bilibili.com/video/BV1QV41127Gk lazy, Suspense Suspense n. 悬念；悬疑；焦虑；悬而不决 prepatation w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble 阅读全文

posted @ 2021-02-26 17:40 程序员草莓阅读(69) 评论(0) 推荐(0)

vscode插件配置jsx：

摘要：jsx：https://blog.csdn.net/illusion_melody/article/details/81326729 阅读全文

posted @ 2021-02-26 13:53 程序员草莓阅读(137) 评论(0) 推荐(0)

6.2 React renderProps 和 HOC组件优化

摘要：https://www.bilibili.com/video/BV13k4y117UG 阅读全文

posted @ 2021-02-25 17:22 程序员草莓阅读(73) 评论(0) 推荐(0)

2.5 React高阶组件HOC

摘要：参考视频： https://www.bilibili.com/video/BV1jy4y127Nt https://www.bilibili.com/video/BV18T4y1w7nF 高阶组件HOC，高阶函数HOF：高阶组件和高阶函数是完全一致的。是一个函数，传入一个组件，返回一个组件。作用阅读全文

posted @ 2021-02-25 17:20 程序员草莓阅读(91) 评论(0) 推荐(0)

2.4 React 事件处理，受控组件和非受控组件。

摘要：参考视频： https://www.bilibili.com/video/BV1wy4y1D7JT?p=34 https://www.bilibili.com/video/BV1HC4y1t7hi 受控组件：表单元素 <Input> ,<textare>和 <select> 会自己维护 state 阅读全文

posted @ 2021-02-25 16:46 程序员草莓阅读(73) 评论(0) 推荐(0)

6.1React组件优化纯组件（Pure Component）与shouldComponentUpdate关系

摘要：参考博客： https://segmentfault.com/a/1190000014979065 参考视频：https://www.bilibili.com/video/BV1Zt4y1i7d2?from=search&seid=2794796125273489545 问题：父组件包含子组件，当父阅读全文

posted @ 2021-02-25 15:37 程序员草莓阅读(192) 评论(0) 推荐(0)

3.0 react-router react脚手架安装

摘要：https://blog.csdn.net/qq_45429539/article/details/113624800 百度到的第一个方法：1.执行npm install -g create-react-app全局安装2.执行npx create-react-app myapp创建项目仍然不好用，阅读全文

posted @ 2021-02-25 14:21 程序员草莓阅读(116) 评论(0) 推荐(0)

CSS面试题之浏览器加载 js，css，html？

摘要：推荐博客：：： https://blog.csdn.net/rainnnbow/article/details/51125498 https://blog.csdn.net/xifeijian/article/details/10813339 https://blog.csdn.net/xifeij 阅读全文

posted @ 2021-02-24 17:51 程序员草莓阅读(58) 评论(0) 推荐(0)

2.1组件1 state属性知识点：调用setState 会发生什么？

摘要：1 setState是谁调用的？ this.setState setState的调用会引起React的更新生命周期的4个函数执行。 shouldComponentUpdate (true, should, 阀门）（当shouldComponentUpdate执行时，返回true，进行下一步，this 阅读全文

posted @ 2021-02-24 16:29 程序员草莓阅读(212) 评论(0) 推荐(0)

1.2类组件。

摘要：阅读全文

posted @ 2021-02-23 16:52 程序员草莓阅读(33) 评论(0) 推荐(0)

1.1 React 核心概念 1.12diff算法最终版

摘要：大佬博客：https://react.iamkasong.com/diff/one.html#%E7%BB%83%E4%B9%A0%E9%A2%98 参考视频： https://www.bilibili.com/video/BV1uh411177Q https://www.bilibili.com/ 阅读全文

posted @ 2021-02-23 16:10 程序员草莓阅读(116) 评论(0) 推荐(0)

2.1 组件1 state属性知识点：setState是同步还是异步？

摘要：我的回答：一。setState是同步执行的，但是state并不一定会同步更新。二。 setState在不同模式下，效果是不同的。 1如果是在concurrent模式下都是异步的。 reactDOM.createRoot 2如果是在legacy模式下，三。this.state 是根据 isBa 阅读全文

posted @ 2021-02-23 15:49 程序员草莓阅读(832) 评论(0) 推荐(0)

2.0 React 组件0 组件的生命周期

摘要：参考链接：https://www.jianshu.com/p/514fe21b9914 https://blog.csdn.net/c_kite/article/details/80303341 react为什么需要引入新的生命周期函数？ react V16.0前的生命周期。 1 组件初始化。2 挂阅读全文

posted @ 2021-02-22 18:30 程序员草莓阅读(74) 评论(0) 推荐(0)

React重新学习

摘要：react和vue对比： 1 什么是模块化：从代码的角度进行分析。（可以复用的代码，抽离为单个模块，便于模块的维护和开发） 2 什么是组件化：从UI界面进行分析。（把可复用的UI元素，抽离为单独的组件） 3 组件化的好处：抽离出为单独的组件。 4 vue如何实现组件化：通过 vue文件，创建阅读全文

posted @ 2021-02-22 15:53 程序员草莓阅读(57) 评论(0) 推荐(0)

js dom 事件委托的 target 和currentTarget

摘要：参考博客：https://blog.csdn.net/weixin_42458965/article/details/105687926 https://www.cnblogs.com/guojiabing/p/12213332.html target是事件触发的真实元素。（点击！） current 阅读全文

posted @ 2021-02-22 15:13 程序员草莓阅读(239) 评论(0) 推荐(0)

js dom 事件委托（事件冒泡机制的使用）

摘要：参考视频：https://www.bilibili.com/video/BV1vt411Q7SE?from=search&seid=4135034233922091596 https://www.bilibili.com/video/BV1yi4y1F79t?from=search&seid=413 阅读全文

posted @ 2021-02-20 18:33 程序员草莓阅读(166) 评论(0) 推荐(0)

js dom 阻止事件冒泡，阻止事件的默认行为

摘要：参考博客： https://www.cnblogs.com/plane-hjh/p/7880131.html https://www.cnblogs.com/leftJS/p/10948138.html http://caibaojian.com/javascript-stoppropagation 阅读全文

posted @ 2021-02-20 17:56 程序员草莓阅读(597) 评论(0) 推荐(0)

js dom（DOM2事件模型）事件流，事件捕获，事件冒泡

摘要：参考视频： https://www.bilibili.com/video/BV1m7411L7YW/?spm_id_from=333.788.videocard.0 参考博客： https://blog.csdn.net/chenjuan1993/article/details/81347590 h 阅读全文

posted @ 2021-02-20 17:45 程序员草莓阅读(462) 评论(0) 推荐(0)

ES6 扩展运算符2

摘要：ES6 扩展运算符：用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中。参数对象可以遍历属性，拷贝到对象。 1 对象的扩展运算符。 const p = {name:'caomei',age:18}; console.log({...p}) // {name: "caomei",ag 阅读全文

posted @ 2021-02-19 17:51 程序员草莓阅读(49) 评论(0) 推荐(0)

1.3 React核心概念 1.3 单一数据流

摘要：sad 阅读全文

posted @ 2021-02-18 17:48 程序员草莓阅读(23) 评论(0) 推荐(0)

1.2 React核心概念 1.2组件化

摘要：12312 阅读全文

posted @ 2021-02-18 17:34 程序员草莓阅读(25) 评论(0) 推荐(0)

1.1 React 核心概念 1.13 diff算法源码分析

摘要：博客：：： https://juejin.cn/post/6844903607913938951 https://baijiahao.baidu.com/s?id=1660483397909568142&wfr=spider&for=pc https://www.pianshen.com/artic 阅读全文

posted @ 2021-02-18 17:33 程序员草莓阅读(146) 评论(0) 推荐(0)

1.1React 核心概念 1.11 虚拟DOM

摘要：参考博客：https://www.cnblogs.com/zhuzhenwei918/p/7271305.html 参考视频： https://www.bilibili.com/video/BV1wy4y1D7JT?p=4 https://www.bilibili.com/video/BV1dV41 阅读全文

posted @ 2021-02-18 16:14 程序员草莓阅读(49) 评论(0) 推荐(0)

1.1React 核心概念 1.12 diff算法

摘要：diff算法核心概念： 3分钟快速了解：https://www.bilibili.com/video/BV1fy4y1i7uA?from=search&seid=7770427632076433111 1 遍历老的虚拟DOM 2 遍历新的虚拟DOM， 3 重新排序如何对比两个新树和旧树呢？阅读全文

posted @ 2021-02-18 15:47 程序员草莓阅读(67) 评论(0) 推荐(0)

react项目：

摘要：1 命令： https://www.cnblogs.com/mmit/p/12639011.html npm i cnpm -g --registry=https://registry.npm.taobao.org cnpm install -g create-react-app create-re 阅读全文

posted @ 2021-02-13 23:19 程序员草莓阅读(98) 评论(0) 推荐(0)

5前端面试-计算机网络浏览器运作原理总结01

摘要：视频： https://www.bilibili.com/video/BV1x54y1B7RE?from=search&seid=10948197841954912425 比较好的博客： https://blog.csdn.net/dangnian/article/details/50876241? 阅读全文

posted @ 2021-02-12 22:46 程序员草莓阅读(114) 评论(0) 推荐(0)

11.redux 面试题目

摘要：1 react源码分析的面试题： https://www.bilibili.com/video/BV16t4y1r7oJ?from=search&seid=8297901867903515493 简单状态管理： context API unstated。复杂状态管理：数据流：单项数据流（redu 阅读全文

posted @ 2021-02-10 17:29 程序员草莓阅读(1381) 评论(0) 推荐(0)

8.4 redux总结

摘要：安装包： yarn add redux, yarn add redux-thunk （redux-异步请求） yarn add axios yarn add react-redux, react-redux。 { provider , connect } {provider store=store} 阅读全文

posted @ 2021-02-10 16:55 程序员草莓阅读(39) 评论(0) 推荐(0)

8.3 react-redux 黑马

摘要：1 问题。如果想要发送一个action，导入一个store。 store.dispatch() -> reducer --> return -->store 如果多个组件想要接受state。导入store。 store.subscribe( ()=> (接受到返回的数据））监听到才能拿到数据阅读全文

posted @ 2021-02-10 14:12 程序员草莓阅读(106) 评论(0) 推荐(0)

8.2 redux （黑马）

摘要：1 什么是redux? redux 用于js状态容器，提供可以预测化的状态管理。 redux可以构建一致化应用。 2 redux设计初衷： js 管理：state 。 state包括：服务器响应，缓存数据，本地生成为持久化到服务器的数据，UI状态。管理不断变化的state非常麻烦，如果一个mo 阅读全文

posted @ 2021-02-09 17:48 程序员草莓阅读(91) 评论(0) 推荐(0)

8.1 react -redux

摘要：react redux react-redux(facebook 方便操作）必须记住的5点：容器组件( contains ) 和UI组件式（component）父子关系。 UI 组件不能和redux打交道。容器组件可以随意的和redux打交道。可以随意使用rudex的api。容器组件给阅读全文

posted @ 2021-02-09 14:47 程序员草莓阅读(92) 评论(0) 推荐(0)

8.1 redux （简写版，完整版，异步版）

摘要：零.不用redux方法：目录：src： component： count： //reducers 每一个组件都得有一个reducers。 index.jsx//(store只有一个。)this,setState({count: count+value*1 } ) // 上面的value是字符串，* 阅读全文

posted @ 2021-02-08 17:30 程序员草莓阅读(86) 评论(0) 推荐(0)

箭头函数的使用

摘要：const a = () => 1 const.log(a()) ; // console.log(a()) :1 const a = b => 1+b const.log(a(9)) ; // console.log(a()) :10 返回一个对象：{}是默认成为一个函数， const a = b 阅读全文

posted @ 2021-02-08 17:15 程序员草莓阅读(79) 评论(0) 推荐(0)

git面试题大全

摘要：git 面试大全： https://blog.nowcoder.net/n/253163e1ac1d482db6482fc7f6522586 https://segmentfault.com/a/1190000019315509 https://blog.csdn.net/nobody_1/arti 阅读全文

posted @ 2021-02-08 16:33 程序员草莓阅读(855) 评论(0) 推荐(0)

项目中遇到的1个问题。-一键重置

摘要：解决思路就是：保存 state_copy = state. 2 state赋值后重新挂载。但是出现的问题就是页面上保留了残值，没有刷新。或者就是案件直接调用api，然后一次调用8个api全部清空。第一种失败的原因：一种是，state_copy需要深拷贝，浅拷贝，导致state_cop 阅读全文

posted @ 2021-02-08 11:21 程序员草莓阅读(105) 评论(0) 推荐(0)

11. 打包上库

摘要：1 express Node 2 第三方库打包：serve serve build 阅读全文

posted @ 2021-02-05 11:37 程序员草莓阅读(54) 评论(0) 推荐(0)

10. 组件通信方式的总结

摘要：1 组件间的关系：父子组件兄弟组件（非嵌套组件）祖孙组件（跨级组件） 2 几种通信的方式： props： children props render props 消息订阅-发布（是一种理念，实现这个理念的库有很多） pubs-sub (库)，event（库）集中式管理： redux库 con 阅读全文

posted @ 2021-02-05 11:26 程序员草莓阅读(103) 评论(0) 推荐(0)

7. react- axios

摘要：as 阅读全文

posted @ 2021-02-04 16:46 程序员草莓阅读(39) 评论(0) 推荐(0)

6. React-UI antd

摘要：vant：网易的UI element：饿了么的UI ant-d：蚂蚁金服的UI。antd适用于的项目：成型的后台管理项目。 0 antd 版本兼容问题出错：：：：一定要点4.x版本： import { SmileOutlined } from '@ant-design/icons'; <Wecha 阅读全文

posted @ 2021-02-04 16:45 程序员草莓阅读(113) 评论(0) 推荐(0)

css面试题目

摘要：一。。。选择器知道哪些 CSS选择器优先级 css的权重计算、选择器有哪些，选择器优先级伪类和伪元素的区别，讲讲伪类有哪些 css3新增选择器：1 属性选择器。2 结构伪类选择器。3 伪元素选择器。 1属性选择器。 input[value] { } input[type="text"] { } 阅读全文

posted @ 2021-02-03 23:24 程序员草莓阅读(142) 评论(0) 推荐(0)

5. React-Router05 BrowserRouter 和hashrouter

摘要：1 底层原理不一样： 1 browserRouter使用的是H5的history API,不兼容IE9以下的版本。（H5新增的） 2 HashRouter使用的是URL的哈希值。（锚点，会发送历史记录） 2 url表现形式不宜用： 1 BrowserRouter 的路径中没有#，localhost: 阅读全文

posted @ 2021-02-03 22:53 程序员草莓阅读(147) 评论(0) 推荐(0)

5. React-Router04编号式路由的导航！

摘要：阅读全文

posted @ 2021-02-03 22:44 程序员草莓阅读(53) 评论(0) 推荐(0)

5. React-Router03 withRouter

摘要：一般组件用上路由组件的api 需要一个大佬来帮忙。 {withRouter} withRouter路由！！！ export default withRouter(Header) with Router可以加工一般组件，让一般组件具备路由组件所特有的API withRouter的返回值是一个新组件！阅读全文

posted @ 2021-02-03 22:40 程序员草莓阅读(81) 评论(0) 推荐(0)

5. React-Router01

摘要：一路由的基本使用： 1 明确好界面中的导航区，展示区 2 导航区的a标签改为link标签 <Link to="">Dome</link> 3 展示区中Router 标签进行路径的匹配。 <Router path='/xx' component=""><> 4 App最外侧报过一个<BrowserRo 阅读全文

posted @ 2021-02-03 22:28 程序员草莓阅读(62) 评论(0) 推荐(0)

5. React-router1- react-router理解

摘要：{ web，native，any}中我们先学习 react-router-dom。 react-router-dom（官方维护的路由器）的理解 1 react的一个插件库。 { web，native，any} 2 专门用来实现一个SPA应用。 3 基于react的项目都会用到此库。路由和路由器。阅读全文

posted @ 2021-02-02 18:42 程序员草莓阅读(84) 评论(0) 推荐(0)

5. React-router0- spa理解和路由的理解

摘要：SPA理解： 1spa 理解： 1 单页面web应用。（单页面多组件） 2 整个应有只有一个页面。（标题区，导航区，展示区，多页面：不同的页面进行切换，多个页面实现跳转，） 3 不会刷新页面，之会局部更新！！！about组件和 home组件进行交换。 4 数据都需要ajax获取请求，在前端异步处理阅读全文

posted @ 2021-02-02 17:23 程序员草莓阅读(102) 评论(0) 推荐(0)

axios案例学习总结

摘要：github搜索案例总结： 1 设计状态的时候要考虑全面，例如带有网络请求的组件，要考虑请求失败怎么办。 2 ES6小知识点：解构赋值+ 重命名。 let obj = { a : {b:1} } const {a} = obj ; //传统解构赋值 const {a:{b } } = boj; / 阅读全文

posted @ 2021-02-02 16:13 程序员草莓阅读(74) 评论(0) 推荐(0)

axios源码和常用方法

摘要：## 1. 文档 https://github.com/axios/axios ## 2. 是什么前端最流行的ajax请求库 react/vue官方都推荐使用axios发ajax请求 ## 3. axios的特点基本promise的异步ajax请求库浏览器端/node端都可以使用支持请求／响阅读全文

posted @ 2021-02-02 15:14 程序员草莓阅读(167) 评论(0) 推荐(0)

http8种请求方式

摘要：https://www.cnblogs.com/weibanggang/p/9454581.html 阅读全文

posted @ 2021-02-02 11:43 程序员草莓阅读(87) 评论(0) 推荐(0)

axios-http，ajax的封装，axios的使用

摘要：1 http的协议解释。 2 axios的8大请求方式。axios 的create。axios的拦截器。axios的取消请求。 3 axios的源码分析。 1 Http请求的基本过程：客户端（浏览器）——————》服务器 1 请求行，请求头，请求体。 2 状态行，响应头，实体内容。 All，X 阅读全文

posted @ 2021-02-01 18:32 程序员草莓阅读(300) 评论(0) 推荐(0)