这是我参与[第四届青训营]笔记创作活动的第十天。

01.React的历史与应用

前端应用开发，如Facebook、Instagram、Netflix网页版

移动原生应用开发，如Instagram、Disscord、Oculus。

结合Elcctron，进行桌面应用开发

2010年Facebook在其php生态中，引入了xhp框架，首次引入了组合式组件的思想，启发了后来的React的设计。

2011年Jordan Walke创造了FaxJS，也就是后来的React原型

2012年在Facebook 收购Instagram后，该FaxJS项目在内部得到使用，Jordan Walke基于 FaxJS的经

2013年React正式开源，在2013 JSConf 上 Jordan Walke介绍了这款全新的框架:

2014年-今天生态大爆发，各种围绕React的新工具/新框架开始涌现:

02. React 的设计思路

UI编程痛点

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

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

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

响应式与转换式

响应式编程

01.状态更新,UI自动更新。 “状态更新，UI不会自动更新，需要手动地调用DOM进行更新。

02.前端代码组件化,可复用,可封装。 “欠缺基本的代码层面的封装和隔离,代码层面没有组件化。”

03.状态之间的互相依赖关系,只需声明即可。 “UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则-"Callback Hell”。”

组件化

组件设计

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

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

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

组件代码的样子： 1.组件内部拥有私有状态 State。

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

3.根据当前的State/Props,返回一个ui。

生命周期

总结

1.组件是组件的组合/原子组件

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

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

React是单向数据流

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

04. React的实现

Problems 01.JSX 不符合JS标准语法

02.返回的JSX发生改变时，如何更新DOM

03.State/Props更新时，要重新触发render函数

problem1

"use strict";

const Test = props =>{
const {
url
}= props;
return /*#__PURE__*/React.createElement( ""div",{
className: "root"
}，/*#__PURE__*/React.createElement( "img"，{
src: url
}));
};