day6

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

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

一、本堂课重点内容：

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

二、详细知识点介绍：

前置知识

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

React的设计思路

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

• 响应式与转换式
  • 响应式系统
    • 事件->执行既定的回调->状态变更
  • 响应式编程
    • 状态更新 UI自动更新
    • 前端代码组件化、可复用、可封装
    • 状态之间的互相依赖关系，只需声明即可
  • 组件化
    • 组件是组件的组合/原子组件
    • 组件内拥有状态。外部不可见
    • 父组件可将状态传入组件内部
  • 组件设计
    • 组件声明了状态好UI的映射
    • 组件有Props/State两种状态
    • ”组件“可由其他组件拼装而成

React的实现

问题：

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

React状态管理库

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

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

应用级框架科普

1. 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的实现是重难点
• 状态管理库的应用和理解