响应式系统与React ｜ 青训营

小文
98 阅读3分钟

响应式系统与React

本次课程是我第一次接触前端React框架,这节课对我前端框架的学习起到了很好的指引作用

课程链接：juejin.cn/course/byte…

01 React的历史与应用

这里先放上React中文官方文档：react.docschina.org/

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

image.png

  • 2012年 在Facebook收购Instagram后，改FaxJS项目在内部得到使用，Jordan Walke基于FaxJS的经验，创造了React。
  • 2013年 React开源，在2013 JSConf上Jordan Walke介绍了

image.png

  • 2014年-今天 生态大爆发，各种围绕React的新工具/新框架开始涌现

image.png

02 React的设计思路

UI编程痛点：

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

响应式与转换式

  • 转换式系统：给定“输入”求解“输出”；编译器；数值计算
  • 响应式系统：监听事件，消息驱动；监控系统；UI界面（事件->执行既定的回调->状态更变->UI更新）

问题解决

image.png

组件化

  • 组件是组件的组合/原子组件
  • 组件内拥有状态，外部不可见
  • 父组件可将状态传入组件内部
  • 组件设计 组件声明了状态和UI的映射；组件有Props/State两种状态；“组件”可由其他组件拼装而成
  • 组件代码 组件内部拥有一个私有状态State；组件接受外部的Props状态提供复用性；根据当前的State/Props，返回一个UI
function Component(props){
    // props是父组件传入的状态
    const {url} = props;
    this.text = '点击我';  // 状态

    // 返回一个“UI”
    return(
        <div>
        <SubComponent props={{color: 'red'}}></SubComponent>
        <image src={url}></img>
        <button>text</button>
        </div>
    )
}

image.png

状态归属问题

03 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 click {count} times</p>
            <button onClick={() => setCount(count + 1)}>
                Click me
            </button>
        </div>
    }
}

import React, {useState} from 'react';
function Example(){
    // Declare a new state variable, which we'll call "count"
    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 click {count} times</p>
            <button onClick={() => setCount(count + 1)}>
                Click me
            </button>
        </div>
    }
}

04 React的实现

问题

  • JSX不符合JS标准语法
  • 返回的JSX改变时，如何更新DOM
  • State/Props更新时，要重新触发render函数
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
    }));
};
  • 虚拟DOM

05 React状态管理库

  • 核心思想：将状态抽离到UI外部进行统一管理

image.png

  • 状态管理库推荐：redux、xstate、mobx、recoil
  • 状态机：当前状态，收到外部事件，迁移到下一个状态

06 应用级框架科普

  • Nextjs
  • Modernjs
  • Blitz
avatar
文章
阅读
粉丝