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

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

学习React的前置知识

1、HTML，JS，CSS基础

2、基础的数据结构/算法知识，如二叉树，深度遍历等。

3、会使用浏览器提供的DOM API 来修改DOM更新UI

React历史与应用

2010年Facebook在php生态中，引入了xhp框架，首次引入了组合式组件的思想，启发了后来的React的设计

2011年Jordan Walke创造了FaxJS,也就是后来的React原型

2012年在Facebook收购Instagram后，该FaxJS项目在内部得到使用，Jordan Walke基于FaxJS的经验，创造了React

2013年React 正式开源，在2013JSConf上Jordan Walke介绍了这款全新的框架

React的设计思路

React的设计思路-UI编程痛点

1、状态更新，UI不会自动更新，需要手动地调用DOM进行更新

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

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

React的设计思路-响应式与转换式

响应式系统

事件-->执行既定的回调-->状态变更

React的设计与实现-响应式编程

前端UI

事件-->执行既定的回调-->状态变更-->UI更新

01、状态更新，UI自动更新

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

02、前端代码组件化，可复用，可封装

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

03、状态之间的相互依赖关系，只需声明即可

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

React的设计与实现-组件化

总结

1、组件是组件的组合/原子组件

2、组件内拥有状态，外部不可见

3、父组件可将状态传入组件内部

React的设计思路-组件化

组件设计

1、组件声明了状态和UI的映射

2、组件有Props/State两种状态

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

React(hooks)的写法

import React,{ useState } from 'react';

function Example(){
    return{
        <div>
            <p>You clicked {count} times</p>
            <button onClick={() =>setCount(count + 1)}>
            Click me
            </button>
        </div>
    };
}

React的实现

React的实现-Problens

01、JSX不符合JS标准语法

02、返回的JSX发生改变时，如何更新DOM

03、State/Props更新时，要重新触发render函数

const Test = (props) => {
    const { url } = props;
    
    return (<div className="root"><img src={url} /></div>)
}

总结

React是一个基于组件的声明式UI库，用于构建高效、快速的用户界面。让我们来一起学习吧

学到这我想大家也对React有了初步的认识了吧，不如现在就开始动手练习练习吧

如果你有任何建议都可以在评论区留言，或发电子邮箱，欢迎大家评论留言(ˆ⌣ˆ）

作者：Yifan

日期：2022年7月24日

电子邮箱：1279640748@qq.com