React入门 | 青训营笔记

Thawne
134 阅读2分钟

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

青训营已经开始几天了，前天刚刚完成队伍组建，为了大项目，有不少工作要做。今天刚好稍稍闲下来，html+css+ts的基础课程已经学完，今天开始是React系列课程。作为Vue开发者，React是我一直想学的框架，今天开始要认真记笔记了！

前置知识

  • HTML + CSS + JS
  • 基础数据结构
  • 浏览器基础DOM API

历史及应用

2010年Facebook引入了组合式组件思想开始设计，2012年React诞生，2013年开源。作为前端三大框架之一的React，在国内外都有很大的用户量，随着大前端时代的来临，它的主要用途有

  • 前端应用开发
  • 移动端原生开发
  • 桌面端开发(Electron)

设计思路

UI编程存在三个痛点：

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

为了解决痛点，响应式编程出现，解决了传统UI编程存在的痛点

image.png

所谓组件化，总结起来就是

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

和Vue一样，React也有生命周期这个概念

image.png

React hooks

React Hooks 的意思是，组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码"钩"进来。 React Hooks 就是那些钩子。

React 约定，钩子一律使用use前缀命名，便于识别，以useState举例：

const [x, setX] = useState(0)

如果想更改x的值，要调用setX

// Change the value of x
<button onClick={() => setX(x + 1)} >x+1</button>

同理，字符串也可以用类似方法来操作。

虚拟DOM( Virtual DOM )

虚拟DOM是一种用于和真实DOM同步，而在JS内存中维护的一个对象，它具有和DOM类似的树状结构，并和DOM建立一一对应的关系。它赋予了React声明式的API。

状态管理

若不同层级的组件共用同一个状态量，那么这个变量会堆积在根节点，解决方案是运用状态管理，将状态抽离到UI外部进行统一管理。在Vue中，状态管理库有Vuex，pinia等，React中有redux，xstate，mobx，recoil等。

状态机：当前状态收到外部事件，迁移到下一个状态

用modernjs实现简单状态管理，写法和vuex非常像

import { model } freom '@modern-js/runtime/model'

const countModel = model('count').define({
  state: {
    x: 0,
    y: 0
  },
  actions: {
    incrementX(state) {
      state.x += 1;
    },
    incrementY(state) {
      state.y += 1;
    }
  }
});

export default countModel;

应用级框架推荐

  • Next.js
  • Modern.js
  • Blitz
avatar
文章
阅读
粉丝