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

叽歪怒的快乐
47 阅读2分钟

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

React的历史与应用

  • 2010年Facebook在其php生态中，引入xhp框架，首次引入了组合式组件的思想，启发了后来的React的设计。
  • 2011年Jordan Walke创造了FaxJS,也就是后来的React原型：

image.png

  • 2012年在Facebook收购Instagram后，该FaxJS项目在内部得到使用，Jordan Walke基于FaxJS的经验，创造了React。
  • 2014年~至今生态大爆发，各种围绕React的新工具/新框架开始涌现。

React的设计思路

UI编程痛点

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

响应式与转换式

响应式系统

image.png 前端

image.png

响应式编程

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

组件化

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

组件代码是什么样子？

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

生命周期

image.png

React（hooks）的写法

import React,{useState} from 'react';
function Example(){
    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);
    useEffect(()=>{
        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

  1. JSX不符合JS标准
  2. 返回的JSX发生改变时，如何更新DOM
  3. State/Props更新时。要重新出render函数

我们思考该如何解决这些问题？

React状态管理库

核心思想

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

状态机

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

image.png

应用级框架科普

  • NEXT.JS 硅谷明星创业公司Vercal的React开发框架，稳定，开发体验好，指出Unbundled Dev,SWC等，其同样有Serverless一键部署平台帮助开发者快速完成部署。口号是"Let is Make web Faster"

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

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

avatar
文章
阅读
粉丝