React入门2|青训营笔记

35 阅读1分钟

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

一、本堂课重点内容:

  • React(hooks) 的写法与 React的实现
  • React 状态管理库与应用级框架科普

二、详细知识点介绍:

React (hooks)的写法与 React 实现

React(hooks) 的写法

image.png

image.png

image.png

image.png

  1. useState:传入一个初始值,返回一个状态,和set该状态的函数,用户可以通过该函数,来实现状态的修改。
  2. useEffect:传入一个函数,和一个数组,数组是状态的数组,称作依赖项,该函数在mount时,和依赖项被set的时候执行
  3. hook使用法则:不要在循环,条件或嵌套函数中调用hook

React 实现

image.png

  1. jsx 不符合js标准语法
  2. 返回,jsx发生改变时,如何更新DOM
  3. 属性更新时候,要更新触发render函

Promblem1

将语法变成符合js标准 image.png

Promblem2

image.png

image.png

React 状态管理库与应用级框架科普

核心思想

image.png 在store只放一些比较远的组件共享状态,组件自身特有状态不在store

状态机

image.png image.png

应用级框架科普

nextjs modernjs blitzimage.png image.png