前端与 HTML | 青训营笔记

用户7905203499293
50 阅读2分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 6 天。

一、本堂课重点内容：

  • React 的发展历史
  • React 的应用场景
  • React 的设计思想
  • 响应式编程/函数式编程的设计思想
  • 其他 react 生态框架科普

二、详细知识点介绍：

  • React的应用

    1. 网页应用开发
    2. 移动端应用开发(借助React native)
    3. 桌面应用开发（借助Electron）
    4. 3D的开发---VR、AR

  • React的设计思想

    响应式：当事件发生时，执行既定的回调，使状态变更，UI界面相应变化，而不用手动操作DOM

    响应式编程：

    1. 状态更新，UI 自动更新
    2. 前端代码组件化，可复用，可封装
    3. 状态之间的互相依赖关系，只需声明即可，不用手动维护，避免依赖链路太长产生回调地狱

    组件化：

    1. 组件是组件的组合/原子组件
    2. 组件内拥有状态，外部不可见
    3. 父组件可将状态传入组件内部

  • useEffect

    获取外部数据源的过程称为副作用，在组件挂载时执行一次。

    该方法传入一个函数，和一个数组，数组是状态的数组，称作依赖项，该函数在 mount 时，和依赖项被 set 的时候会执行。有“副作用”的函数，要传入 useEffect 来执行。副作用代表除了单纯的计算之外，还要做其它的一些事情，比如网络请求，更新 DOM，locatStorage 存储数据等。

    格式：useEffect(()=>{},arr)；

  • useState

    useState 通过在函数组件里调用它来给组件添加一些内部 state。useState 会返回一对值：当前状态和一个让你更新它的函数

    用法：
import React, { useState } from 'react';
const [当前状态, 更新函数] = useState(传入一个初始值);

  • Hook使用法则

    不要在循环，条件或嵌套函数中调用 Hook

  • Virtual DOM

Virtual DOM 是一种用于和真实 DOM 同步，而在JS 内存中维护的一个对象，它具有和DOM 类似的树状结构，并和DOM 可以建立一一对应的关系。

  • 如何Diff

    两棵树从根节点开始一个结点一个结点进行比较

    对于不同类型(如span变为div)的元素-->替换

    对于同类型的 DOM 元素-->更新

    对于同类型的组件元素-->递归

  • 状态管理库

核心思想：将状态抽离到UI外部进行统一管理

三、实践练习例子：

import React，[ useState } from 'react';
function Example() {
    const [count， setCount] = useState(0);//useState里是初值
    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>
                Click me
            </button>
        </div>
    )
}

四、课后个人总结：

除常见React知识点外，学到了很多之前没涉及过的知识。

五、引用参考：

avatar
文章
阅读
粉丝