特效开发（bootstrap react）

# bootstrap简介与安装

官网：<https://getbootstrap.com/>

`bootstrap` 的 `github` 地址：<https://github.com/twbs/bootstrap>

`bootstrap` 是一个用于制作页面界面的框架

框架: 提供一个标准和规范，再由开发人员自行填充内容

## 安装

点击页面中的 download 按钮：<https://getbootstrap.com/docs/5.0/getting-started/download/>

或者在 `github` 中下载 `bootstrap` 源代码，源代码中的 `dist` 文件夹就是我们要用的文件

`npm` 安装

```shell

npm i bootstrap

- [布局](#布局)

  - [响应式布局](#响应式布局)

  - [断点](#断点)

  - [布局容器](#布局容器)

  - [网格布局](#网格布局)

# 布局

## 响应式布局

响应式布局就是根据屏幕宽度，切换不同页面布局的一种布局方式，这里可以查看 bootstrap 官网在不同屏幕宽度下的表现

bootstrap 是使用断点来完成响应式布局的

## 断点

断点是 bootstrap 面向不同屏幕宽度，预制好的媒体查询

通常的讲，断点，代表的就是不同的屏幕宽度

bootstrap 中如何体现断点，在class中，添加不同断点的名称，可以采用不同断点的样式

# 布局容器

通常是页面的根节点，使用 `class="container"` 来设置布局容器

布局容器受断点影响，可以设置不同断点上的容器，具体可查表：

<https://getbootstrap.com/docs/5.0/layout/containers/>

## 网格布局

将内容进行行列分布的布局方式就叫网格布局

bootstrap中网格布局的灵魂样式就是 行：`row`，列：`col`

display显示方式

 <!-- 参考：https://getbootstrap.com/docs/5.2/utilities/display/ -->

    <!-- 语法:

        在 xs 断点下: d-{value}

        xs 以上: d-{breakpoints}-{value}

    -->

    <!-- 当屏幕宽度小于 sm 时显示 -->

    <div class="container d-block d-sm-none">小于 sm</div>

    <!-- 当屏幕宽度为 md 时 显示 -->

    <div class="container d-none d-sm-block d-md-none">md</div>

    <!-- 当屏幕宽度大于 lg 时 显示 -->

    <div class="container d-none d-md-block">大于 lg</div>

 原声表单验证

<!--

    // 参考：https://developer.mozilla.org/zh-CN/docs/Learn/Forms/Form_validation

    知识点

    学会使用html自带的表单验证

    input 的验证属性

        required

        pattern

        minlength maxlength

        min max

        type

    novalidate 屏蔽html自带的验证报告

    input 的 validity 属性

        validity.valueMissing

        validity.patternMismatch

        validity.rangeOverflow

        validity.rangeUnderflow

        validity.tooLong

        validity.tooShort

        validity.valid

    自定义提示信息

        input.setCustomValidity

    form 或 input 的 checkValidity

    显示验证报告

        form.reportValidity()

    表单验证总结步骤

        1. 给表单添加 novalidate 屏蔽自动验证报告

        2. 对每个元素的 validity 属性进行验证

        3. 根据每个元素的验证结果设置自定义异常 setCustomValidity

        4. 提交验证报告

        5. 根据验证结果执行后续网络操作

# 其他组件和工具类

除了布局和表单元素等基础功能外，`bootstrap` 还提供了一系列的开箱即用的功能

例如组件（`Component`）和工具类（`Utilities` 和 `Helper`），这些东西需要开发者在需要时，按需引入

<https://getbootstrap.com/docs/5.1/components/accordion/>

其中，部分组件包含动画，若要使用带动画的组件，请引入 `bootstrap.js` 文件，并参考文档中的 `via JavaScript` 部分进行函数调用

# 媒体文件和图片懒加载(lazy-loading)

什么是懒加载？

懒加载就是页面中看不到时，就不去加载它，当页面中出现该内容时再去加载

懒加载多用于图片和媒体文件

好处：

好处在于用户看不见的东西就不用使用浏览器去下载了

还可以让页面加载更快

    // 总结

    // 1. 给需要懒加载的元素添加 data-src

    // 2. 给滚动元素添加 scroll 事件监听器

    // 3. 计算显示图片的临界值 scrollTop = 内容高 - 图片高 - 窗口高

    // 4. 判断容器元素的 scrollTop 大于临界值 加载 data-src

react

# react 简介

中文官网：<https://zh-hans.reactjs.org/>

`react` 是一个 **js核心库**，如同 `jquery` 一样，具有大量 `react` 生态(围绕 `react` 核心开发的库)

特点：

- 声明式

  - 也就是js中的数据决定页面最终渲染的结果

  - 声明式不是响应式，但往往都是同时出现共同作用页面

    - 响应式：数据变化页面会立即更新

- 组件化

  - 一个包含所有外观和行为的，独立可运行的模块，称为组件

  - 组件化的思想可以将复杂页面，化繁为简的进行设计

  - 组件可提高代码复用性

- 一次学习，跨平台编写

  - 使用 `react` 可以开发 桌面web页面，移动端页面，移动app，桌面app等

# jsx 语法

jsx 语法保留了js的所有特性，在此基础上扩展了 react 的元素声明语法，例如：

```jsx

// 声明一个 react-dom

const element = <h1>Hello World</h1>

若 react-dom 标签有多行，可以用圆括号包裹

```jsx

const element = (

    <h1>

        Hello World

    </h1>

)

每一给 react-dom 只能有一个根节点

```jsx

const element = (

    <h1>

        Hello World

    </h1>

    // h1 和 h2 都是根节点 这个写法是错误的

    <h2>

        222

    </h2>

)

## 插值

将变量插入到元素中，使用大括号 `{}`

```jsx

const msg = 'hello world !!!'

const element = <h1>{msg}</h1>

花括号内的插值部分可以写入任何有效的 js 表达式

## 插入html属性

直接使用引号或花括号插入表达式，如：

```jsx

const styleObj = {backgroundColor: "green"}

// 需要注意的是 style 属性必须用花括号来插入值

// 不是所有的html属性名都是原始名称，例如 class 应该写为 className 并采用驼峰式命名方法 而不是html的短横线 因为本质上这里的标签是js代码

const element = (

    <h1

        style={styleObj}

        className="content">

        Hello World

    </h1>

)

```

## 使用函数创建对象

```jsx

// 可以使用函数创建 react-dom 对象

const element = React.createElement(

  'h1',

  {className: 'greeting'},

  'Hello, world!'

);

// 等价于

const element = (

  <h1 className="greeting">

    Hello, world!

  </h1>

);

```

> 注意：jsx 中的 react-dom 内容，本质上会被 babel 翻译成 React.createElement 函数

     什么是组件

  组件具备以下特点

         1. 独立显示的页面内容

     2. 独立维护的组件状态

     3. 组件被当作标签使用

    //      所以，组件是一个具备独立显示内容，独立维护状态，被当作标签使用的可复用模组

    // 应用场景

    //      可复用的页面内容，就可以考虑封装成组件

    // 声明组件

    //      类组件

    //          render函数

    //          构造函数和props

    //          props.children

    //      函数组件

    //          参数props

    //          函数组件没有this

    // react 中声明组件有两种方法

    // 一种叫 类组件 另一种叫 函数组件

    // 两种组件对于 react 来说是等价的

    // 声明类组件

    // 需要继承 React.Component

    class AComponent extends React.Component {

        // 可以有组件的属性

        label = 'h'

        // 构造函数中包含props参数

        // props 代表组件的 html 属性

        // props 是只读属性

        constructor(props) {

            // 由于存在父类 React.Component

            // 所以构造函数中应先调用super

            super(props)

            // render 函数中可以使用 this.props 访问此处的 props

            console.log(props)

            // 可以使用 props.children 代表组件标签体里的内容

            console.log(props.children)

        }

        // 可以有组件方法

        getTime() {

            return new Date()

        }

        // 类组件中必须包含 render 方法

        render() {

            // render 方法必须返回一个 react-dom 对象

            // 返回的 react-dom 对象用于描述组件长什么样子的

            return (

                <div>

                    {/* 组件中可以调用自己的属性和方法 */}

                    {this.label}: {this.getTime().getHours()}; m: {this.getTime().getMinutes()};

                    s: {this.getTime().getSeconds()}

                    <br/>

                    {/* 标签体的内容可以插值到 render 中 */}

                    {this.props.children}

                </div>

            )

        }

    }

    // 函数组件

    // 参数props就是标签的html属性

    // props 中也包含 children

    function BComponent(props) {

        // 此处的this为 undefined

        // 之所以为 undefined 是因为函数组件没有实例对象

        console.log(this)

        console.log(props)

        // 可以在组件内声明其他函数和变量

        let count = 0

        function getCount() {

            return count

        }

        // 函数组件必须返回一个react-dom对象

        return (

            <div>

                <div>我是一个函数组件</div>

                <div>{count}: {getCount()}</div>

                <div>{props.children}</div>

            </div>

        )

    }

    ReactDOM.createRoot(document.querySelector('#root')).render((

        <div>

            {/* 组件被当作标签使用 */}

            {/* 可以使用插值给属性赋值 这样赋值的属性就可以不是字符串 */}

            <AComponent name="张三" age={16} isShow={false}>

                <div>hello</div>

                <div>world</div>

            </AComponent>

            <AComponent></AComponent>

            <BComponent name="张三" age={16} isShow={false}>

                <h1>这是BComponent的标签体</h1>

                <div>hello</div>

                <div>world</div>

            </BComponent>

        </div>

    ))

    什么是组件状态?

    //      在计算开发领域 怎么理解状态(state)这个英文？

    //      假设我们制作一个时钟，时钟每秒钟的时间值都不一样

    //      那么我们将描述某个 “时刻” 的时钟的 “数据” 称为该时钟在那个 “时刻” 的 “状态” (state)

    //      所以 state 一词，通常指某个时刻用于描述某个对象的数据模型

    //      因此 有时会听到上一个状态 下一个状态的说法 这指的就是不同时刻 描述同一个对象的数据模型

    // 声明状态

    // 组件的状态更新 this.setState 的使用

    //      1. 不要直接修改 state 要通过 setState 修改

    //      2. setState 的参数不要直接依赖 this.state 或 this.props；应使用 this.setState((state, props)=>{return {}}) 代替

    //      3. setState 方法是异步的 可以通过 setState 的第二个回调函数 来执行赋值成功后的代码

    //      4. setState 最终会修改 this.state

     什么是生命周期

    //      当我们以面向对象的思想看待组件时，可以将组件看成一个人

    //      那么人就有生老病死的过程，那么组件的生老病死的过程是通过组件的方法来体现的

    //      这些体现生命过程的方法，就称为生命周期

    //      总结:

    //      人->生老病死

    //      代码->用函数来描述对象的生老病死

    // 生命周期有哪些阶段

    //      挂载

    //          constructor()

    //          static getDerivedStateFromProps() // https://zh-hans.reactjs.org/docs/react-component.html#static-getderivedstatefromprops

    //          render()

    //          componentDidMount()

    //      更新

    //          static getDerivedStateFromProps(props, state)=>{[key: string]: any} 每次调用渲染函数render前调用，返回值是希望改变的状态对象

    //          shouldComponentUpdate(props, state)=>boolean 判断是否应该更新，返回一个布尔值

    //          render()

    //          getSnapshotBeforeUpdate(prevProps, prevState)=>{[key: string]: any} 每次更新前调用，返回值将被传递给 componentDidUpdate 充当第三个参数

    //          componentDidUpdate(prevProps, prevState, snapshot)

    //      卸载

    //          componentWillUnmount()

    //      异常捕获

    //          static getDerivedStateFromError()

    //          componentDidCatch()

    // 应用场景

    //      其中 挂载和卸载的 生命周期用得比较多

    //      constructor() 常用于初始化组件，拉取远程数据

    //      componentDidMount() 用于页面第一次渲染完成后，查询页面元素

    //      componentWillUnmount() 卸载组件时对事件的解绑等需要处理的事

    // 卸载组件

    //      root.unmount()