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

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

React的历史与应用

应用场景

• 前端应用开发，例如facebook网页版
• 桌面端，结合Electron，进行桌面端
• 移动端应用开发

2013年React正式开源

React的设计思路

UI编程痛点

• 状态更新，UI不会自动的进行更新，需要手动的设置，进行更新
• 欠缺基本的代码层面的封装和隔离，代码层面没有组件化
• UI之间的数据依赖关系，都需要自己手动维护

响应式和转换式

响应式：

给定一个输入，就会求解出一个输出

响应式：

监听事件，消息驱动

一般前端都是

graph LR
	事件-->id1[执行既定的回调]
	id1-->id2[状态变更]
	id2-->id3[UI更新]

对于响应式编程我们可以做到

• 状态更新，直接我们的UI也就会跟着更新
• 前端的代码可以实现组件化，这样就可以进行复用
• 状态之间的互相依赖关系

问题

1. React是单向数据流，还是多向数据流？

   单向数据流，父组件向子组件传递数据，但是这不意味着，子组件就不可以去修改父组件的值

2. 如何解决状态不合理上升问题？

   利用状态管理

3. 组件的状态改变以后，如何更新DOM

组件设计

1. 组件声明了状态和UI的映射
2. 组件由Props/State两种状态
   • Props是父组件给的
   • State是自己私有的
3. 组件可以和其他组件进行拼装

React实现

JSX不符合Js标准

我们会进行转译，将jsx转化为js

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

他会转译为:

const Test = props =>{
    const {url} = props;
    return React.createElement("div",{
        className:'root'
    },
    React.createELement('img'),{
        src:url
    })
}

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

虚拟DOM

虚拟DOM和真实DOM一样，都具有树状结构，并和DOM建立一一对应的关系

如何实现Diff

不同类型的元素	替换
同类型的DOM元素	更新
同类型的组件元素	递归

问题：

当我们的父组件发生改变时，那么我的子组件也就会进入递归，也会进行改变

React状态管理

核心

将状态抽离到组件外部进行统一管理

科普

• Next.js

• modern.js

• Blitz.js