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

前言

React作为在前端领域的热门框架，是非常有必要去了解的一个东西，它是一个很好的解决方案和工具，这门课带我们入门react系统框架的由来和使用方法，非常值得阅读。

React的历史与应用

前靖应用开发，如Facebook,Instagram,Netflix 网页版。
移动原生应用开发，如Instagram,Discord,Oculus。
结合Electron,进行桌面应用开发。

2010年Facebook在其pp生态中，引入了xp框架，首次引入了组合式组件的思想，启发了后来的React的设计。
2011年Jordan Walke创造了FaxJS,也就是后来的React原型：
2012年在Facebook收购Instagram后，该FaJS项目在内部得到使用

React的设计思路

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

响应式与转换式

组件化

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

React(hooks)的写法

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>
);

import React,useState,useEffect from 'react';
function Example(){
const [count,setCount]useState(0);
/Similar to componentDidMount and componentDidUpdate:
useEffeet(()=>{
/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的实现

Problems

Promblem2

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

React状态管理库

状态机

总结

这篇笔记从React的历史发展到设计思路，还有hook的写法，react的应用进行回顾，非常的有帮助，可以加深学习印象。有问题请指正

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

前言