第四阶段 react 学习心得

最新推荐文章于 2023-11-21 10:03:26 发布

小萌新上路啦

最新推荐文章于 2023-11-21 10:03:26 发布

阅读量167

点赞数

文章标签： react.js javascript html

本文链接：https://blog.csdn.net/m0_45076316/article/details/127121163

版权

1.自适应屏幕分辨率

确立参考系，定义标准设备的屏幕宽度和字体大小<html lang="en" style="font-size: 20px;">

比例公式（等式左右两边比例尺相同，从而达到等比例缩放的目的）：标准屏幕宽度 / 标准字体大小 = 新的屏幕宽度 / 新的屏幕字体大小let newFontSize = window.innerWidth / (600 / 20)

将页面样式中的px单位换算并替换为rem，方法是?rem = 元素的尺寸(设置需要自适应的尺寸，宽高都可以) / 标准字体大小width: (300px/20px)=15rem;

绑定窗口的resize和load事件，触发事件时计算出新的屏幕宽度时的字体大小，设置html的字体大小

function resize() {
    let newFontSize = window.innerWidth / (600 / 20) 
    // 设置html根节点的字体大小 
    html.style.fontSize =${newFontSize}px; 
} 
    window.addEventListener('resize', resize) 
    window.addEventListener('load', resize)

2.元素固定宽高比例缩放html部分

<div class="box-container">

    <div class="box box_9x16"> 

    </div> 

</div>
 /*CSS部分*/
.box { width: 100%; background-color: #f00; position: relative; } 
.box>* { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }.box_3x4::before { content: ''; display: block; padding-top: 75%; } 
.box_9x16::before { content: ''; display: block; padding-top: 56.25%; } 
.box-container { /* width: 300px; */ 300/标准字体大小16px=18.75rem width: 18.75rem; }

bootstrap框架

1.display显示

1.使用bootstrap的容器进行响应式布局的话，需要在head标签中加入此meta标签代码 <meta name="viewport" content="width=device-width, initial-scale=1.0">

2.屏幕大小参数

编辑3.举例

编辑d-block表示的是全部显示d-sm-none表示的是大于sm全部隐藏

2.float position flex先引用 <link rel="stylesheet" href=".s/bootstrap.min.css" />bootstrap中1.left用start表示2.right用end表示3.background用bg表示（颜色可以用以下单词表示）

position中方位词（top bottom left right）只能有0,50,100这三个参数之一表示，并且这三个参数代表是的是百分比


<div class="box bg-danger position-absolute start-50 top-50 translate-middle">
</div>
<div class="box bg-danger float-end">
</div>
5.text-light表示字体颜色为白色border-3表示边框宽度为3
<div class="row text-light g-5 border border-3">
3.text1.文本对齐方式 text-end表示text-align：right或者text-align：end <div class=" text-end">你好世界</div>

2.换行与溢出 text-nowrap表示 white-space: nowarp;文本不换行，默认情况自动换行 overflow-scroll表示overflow: scroll;文本超出变成滑动块

3.字体大小 fs-1表示h1jsx语法

若 react-dom 标签有多行，可以用圆括号包裹9.react-dom 只能有一个根节点const element = ( <h1> Hello World </h1> // h1 和 h2 都是根节点这个写法是错误的 <h2> 222 </h2>)10.将变量插入到元素中，使用大括号 {}react1.react特点1.声明式2.组件化3.高效（diffing算法）

4.使用虚拟DOM2.相关js库
react.js：React核心库。

react-dom.js：提供操作DOM的react扩展库

babel.min.js：解析JSX语法代码转为JS代码的库
3.注意事项
组件名必须首字母大写

虚拟DOM元素只能有一个根元素

虚拟DOM元素必须有结束标签

render有返回值return
4.组件三大属性1.state
state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)

组件中render方法中的this为组件实例对象'

状态数据，不能直接修改或更新

组件自定义的方法中this为undefined，如何解决？ a) 强制绑定this: 通过函数对象的bind() b) 箭头函数
2.props
每个组件对象都会有props(properties的简写)属性

组件标签的所有属性都保存在props中

内部读取某个属性值this.props.name4.对props中的属性值进行类型限制和必要性限制Person.propTypes= {name:PropTypes.string.isRequired,age:PropTypes.number. }

5.扩展属性: 将对象的所有属性通过props传递:<Person{...person}/>

6.默认属性值Person.defaultProps= {age: 18,sex:‘男’}

7.组件类的构造函数constructor(props){super(props)console.log(props)//**打印所有属性}3.refs1.定义：组件内的标签可以定义ref属性来标识自己2.createRef创建ref容器myRef = React.createRef() <input ref={this.myRef}/>4.事件处理
通过onXxx属性指定事件处理函数(注意大小写)

通过event.target得到发生事件的DOM元素对象