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

秦政
71 阅读4分钟

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

今日内容：

  • React 的历史与应用
  • React 的设计思路
  • React （hooks）的写法
  • React 的实现
  • React 状态管理库
  • 应用级框架科普

React的历史与应用

React 的历史：

  • 2010年 Facebook 在其 php 生态中，引入了 xhp 框架，首次引入了组合式组件的思想，启发了后来的 React 的设计。
  • 2011年 Jordan Walke 创造了 FaxJS ，也就是后来的 React 原型。
  • 2012年 在 Facebook 收购 Instagram 后，该 FaxJS 项目在内部得到使用，Jordan Walked 基于 FaxJS 的经验，创造了React。
  • 2013年 React 正式开源，在2013 JSConf 上 Jordan Walke 介绍了这款全新的框架，
  • 2014-今天 生态大爆发，各种围绕 React 的新工具/新框架开始涌现。

React 的应用：

  1. 前端应用开发，如Facebook，Instagram，Netflix网页版。
  2. 移动原生应用开发，如Instagram，Disabilitycord，Oculus。
  3. 结合Electron，进行桌面应用开发。

React 的设计思路

UI编程痛点

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

响应式编程

响应式编程时一种面向数据流和变化传播的声明式编程范式，通过异步和数据流来构建事务关系，当数据变化后，会直接或间接导致引用它的其它数据均发生相应的变化。

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

组件化

  • 组件是 组件的组合/原子组件
  • 组件内拥有状态，外部不可见
  • 父组件可将状态传入组件内部
  • 组件内部拥有私有状态 State 。
  • 组件接受外部的 Props 状态提供复用性。
  • 根据当前的 State/Props，返回一个 UI 。

组件设计

  1. 组件声明了状态和 UI 的映射。
  2. 组件有 Props/State 两种状态。
  3. “组件”可由其他组件拼装而成。

状态

状态归属于两个节点向上寻找到的最近的祖宗节点。

状态改变通过祖宗节点向下传递。

思考：

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

    答：单向。

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

    答：将状态放在状态管理库。

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

    答：借助虚拟DOM，将不同类型的元素替换，同类型的 DOM 元素更新，同类型的组件元素递归。

React（hooks）的写法

function Example(){
​
    const[count,setCount] = useState(0);
    
    useEffect(() => {
        document.title = 'You click ${count} times';
    });
    
    return(
    <div>
        <p>You clicker {count} times</p>
        <button onClick={() => setCount(count+1)}>
            Click me
        <button>
    </div>
    )
}

useState

const[state,setState] = useState(initial state);

返回一个state，以及更新state的函数setState。

在初始渲染期间，状态state的值为initial state。

setState(newState);

setState 用于更新state，它接收一个新的state值并将组件的一次重新渲染加入队列，在后续的重新渲染中，useState返回的第一个值始终是更新后的最新的state。

useEffect

1.当不传递第二个参数会导致每次渲染都会运行useEffect。一旦状态更新，组件将重新呈现，再次触发useEffect。

useEffect(() => {
        document.title = 'You click ${count} times';
    })//所有更新都执行

2.传递空数组，仅在挂载和卸载的时候执行。

useEffect(() => {
        console,log(props)
    },[])//仅在挂载和卸载时执行

3.传递一个值

useEffect(() => {
        console.log(count)
    },[count])//count更新时执行

React 的实现

problem

  • JSX 不符合 JS 标准

    • transpiler转义

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

    • 借助Virtual DOM：一种用于和真实DOM同步，而在JS内存中维护的一个对象，它具有和DOM类似的树状结构，并和DOM可以建立一一对应的关系。

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

React 状态管理库

状态管理库：将状态抽离到 UI 外部进行统一管理。

状态管理科推荐：

  • redux
  • xstate
  • mobx
  • recoil
  • Modern .js

应用级框架科普

  1. NEXT.JS

    硅谷明星公司 Vercel 的 React 开发框架，稳定，开发体验好，支持 Unbundled Dev，SWC 等，其同样有Serverless 一键部署平台帮助开发者快速完成部署。口号时“Let's Make web Faster”

  2. MODERN.JS 现代 Web 工程体系

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

  3. Blitz

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

avatar
文章
阅读
粉丝