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

前言

React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库。React.js 创建一个不会重新加载的页面，这提供了更好的用户体验(UX)。它拥有强大的生态系统，并且适应性极强。为了实现复杂的功能，React.js带有自己的一组配套库和框架。

一、React的历史与应用

了解React的历史与应用，有助于我们更好地理解和掌握React

2010年 Facebook在其PHP生态中，引入了xhp框架，首次引入了组合式组件的思想，启发了后来的React设计。
2011年 Jordan Walke 创造了 FaxJS，也就是后来的 React 原型：
2012年 在 Facebook 收购 Instagram 后，该 FaxJS 项目在内部得到使用，Jordan Walke 基于 FaxJS 的经验，创造 React.
2013年 React正式开源，在2013年 JSConf 上，其作者Jordan Walke介绍了这款全新的框架。
2014年-今天 各种围绕React的新工具/新框架开始涌现。

二、React的设计思路

至于React为什么会诞生，这不得不提在React之前的UI编程。

UI编程的痛点:

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

因此,人们期望有一种框架可以：

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

组件化：

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

组件设计：

组件声明了状态和 U 的映射。
组件有 Props/State 两和状态。
组件可由其他组件拼装而成

生命周期

三、React(hooks)的写法

四、React的实现

实现React需要首先解决三个问题：

jsx不符合js标准语法
返回的jsx发生改变时，如何更新DOM
State/Props更新时，要重新触发render函数

const Test = (props) => (
    const { url } = props;
    return (<div className="root"><img src={url} /><div>)
}

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

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

前言