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

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

React 历史及应用

应用场景

1. 前端应用开发（Web 端） Facebook Instagram
2. 移动原生应用开发 Instagram Discord Oculus
3. 桌面应用开发（联合 Electron 或 Tarui）

历史

• 2010 引入 xhp 框架，并引入响应式框架的概念
• 2011 创建 FaxJS 即 React 的原型 Reactive Structural Performant Seamless Client Server Rendering
• 2012 基于 FaxJS 的经验创建 React
• 2013 React 正式开源
• 2014-至今 React 生态爆发

React 设计思路

• 响应式编程

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

• 组件化

  • 组件是组件的组合或原子组件
  • 组件内拥有状态，外部不可见
  • 父组件可向组件内部传入状态 props

• 状态归属

  • 组件声明状态和UI映射
  • 组件有 props 和 state 两种状态
  • 组件可由其他组件构成

• 生命周期

  • mount
  • update
  • unmount

React （Hooks）写法

import React, { useState } from 'react';

function Example () {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    document.title = `You has click ${count} times.`;
  });
  
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count+1)}>
        CLICK
      </button>
    </div>
  );
}

React 实现

• JSX

• Virtual DOM

  • 用于和真实 DOM 同步，在 JS 内存中维护，能够与真实 DOM 一一对应
  • 声明式编程，保证 DOM 与 UI 处于同一状态

• Diff 算法

  • 更新次数少 | 计算速度快
  • 不同类型元素 - 替换
  • 同类型DOM元素 - 更新
  • 同类型组件元素 - 递归

const Example = props => {
  return React.createElement('div', null, 'div element')
}

React 状态管理库

核心思想

将状态抽离到 UI 外部统一进行单独处理

推荐

• redux
• xstate
• mobx
• recoil

概念

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

应用级框架

全栈开发框架

• Next.js
• Modern.js
• Blitz