响应式编程与React | 青训营笔记

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

一、重点内容回顾

1. 介绍了React的历史与应用
2. 重点介绍了React的设计思路，React（hooks）的写法，以及React的实现
3. 介绍了React状态管理库
4. 科普了应用级框架

二、响应式编程与React

2.1 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的新工具/新框架开始涌现：

2.2 React的设计思路

2.2.1 UI编程的痛点

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

2.2.2 响应式与转换式

• 响应式系统
  • 事件->执行既定的回调->状态变更
• 前端UI
  • 事件->执行既定的回调->状态变更->UI更新

2.2.3 响应式编程

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

2.2.4 组件化

总结

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

状态归属问题：状态归属于两个节点向上寻找到最近的祖宗节点

组间设计

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

2.2.5 生命周期

2.3 React(hooks)的写法

import React,{ useState } from 'react';

function Example() {
    //Declare a new state varible,which we'll call "count"
    const [count, set Count] = 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, set Count] = 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>
      );
    }

2.4 React的实现

• JSX不符合JS的标准语法
• 返回JSX发生改变时如何更新DOM
  • Virtual DOM（虚拟DOM）
  • Virtual DOM是一种用于和真实DOM同步，而在JS内存中维护的一个对象，它具有和DOM类似的树状结构，并和DOM可以建立一一对应的关系。
  • 它赋予了React声明式的API：您告诉React希望让UI是什么状态，React就确保DOM匹配该状态。这使您可以从属性操作、事件处理和手动DOM更新这些在构建应用程序时必要的操作中解放出来。
• State/Props更新时，要重新触发render函数

2.5 React状态管理库

核心思想：将状态抽离到UI外部进行统一管理 推荐：redux,mobx,xstate,recoil 状态机：当前状态，收到外部事件，迁移到下一个状态

2.6 应用级框架科普