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

galaxy_
57 阅读3分钟

image.png

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

React

初识React

React是用于构建用户界面的JavaScript库， 起源于Facebook的内部项目，该公司对市场上所有 JavaScript MVC框架都不满意，决定自行开发一套，用于架设Instagram的网站。

React历史与应用

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

React设计思路

UI编程痛点

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

响应式与转换式

转换式系统：给定输入求解输出, 用编译器进行数值计算

响应式系统：监听事件，消息驱动，拥有监控系统和UI界面

响应式编程

image.png image.png

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

组件化

  1. 组件是组件的组合/原子组件
  2. 组件内拥有状态，外部不可见
  3. 父组件可将状态传入组件内部

React(hooks)的写法

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

React的实现

遇到的问题

  • JSX不符合JS标准
  • 返回的JSX发生改变时，如何更新DOM
  • State/Props更新时，要重新触发render函数
  • Virual DOM(虚拟DOM)

课后思考

  1. React组件的render函数，在哪些时机下，会被重新执行?

    • 当组件的prop和state发生改变时，组件的render函数会重新执行

    • 当父组件的render函数执行时，子组件的render函数也会重新执行

  2. React这种函数式编程，和vue这种基于模板语法的前端框架，各有什么优点和缺点?

    • vue 的优点： 易于使用，更顺畅的集成，更好的性能，更小的尺寸，适应性

      vue 的缺点： 可能会出现大规模应用程序开发方面的问题

    • React的优点： 灵活响应，可扩展，不断发展，Web或移动平台

      React的缺点：学习路线陡峭，结构复杂

  3. React推荐使用组合来进行组件的复用，而不是继承，背后有什么样的考虑?

React希望组件是按照最小可用的思想来进行封装的，理想的说，就是一个组件只做一件的事情，且把它做好，DRY。在OOP原则，这叫单一职责原则。如果要对组件增强，首先应该先思路这个增强的组件需要用到哪些功能，这些功能由哪些组件提供，然后把这些组件组合起来。 为什么 React 推崇 HOC 和组合的方式，而不是继承的方式来扩展组件？

总结

本文主要介绍了react的基本概念，设计模式以及响应式系统的基础，最后对三个问题进行了分析

avatar
文章
阅读
粉丝