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

1 React的历史与应用

1.1 应用场景

1. 前端应用开发，如Facebook、Netflix网页版
2. 移动端原生应用，如Android、IOS的app
3. 结合Electron，进行桌面应用开发

1.2 发展历史

• 2010年 Facebook 在其php生态中，引入了xhp框架，首次引入了组合式组件的思想，启发了后来的React的设计。
• 2011年 Jordan Walke创造了FaxJS，也就是后来的React原型:

• 2012年 在Facebook收购Instagram后，该FaxJS项目在内部得到使用,Jordan Walke基于FaxJS的经验开发出了React
• 2013年 React正式开源，在2013JSConf上Jordan Walke介绍了这款全新的框架：React
• 2014年 ——今天 生态大爆发，各种围绕React的新工具/新框架开始涌现

2 React的设计思路

2.1 React的设计思路-UI编程的痛点

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

2.2 React的设计思路-响应式与转换式

转换式系统：给定输入求解输出，如:编译器的实现，数值计算。

响应式系统：监听事件，由消息驱动，需要有一个监控系统去关注事件，并对事件做出响应，更新UI界面。

2.3 React的设计思路-响应式编程

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

2.4 React的设计与实现-组件化

1. 组件是 组件的组合/原子组件
2. 组件内拥有自己的状态，外部不可见
3. 父组件可将状态传入组件内部

2.5 React的设计与实现-状态归属问题

“当前价格”状态属于谁？

当前价格属于Root节点！

状归属于两个节点向上寻找到最近的祖宗节点。

2.6 React的设计与实现-组件设计

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

组件代码：

function Component(props){
   //props是父组件传入的状态 
   const { url }=props;
   this.text = '点击我'；//状态
   
   //返回一个“UI”
   return (<div>
      <SubComponent props props={{ color:'red' }}></SubComponent>         <img src={url}></img>
      <button>text</button>
   </div>)
   }

2.7 React的设计与实现-生命周期

3 React(hooks)的写法

import React,{ useState }from'react';
function Example(){
   //Declare a new state variable,which we'll call "count"
   const [count,setCount]=useState(0);
   
   renturn (
   <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
         Click me
      </button>
      </div>
      );
   }