目录
一、基于rem单位的屏幕等比例缩放
rem是浏览器描述长度的单位，含义为：相对于 html 的字体大小的单位。1rem = html 根节点上1个字符的宽度
rem的作用
使用 rem 单位设置的元素尺寸，会在不同的设备屏幕宽度下（例如：手机屏幕和平板屏幕）等比例缩放
总结
确立参考系，定义标准设备的屏幕宽度和字体大小
比例公式（等式左右两边比例尺相同，从而达到等比例缩放的目的）：标准屏幕宽度 / 标
准字体大小 = 新的屏幕宽度 / 新的屏幕字体大小
将页面样式中的 px 单位换算并替换为 rem，方法是 ?rem = 元素的尺寸 / 标准字体大小
绑定窗口的 resize 和 load 事件，触发事件时计算出新的屏幕宽度时的字体大小，设置
html的字体大小
const html = document.querySelector('html')
// 1. 我们定义 标准屏幕宽为 600px 标准字体大小为 20px;
// 2. 计算新的屏幕尺寸下的新的字体大小
let newFontSize = window.innerWidth / (600 / 20)
// 重新计算字体大小
function resize() {
let newFontSize = window.innerWidth / (600 / 20)
console.log(newFontSize);
// 设置html根节点的字体大小
html.style.fontSize = `${newFontSize}px`;
}
// 3. 绑定窗口尺寸变化事件和页面加载事件
window.addEventListener('resize', resize)
window.addEventListener('load', resize)
二、bootstrap
`bootstrap` 是一个用于制作页面界面的框架，再由开发人员自行填充内容
使用bootstrap的容器进行响应式布局的话，需要在head标签中加入此meta
<meta name="viewport" content="width=device-width, initial-scale=1.0"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--使⽤X-UA-Compatible来设置IE浏览器兼容模式 最新的渲染模式-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--
viewport表示⽤户是否可以缩放⻚⾯；
width指定视区的逻辑宽度；
device-width指示视区宽度应为设备的屏幕宽度；
initial-scale指令⽤于设置Web⻚⾯的初始缩放⽐例
initial-scale=1则将显示未经缩放的Web⽂档
-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap的HTML标准模板</title>
<!-- 载⼊Bootstrap 的css -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>Hello, world!</h1>
<!-- 如果要使⽤Bootstrap的js插件，必须先调⼊jQuery -->
<script src="js/jquery-3.4.1.js"></script>
<!-- 包括所有bootstrap的js插件或者可以根据需要使⽤的js插件调⽤ -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>布局容器
container类用于固定宽度并支持响应式布局的容器
<div class="container">
</div>
//s=container-fluid类用于100%宽度，占据全部视口（viewport）的容器
<div class="container-fluid">
</div>栅格网格系统（row 行 col列）
<div class="container">
<div class="row">
<div class="col-md-2">2列</div>
<div class="col-md-10">10列</div>
</div>
</div>常用样式
标题
<h1>bootstrap head<small>副标题</small></h1>
<div class="h1">Bootstrap标题<span class="small">副标题</span></div>段落
<p class="lead"><small>副标题的样式文字</small><b>加粗</b><i>斜体</i></p>强调文字
<div class="text-muted">提示效果</div>
<div class="text-primary">主要效果</div>
<div class="text-success">成功效果</div>
<div class="text-info">信息效果</div>
<div class="text-warning">警告效果</div>
<div class="text-danger">危险效果</div>
div标签都是独自占用一行对齐效果(.text-justify:两端对齐。)
<p class="text-left">居左</p>
<p class="text-center">居中</p>
<p class="text-justify">网格系统把容器分为12分通过媒体查询实现强大的响应式的网格系统</p>列表
1.去点列表
<ul class="list-unstyled">
<li>无序列表一</li>
<li>无序列表二</li>
</ul>内联列表（垂直列表换为水平列表，保持水平成为水平导航）
<ul class="list-inline">
<li>首页</li>
<li>华清远见</li>
</ul>bootstrap给表格table4种附加样式的表格风格
1.table-striped:斑马线风格
3.table-hover：悬停高亮表格
4.table-condensed：紧凑型的表格
................................
react
创建react
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<!-- 1. 引入库 -->
<!-- react 需要引入 react 核心库 和 react-dom 库 -->
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<!-- 为了更方便书写 react 通常会使用 jsx 语法，为了支持该语法 需要引入 babel -->
<script src="js/babel.min.js"></script>
</head>
<body>
<!-- 2. 创建用于 react 渲染的根节点 -->
<div id="root"></div>
</body>
<!-- 3. 给script标签添加 type="text/babel" -->
<script type="text/babel">
// 4. 创建 root 节点对象
// 创建 react 的 root 根节点对象
const root = ReactDOM.createRoot(document.querySelector('#root'))
// 5. 渲染页面内容
// 使用 root.render 渲染页面内容
// render 函数中可以使用 jsx 语法声明页面内容
// jsx 写的内容 <h1>hello world</h1> 本质上是 js 代码
root.render(<h1>hello world</h1>)
</script>
</html>渲染元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<script src="js/babel.min.js"></script>
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
</head>
<body>
<div id="root"></div>
</body>
<script type="text/babel">
let root = ReactDOM.createRoot(document.querySelector('#root'))
// 初始化渲染
let now = new Date()
root.render((
<div>
<div className="now">当前时间:</div>
<div className="time">
{now.toLocaleString()}
</div>
</div>
))
// 渲染循环
let timer = setInterval(() => {
// 修改渲染逻辑
now = new Date()
// 渲染内容
root.render((
<div>
<div className="now">当前时间:</div>
{/* react 在每次更新的时候，都会去对比每一个 react-dom 节点
只有发现该被对比的节点有变化时（标签体变化 子节点数量变化 节点元素变化等） 才会更新节点
*/}
<div className="time">
{now.toLocaleString()}
</div>
</div>
))
}, 1000)
</script>
</html>条件渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<script src="js/babel.min.js"></script>
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
</head>
<body>
<div id="root"></div>
</body>
<script type="text/babel">
let sex = 'male'
ReactDOM.createRoot(document.querySelector('#root')).render((
<div>
{/* 使用 && 进行短路运算 前一个表达式为true时 就显示后面表达式的内容 */}
{sex === 'male' && <div style={{color: '#00f'}}>男</div>}
{sex === 'female' && <div style={{color: 'pink'}}>女</div>}
{sex === 'other' && <div style={{color: '#ff0'}}>其他</div>}
{/* 使用三元运算符 按条件显示不同的内容 */}
{sex === 'male' ? <div style={{color: '#00f'}}>男</div> :
sex === 'female' ? <div style={{color: 'pink'}}>女</div> :
<div style={{color: '#ff0'}}>其他</div>
}
</div>
))
</script>
</html>循环渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<script src="js/babel.min.js"></script>
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
</head>
<body>
<div id="root"></div>
</body>
<script type="text/babel">
let students = [
{
name: '张三',
sex: 'male',
age: 17
},
{
name: '李四',
sex: 'female',
age: 24
},
{
name: '小王',
sex: 'other',
age: 30
},
]
ReactDOM.createRoot(document.querySelector('#root')).render((
<div>
<ul>
{/* 循环渲染，使用一个数组的map函数 返回一个由 react-dom 充当成员形成的一个新数组
循环渲染一定要添加 key
*/}
{students.map((item,index) => <li key={index}>姓名: {item.name}; 性别: {item.sex === 'male' ? '男' :
item.sex === 'female' ? '女' : '不详'
}; 年龄: {item.age}</li>)}
</ul>
</div>
))
</script>
</html>受控组件
被 react 的 state 控制显示和输入的表单元素称为受控组件，受控组件的数据来自 state 而不是表
单元素自身，react 中 所有的事件都不能通过 return false 来屏蔽默认事件
<body>
<div id="root"></div>
</body>
<script type="text/babel">
function App() {
const [name, setName] = React.useState('')
const [clazz, setClazz] = React.useState('')
const [desc, setDesc] = React.useState('')
const [sex, setSex] = React.useState('other')
const [hobbies, setHobbies] = React.useState(['dlq', 'ymq'])
function submit(ev) {
ev.preventDefault()
console.log(name)
console.log(clazz)
console.log(desc)
console.log(sex)
console.log(hobbies)
}
function onNameInput(ev) {
console.log(ev)
console.log(ev.target.value)
// 由于此处的输入框是受控组件
// 所以若不改变状态， name 值不发生改变，页面就不会更新
setName(ev.target.value)
}
function onClazzChange(ev) {
console.log(ev.target.value)
setClazz(ev.target.value)
}
function onDescInput(ev) {
console.log(ev.target.value)
setDesc(ev.target.value)
}
function onSexChange(ev) {
console.log(ev.target.value)
setSex(ev.target.value)
}
function onHobbiesChange(ev) {
console.log(ev.target.value)
if (hobbies.includes(ev.target.value)) {
// 若已经包含就了删除
setHobbies(_hobbies => {
let i = _hobbies.findIndex(item => item === ev.target.value)
_hobbies.splice(i, 1)
return [..._hobbies]
})
} else {
// 不存在时 就添加进数组
setHobbies(_hobbies => {
_hobbies.push(ev.target.value)
return [..._hobbies]
})
}
}
return (
<div>
<form>
<div>
<label>
姓名:
<input type="text" value={name} onInput={onNameInput}/>
</label>
</div>
<div>
<label>
班级:
<select value={clazz} onChange={onClazzChange}>
<option value="" disabled>请选择</option>
<option value="1">一班</option>
<option value="2">二班</option>
<option value="3">三班</option>
</select>
</label>
</div>
<div>
<label>
简介:
<textarea rows="4" value={desc} onInput={onDescInput}></textarea>
</label>
</div>
<div>
<label>
性别:
<label><input onChange={onSexChange} checked={sex === 'male'} type="radio" value="male"/>男</label>
<label><input onChange={onSexChange} checked={sex === 'female'} type="radio"
value="female"/>女</label>
<label><input onChange={onSexChange} checked={sex === 'other'} type="radio" value="other"/>其他</label>
</label>
</div>
<div>
<label>
爱好:
<label><input onChange={onHobbiesChange} checked={hobbies.includes('dlq')} type="checkbox"
value="dlq"/>打篮球</label>
<label><input onChange={onHobbiesChange} checked={hobbies.includes('tzq')} type="checkbox"
value="tzq"/>踢足球</label>
<label><input onChange={onHobbiesChange} checked={hobbies.includes('ymq')} type="checkbox"
value="ymq"/>羽毛球</label>
</label>
</div>
<div>
<button onClick={submit}>提交</button>
</div>
</form>
</div>
)
}
ReactDOM.createRoot(document.querySelector('#root')).render(<App/>)
</script>状态提升
什么是状态提升？
组件向上级组件汇报自己状态的过程叫做状态提升
应用场景
1. 在父组件中需要读取子组件状态时，可以让子组件状态提升给父组件
2. 子组件需要发出某个事件，且事件将携带参数时
如何实现？
理论原理:
组件可以利用自身的 props 属性将自身状态提升到上级组件
表现形式类似于触发事件
上级组件只要绑定事件（本质是提供一个回调函数）接收参数即可
操作方法:
1. 父组件中，给子组件添加 props 属性，并分配一个函数值，该函数接收子组件的状态值为参数
2. 子组件中，在适当时机调用父组件提供的 props，并将自身状态作为参数传入父组件提供的函数
<body>
<div id="root"></div>
</body>
<script type="text/babel">
function Child(props) {
const [count, setCount] = React.useState(0);
function increase() {
setCount(_c => _c + 1)
}
// 监视 count 的变化
React.useEffect(() => {
// count 发生变化
// 通知父组件
// 将状态值作为参数传入
props.countChange(count)
}, [count])
return (
<div>
<div>count: {count}</div>
<div>
<button onClick={increase}>+</button>
</div>
</div>
)
}
function App() {
// 此函数的参数用于接收子组件状态
function onCountChange(args) {
console.log(args)
}
return (
<div>
{/* 给子组件分配一个函数 用于接收组件状态 */}
<Child countChange={onCountChange}></Child>
</div>
)
}
ReactDOM.createRoot(document.querySelector('#root')).render(<App/>)
</script>refs转发
什么是转发？
转发(ref) 的作用是获取组件中的 dom 或 一个组件
应用场景
1. 在 react 项目中 若希望通过 document.querySelector 获取某个元素时，我们应该使用 ref 替代
2. 当需要获取某个子组件的状态或调用组件的方法的时候
注意：函数组件上 不能添加 ref
使用方法:
类组件使用 React.createRef()
函数组件使用 React.useRef()
通用方法 使用箭头函数 el => { temp = el }
React.forwardRef
<body>
<div id="root"></div>
</body>
<script type="text/babel">
class ClazzComponent extends React.Component {
// 创建一个 ref 对象 并保存到组件属性中
inpRef = React.createRef()
inpEl
// 声明属性保存子组件
child
child2
onClick() {
// 可以通过 this.inpRef.current 来获取 input 元素
// console.log(this.inpRef.current.value)
console.log(this.inpEl.value)
}
onClick2() {
// 获取子组件
console.log(this.child)
// 调用子组件的属性
console.log(this.child.state)
// 调用子组件的方法
this.child.clear()
console.log(this.child2.value)
}
render() {
return (
<div>
<h1>类组件</h1>
{/* 给元素的 ref 属性 赋值一个 ref 对象 */}
{/*<input ref={this.inpRef} type="text"/>*/}
{/* 此处 el 代表的就是当前元素 input */}
<input ref={el => {
this.inpEl = el
}} type="text"/>
<button onClick={this.onClick.bind(this)}>读取输入框的值</button>
{/* 注意: ref 属性可以写在 类组件上 但不可以写在函数组件上 */}
<Child ref={child => {
this.child = child
}}></Child>
<Child2 ref={child2 => {
this.child2 = child2
}}></Child2>
<button onClick={this.onClick2.bind(this)}>清空child的输入框</button>
</div>
)
}
}
function FnComponent() {
// 函数组件内使用 useRef 来创建ref 对象
const inpRef = React.useRef()
const [inpEl, setInpEl] = React.useState(null)
function onClick() {
// 此处的 inpRef 和类组件相同
// 可以使用 inpRef.current 读取元素
// console.log(inpRef.current.value)
console.log(inpEl.value)
}
return (
<div>
<h1>函数组件</h1>
{/*<input ref={inpRef} type="text"/>*/}
<input ref={el => {
setInpEl(el)
}} type="text"/>
<button onClick={onClick}>读取输入框的值</button>
</div>
)
}
class Child extends React.Component {
state = {
value: ''
}
// 清空输入框
clear() {
this.setState({value: ''})
}
render() {
return (
<div>
<h3>child</h3>
<input value={this.state.value} onInput={ev => {
this.setState({value: ev.target.value})
}} type="text"/>
</div>
)
}
}
// 函数组件上无法使用 ref
// function Child2() {
// return (
// <div>child2</div>
// )
// }
// 我们可以使用 React.forwardRef 来创建一个函数组件
// React.forwardRef 创建的函数组件就可以使用ref
// props: 函数组件的 props
// ref: ref对象
// 返回值: 函数组件
const Child2 = React.forwardRef((props, ref) => {
// 此处的内容就是函数组件的内容
const [value, setValue] = React.useState('');
return (
<div>
<h3>child2</h3>
<input ref={ref} value={value} onInput={ev => {
setValue(ev.target.value)
}} type="text"/>
</div>
)
})
function App() {
return (
<div>
<ClazzComponent></ClazzComponent>
<FnComponent></FnComponent>
</div>
)
}
ReactDOM.createRoot(document.querySelector('#root')).render(<App/>)
</script>
扫一扫
874
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
