响应式系统与 React | 青训营笔记这是我参与「第五届青训营」伴学笔记创作活动的第 6 天学习内容： 1.三种编

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

七、React

三种编程方式
1. 指令式编程：类似C语言，手动告诉程序一步步如何去做
2. 声明式编程：发出指令，便可做一系列事情
3. 响应式编程：某个状态改变时，自身响应去改变自身状态
React应用
- 前端应用开发
- 移动原生应用开发
- 结合Electron，桌面应用开发
React概念
- 确切来说，React是一个库而不是一个具体框架
常规UI设计的不足
- 当状态更新时，UI不会自动更新，需要手动地通过DOM API修改DOM节点
- 欠缺代码层面的封装，封装的粒度不够细
- UI之间的数据存在依赖关系，需要手动维护，如果依赖链过长，会遇到“Callback Hell”
React设计思路——响应式编程
- 状态更新时，UI自动更新
- 前端代码组件化、可复用、可封装
- 状态之间的互相依赖关系，只需要声明即可
React设计思路——组件化
- 类似于DOM树的结构，React的组件化是代码的组件化，是通过React库生成的代码层面的数据结构
- 组件是原子组件或组件的组合（组件可以嵌套）
- 组件内部拥有状态，组件外不可见
- 父组件可以将状态、函数传入组件内部，这样可以在子组件中通过函数修改父组件的状态
- 所以：
  - 组件声明了状态和UI的映射
  - 组件有Props（外部传入的状态）和State（内部状态，外部不可见）
  - 组件根据当前的State和Props，返回一个UI

React中hooks方式的写法

import React,{useState} from 'react';
function Example(){
    //声明State状态值和一个对应的方法
    const [count,setCount]=useState(0);	
    
    //副作用，用于修改UI
    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的实现
- 解决三个问题
  1. React的格式.jsx语法不符合JS标准
  2. 返回的JSX发生改变时，如何更新DOM
  3. State/Props更新时，如何重新触发render函数
- 问题1
  - 有对应规则转换成JS便准的语法
- 问题2、3
  - Virtual DOM
  - 是在JS内存中维护的一个对象，和DOM可以建立一一对应的关系
  - State/Props更新时，触发render，只是在虚拟DOM中修改
  - 使用虚拟DOM记录React中的更新，与真实DOM对比，修改不同的部分
React状态组件库
- 如果将很多状态都上升节点，会造成计算量的上升
- 外置状态组件库，将状态抽离到UI外部统一进行管理
- 在状态组件库中，通过状态机进行状态的调度与管理
- 值得注意的是，并不是所有的状态都要转移到状态组件库中，如果自定义了一个组件，为了保证通用性，还是将一些独特的状态保存在自己的组件结构中
应用级框架
- React只是一个库，通过封装一些React中的函数，生成更高层次的框架
- next.js
- modern.js
- Blitz
总结
- 今天牛岱老师的讲课让我感觉特别清楚，简单入门的React，知道了React的怎么一回事，是采用什么样的方式对前端代码进行处理的。