React入门
这是我参与 伴学笔记创作活动的第6天。
一、 React的历史与应用
- 2010年Facebook在其php生态中，引入了xhp框架，首次引入了组合式组件的思想，启发了后来的React的设计。
- 2011年Jordan Walke创造了Fax]S,也，就是后来的React原型。
- 2012年在Facebook收购Instagram后，该Fax]S项目在内部得到使用，Jordan Walke基于FaxJS的经验，创造了React。
- ，在2013 JSConf上Jordan Walke介绍了这款全新的框架。
二、React的设计思路
React的设计思路 - UI编程痛点
- 状态更新，U川不会自动更新，需要手动地调用DOM进行更新。
- 欠缺基本的代码层面的封装和隔离，代码层面没有组件化。
- UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到"Callback Hell"。 React的设计思路-响应式与转换式
- 转换式系统给定 输入 求解 输出
- 响应式系统监听事件，消息驱动
React的设计思路 - 响应式编程（解决UI编程痛点）
- 状态更新，UI自动更新。
- 前端代码组件化，可复用，可封装。
- 状态之间的互相依赖关系，只需声明即可。
//eg
function Component(props) {
//props是父组件传入的状态
const { url } = props;
this.text = '点击我'；//状态
//返回一个“UI”
return (<div><SubComponent props={{color:'red'}}></SubComponent>
<img src={url}></img>
<button>text</button>
</div>）
}
React的设计思路 - 组件化
- 组件是组件的组合/原子组件
- 组件内拥有状态，外部不可见
- 父组件可将状态传入组件内部 组件声明了状态和UI的映射。 组件有Props/,State两种状态。 “组件”可由其他组件拼装而成。
组件代码：
组件内部拥有私有状态State。
组件接受外部的Props状态提供复用性。
根据当前的State/Props,返回一个Ul。
三、React（hooks）的写法
目前没有React基础，以后补上。
：
React Hooks 入门教程 - 阮一峰的网络日志 (ruanyifeng.com)
Hook 简介 – React (reactjs.org)
