rem
rem
长度单位(是移动端设计中的常用单位)
1个rem == html中的fontSize大小
bootstrap
断点
em
<576px sm
≥576px= md
≥768px
lg
≥992px xl
≥1200px xxl
≥1400px
row
行 col
列
父元素设置位置
align-items
-{start|center|end|baseline}
子元素设置位置
align-self
-{start|center|end}
浮动
float
-start-end
vstack
设置所有子元素纵向排列## 二级目录
gap
-{number} 0~5 设置子元素之间的间隔
text-align
设置文本在标记中的位置
text
-{wrap|nowrap}设置文本换行
fw
设置字体的粗细
fs
设置字体大小
react
React
是一个用于构建用户界面的JavaScript库
。
用户界面: HTML页面(前端)
React主要用来写HTML页面,或构建Web应用
如果从MVC的角度来看, React仅仅是视图层(V ) , 也就是只负责视图的渲染,而并非提供了
完整的M和C的功能
react的使用
React
创建标记
React.createElement(参数1,参数2,…参数3)
参数1:标记的名称
参数2:标记的属性 {class:‘box’,width:‘200’… }
参数3:标记的子节点 (节点树)
组件的定义方式
1、函数定义组件
首页字母大写、
return 返回React元素或者null,返回null时就不显示内容
function MyApp1(){
return (
<div>
<div>Hello World</div>
</div>
)
}
2、class定义组件
使用class 定义一个类,类名必须首字母大写
使用extends 继承React.Component
定义一个render函数,作为渲染组件的函数
在render函数定义return返回值,返回React元素
class MyApp3 extends React.Component{
render(){
return (
<div>Hello</div>
)
}
}
state
类组件使用构造函数中定义state
state = {
count:1,
}
函数组件中没有state参数
React 提供了一个useState 函数,设置state中的参数状态
const [count,setCount] = React.useState(0)
props
父组件向子组件传递信息
1、在子组件标记中自定义一个属性名称
2、将父组件中的内容给子组件标记属性赋值
3、子组件可以通过this.props.属性 获取传递过来的信息
子组件向父组件发送信息
1、在父组件中设置一个触发事件函数(形参)
2、在子组件标记中自定义属性,并传入上述的函数名称
3、在子组件中设置props传递过来的函数
生命周期
- 组件的生命周期有助于理解组件的运行方式、完成更复杂的组件功能,分析组件错误原因等
- 组件的生命周期:组件从被创建到挂载到页面中运行,再到组件不用时卸载的过程
- 生命周期的每个阶段总是伴随着一些方法调用,这些方法就是生命周期的钩子函数。
- 钩子函数的作用:为开发人员在不同阶段操作组件提供了时机。
- 只有"类组件"才有生命周期
创建时 constructor -> render -> componentDidMount
更新时 render -> componentDidUpdate
卸载时 componentWillUnmount
constructor
渲染页面完成前
render
渲染页面
componentDidMount
渲染页面完成后
componentDidUpdate
更新完成后执行该函数
componentWillUnmount
组件消失就会调用这个函数