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

一、本堂课重点内容：

本节课程主要分为四个方面：

React 的历史与应用 - 介绍 React 的发展历史以及应用场景。
React 的设计思路 - 介绍 React 的设计思想，为什么 React 要设计成这样。
React hooks 的写法 - 介绍基础的 React hooks 写法，以及常用的 hooks。
React 的实现

二、详细知识点介绍：

React 的设计思路

响应式系统： 监听事件，消息驱动；

转换式系统： 给定输入，求解输出；

前端编程是响应式编程。

特点：

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

组件化：

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

组件设计：

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

设计思路：

组件内部拥有私有状态State。
组件接受外部的Props状态提供复用性。
根据当前的State/Props，返回一个UI。

React hooks 的写法

介绍基础的 React hooks 写法，以及常用的 hooks。

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 
		APIdocument.title = `You clicked ${count} times`;
	});

	return (
		<div>
			<p>You clicked {count} times</p>
			<button onclick={() => setCount(count + 1)}>Click me</button>
		</div>
	);
}

React 的实现

Virtual DOM(虚拟DOM)

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

它赋予了React声明式的API：您告诉React希望让UI是什么状态，React就确保DOM 匹配该状态这使懋程康性操作、事件处理和手动DOM更新这些在构建应用程序时必要的操作中解放出来。

react是声明式编程；

O(n)实现Diff：

不同类型的元素——替换；
同类型的DOM元素——更新；
同类型的组件元素——递归；

React状态管理库

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

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

应用级框架

NEXT.JS、Blitz等

三、课后个人总结：

学习框架时不应该直接学习语法，而应该从其设计的初衷一步步探索，才能更好地理解；
注意前端是响应式系统而非转换式系统；
注意react是声明式编程而非命令式编程；

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