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

在对的时间做对的事情

一、本堂课重点内容：

• 本堂课的知识要点有哪些？

React的历史与应用、React的设计思路

二、详细知识点介绍：

• 本堂课介绍了哪些知识点？

一、react的历史与应用

（一）应用

1.        前端应用开发，如Netflix网页版

2.        移动原生应用开发

3.        桌面应用开发

（二）历史

2010年Facbook在php生态中引入了xhp框架，首次引入了组合式组件的思想，启发了react的设计

FaxJS为react的原型，2012年Jordan Walke创造了React。

有些人认为这是历史的倒退，实则不然。 

二、react的设计思路

（一）UI编程痛点

1.      状态更新，UI不会自动更新，需手动地调用DOM进行更新

2.      欠缺基本的代码层面的封装和隔离，代码层面没有组件化

3.      UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到“Callback Hell”

通过响应式编程进行

（1）状态更新

（2）前端代码组件化，可复用，可封装

（3）状态之间的互相依赖关系，只需声明即可

（二）响应式与转换式

转换式系统不等于响应式系统

转换式系统：给定输入与输出

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

（三）组件化

1.组件是组件的组合

2.组件内拥有状态，外部不可见

3.父组件可将状态传入组件内部

（四）组件设计

1.      组件声明了状态和UI的映射

2.      组件有Props/State两种状态

3.      “组件”可由其他组件拼装而成

4.      组件代码的样子

（1）组件内部拥有私有状态State

（2）组件接受外部的Props状态提供复用性

（3）根据当前的State/Props，返回一个UI

 

三、React的写法

例如

`import React，{ useState } from ‘react’；

function Example（）{

const [ count,setCount] = useState（0）；

return （

 

）；

} `

前方似乎是未知的黑暗，但我的身体还想动