华清远见重庆中心—高级特效开发总结

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 组件消失就会调用这个函数