响应式系统与 React | 青训营笔记这是我参与「第五届青训营」伴学笔记创作活动的第 6 天课程重点 React的

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

课程重点

React的历史与应用
React的设计思路
React(hooks)的写
React的实现
React状态管理库
应用级框架科普

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

UI编程痛点

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

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

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

响应式编程

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

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

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

组件化

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

组件设计

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

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

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

react生命周期

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

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

function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpadate:
  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的实现

React状态管理库

核心思想

将状态抽离到 UI 外部进行统一管理

状态机

当前状态，收到外部事件，迁移到下一个状态

应用级框架科普

NEXT.js

硅谷明星创业公司 Vercel 的 React 开发框架，稳定，开发体验好，支持 Unbundled Dev，SWC 等，其同样有 Serverless 一键部署平台帮助开发者快速完成部署。口号是 "Let's Make Web Faster"
Modern.js

字节跳动 Web Infra 团队研发的全栈开发框架，内置了很多开箱即用的能力与最佳实践，可以减少很多调研选择工具的事件。
Blitz

无 API 思想的全栈开发框架，开发过程中无需写 API 调用与 CRUD 逻辑，适合前后端紧密结合的小团队项目。

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