响应式系统与React ｜ 青训营笔记

响应式系统与React ｜ 青训营笔记

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

一、本堂课重点内容：

0. 前端应用开发历程
1. 移动原生应用开发
2. 结合Electron的桌面应用开发
3. 响应式编程与转换式
4. React 设计与实现 - 组件化、状态归属问题及生命周期
5. React的实现
6. React状态管理库-核心思想、推荐、状态机等

二、详细知识点介绍：

前置知识

• HTML、CSS、JS基础
• 基础的数据结构/算法知识
• 会使用浏览器提供的DOM API来修改DOM。更新UI

React的设计思路

0. 状态更新 UI不会自动更新。需要手动调用DOM进行更新
1. 欠缺基本的代码层面的封装和隔离，代码层面没有组件化
2. UI之间的数据依赖关系，需要手动维护，如果依赖链路长。则会遇到“Callback Hell”

• 响应式与转换式

  • 响应式系统

    • 事件->执行既定的回调->状态变更

  • 响应式编程

    • 状态更新 UI自动更新
    • 前端代码组件化、可复用、可封装
    • 状态之间的互相依赖关系，只需声明即可

  • 组件化

    • 组件是组件的组合/原子组件
    • 组件内拥有状态。外部不可见
    • 父组件可将状态传入组件内部

  • 组件设计

    • 组件声明了状态好UI的映射
    • 组件有Props/State两种状态
    • ”组件“可由其他组件拼装而成

React的实现

问题：

• JSX不符合JS标准语法
• 返回的JSX反生改变时，如何更新DOM
• State/Props更新时，要重新触发render函数

React状态管理库

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

状态机：当前状态，收到外部事件，迁移到下一个状态

应用级框架科普

0. NEXT.JS

硅谷明星创业公司Vercel的React开发框架，稳定，开发体验好，支持Unbundled Dev,swC等其同样有Serverless一键部署平台帮助开发者快速完成部署。口号是"Lct's Make Web Fastcr"

2. MODERN.JS

字节跳动Web Infra团队研发的全栈开发框架内置了很多开箱即用的能力与最佳实践，可以减少很多调研选择工具的时间

3. Blitz

无AP1思想的全栈开发框架.开发过程中无需写API调用与CRUD逻辑，适合前后端紧密结合的小团队项目

三、实践练习例子：

function Component(props) {
    //props是父组件传入的状态
    const { url } = props;
    this.text='点击我'；//状态
    //返回一个“UT”
    return (<div>
        <SubComponent props={{color: 'red'}}></SubComponent>
        <img src={url}></img>
        <button>text</button>
</div>)
}

import React, { useState } from react';
function Example() {
//Declare a new state variable,which we'll call "count"
    const [count,setCount]useState(0);
    return (
    <div>
        <p>You clicked {count}times</p>
        <button onclick={()=setCount(count 1)}>
        Click me
        </button>
    </div>
    );
}    

"use strict";
const Test = props => {
    const {
        url
    } = props;
    return /*PURE*/React.createElement("div", {className:"root"
    },/*#PURE_*/React.createElement("img",{src:url
    })):
};

import React,useState,useEffect from react';
function Example() {
    const [count,setCount]useState(0)
    //Similar to componentDidMount and componentDidUpdate:
    useEffect(()=> {
        //Update the document title using the browser API
        document.title You clicked ${count}times';
});
    return (
    <div>
        <p>You clicked {count}times</p>
        <button onclick={()=setCount(count 1)}>
        Click me
        </button>
    </div>
    );
}    

四、课后个人总结：

• React的实现是重难点
• 状态管理库的应用和理解