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

React的历史与应用

应用

前端应用开发，如 Facebook，Instagram，Netflix 网页版。
移动原生应用开发，如 Instagram, Discord, Oculus。
结合 Electron，进行桌面应用开发。

历史发展

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的设计思路

使用原生 JS 进行 UI 编程的痛点：

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

响应式与转换式

转换式系统

给定 [输入] 求解 [输出]
如：编译器、数值计算

响应式系统

监听事件，消息驱动
如：监控系统、UI 界面

graph TD
事件 --> 执行既定的回调 --> 状态变更

响应式编程

前端 UI

graph TD
事件 --> 执行既定的回调 --> 状态变更 --> UI更新

期望：

状态更新，UI 自动更新。
- “状态更新，UI 不会自动更新，需要手动地调用 DOM 进行更新。”
前端代码组件化，可复用，可封装。
- “欠缺基本的代码层面的封装和隔离，代码层面没有组件化。”
状态之间的互相依赖关系，只需声明即可。
- “UI 之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到 “Callback Hell。”

组件化

demo:

总结：

组件是组件的组合/原子组件
组件内拥有状态，外部不可见
父组件可将状态传入组件内部
状态归属于两个节点向上寻找到最近的祖宗节点

组件设计

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

组件代码会是什么样子？

组件内部拥有私有状态 State。
组件接受外部的 Props 状态提供复用性。
根据当前的 State/Props，返回一个 UI。

demo:

生命周期

React (hooks) 的写法

demo:

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);
  // Similar to componentDidMount and componentDidUpdate:
  useEffect(( ) => {
    //Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });
  
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onclick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

React的实现

Problems

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

Problem1：转译

demo:

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
  }));
};