xiaoxustudy - 博客园

2020年7月31日

摘要：复合属性 flex，是 flex-grow、flex-shrink 和 flex-basis 的简写属性，用来指定 flex 子项如何分配空间。例子三个子盒子在父盒子中的宽度比例为 1：2：3 <!DOCTYPE html> <html> <head> <meta charset="utf-8 阅读全文

posted @ 2020-07-31 17:10 xiaoxustudy 阅读(157) 评论(0) 推荐(0)

伸缩布局常用属性

摘要：伸缩布局也叫 flex 布局。有 2 个属性比较重要： display: inline-flex 将对象作为弹性伸缩盒展示，用于行内元素 display: flex 将对象作为弹性伸缩盒展示，用于块级元素一般都是用 display: flex 。基本都是针对块级元素布局。常用属性 flex-di 阅读全文

posted @ 2020-07-31 16:47 xiaoxustudy 阅读(384) 评论(0) 推荐(0)

2020年7月27日

用纯 CSS 创建一个三角形

摘要：参考自网络资料(原文第 4 点)： https://juejin.im/post/5cb92d9a5188254160581b87。 1. 实现方式 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" 阅读全文

posted @ 2020-07-27 17:13 xiaoxustudy 阅读(599) 评论(0) 推荐(0)

2020年7月23日

React 【State进阶】通过条件判断优化渲染、使用不可变数据、单一数据源、状态提升、使用无状态组件

摘要：目录： 1. 通过条件判断优化渲染 shouldComponentUpdate PureComponent（推荐使用） 2. 使用不可变数据 3. 单一数据源 4. 状态提升 5. 使用无状态组件一、通过条件判断优化渲染例子目前的页面表现如下，点击 “删除” 按钮之后在控制台会输出商品 id 阅读全文

posted @ 2020-07-23 22:10 xiaoxustudy 阅读(1005) 评论(0) 推荐(0)

2020年7月20日

React 【认识 State】定义state、修改state、state的不可变原则、state的props的区别

摘要：目录： 1. 如何定义 State 2. 如何修改 State 使用 setState setState 是异步的 State 的更新是一个浅合并的过程 3. State 的不可变原则值类型数组类型对象类型 4. State 和 Props 的区别 state props state 和 pr 阅读全文

posted @ 2020-07-20 15:03 xiaoxustudy 阅读(3407) 评论(0) 推荐(0)

2020年7月19日

React 调试开发插件 React devtools 的使用

摘要：可以在谷歌扩展应用商店里获取这个插件。如果不能访问谷歌应用商店，可以在 npm 网站(www.npmjs.com)上搜索 react-devtools ，然后根据官网指导进行安装。安装插件后，控制台出现 “Components” 跟 “Profiler” 菜单选项。查看版本，步骤：下面介绍 r 阅读全文

posted @ 2020-07-19 14:35 xiaoxustudy 阅读(6882) 评论(0) 推荐(0)

2020年7月18日

React 【事件处理】React事件和DOM事件、this关键字的处理、向事件处理程序传递参数、向父组件传递参数、React事件机制

摘要：目录： 1. React 事件和 DOM 事件如何在 React 中添加事件 React 事件和传统 DOM 事件处理异同 2. 事件处理中 this 的注意事项方法 1：在 JSX 中使用 bind 方法方法 2：在构造函数中使用 bind 方法方法 3：使用箭头函数 3. 事件处理如何传阅读全文

posted @ 2020-07-18 16:11 xiaoxustudy 阅读(814) 评论(0) 推荐(0)

2020年7月16日

React 行内样式、引入样式表、CSS Module、CSS管理进阶

摘要：目录： 1. 行内样式 2. 引入样式表 3. CSS Module 4. CSS 管理进阶一、行内样式在 React 元素中，使用行内样式的写法是这样的：行内样式实际上就是 React 元素上的一个属性，属性的值是对象，所有对象的属性名均为 CSS 属性。唯一需要注意的是， CSS 属性写法阅读全文

posted @ 2020-07-16 20:48 xiaoxustudy 阅读(2030) 评论(0) 推荐(0)

2020年7月15日

React Props、列表渲染、条件渲染

摘要：目录： 1. Props 概念 2. 不同类组件 Props 传递 3. 列表渲染 4. 条件渲染一、Props 概念什么是 props 当 React 元素作为自定义组件，将 JSX 所接受的属性转换为单个对象传递给组件，这个对象被称为“props”。更简单的理解是，props 是父组件传递阅读全文

posted @ 2020-07-15 15:06 xiaoxustudy 阅读(794) 评论(0) 推荐(0)

2020年7月13日

React 【组件和 JSX 】编写React元素、创建组件、理解JSX、JSX规则、使用Fragments

摘要：目录： 1. 编写 React 元素 2. 创建组件 3. 理解 JSX 4. JSX 规则 5. 使用 Fragments 编写 React 元素打开 index.js，创建一个叫做的 element 的元素，用 h1 标签将先要显示的文字包裹。React 通过 ReactDom.render 阅读全文

posted @ 2020-07-13 15:41 xiaoxustudy 阅读(1040) 评论(0) 推荐(0)