《响应式系统与React》 个人笔记 | 青训营

86 阅读2分钟

React起源于Facebook,其是Facebook开发出的一款JS库。

React具有响应式编程特点。

以下是我对这节课内容的整理

1.响应式编程的特点

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

2.React的实现——组件化

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

3.状态归属问题

  • React是单向数据流(只能从父组件传入子组件)
  • 解决状态不合理上升的问题
  • 组件的状态改变后,更新DOM

4.组件设计

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

5.组件代码长什么样?

  • 组件内部拥有私有状态State
  • 组件接受外部的Props状态提供复用性
  • 根据当前的state/Props,返回一个UI

6.Hook使用法则(useState、useEffect): 不要在循环、条件或嵌套函数中调用Hook

▲值得拓展的是

Hook的本质:

在这些流程任意环节中插入自己的代码,让浏览器限制自己的代码,然后再执行原本的网站代码。

🔺1.连接服务器 Hook能拿到服务器的IP地址,wss能拿到向服务器发送前的参数

🔺2 拿回资源 Hook能修改拿回来的资源

🔺3 渲染 Hook能够判定想渲染的东西

🔺4 JS初始化 Hook能够修改windows的常见变量 浏览器的环境变量

🔺5 页面逻辑 在JS的某些内部函数写的 所以会有自己的作用域

🔺6 等待用户输入

🔺7 加密数据Hook 拿到明文参数和加密后的参数

7.React状态管理库核心思想:把状态抽离到UI外部进行统一管理

状态机:当前状态收到外部事件后迁移到下一个状态。

自身感受

学习这门课后我自觉深奥,又去查阅了很多资料,理解了一个重要的相关环节,就是组件之间的通讯问题。

父组件通过属性的形式向子组件传递参数,子组件通过props接受父组件传递过来的参数

子组件如果想和父组件通信,子组件要调用父组件传递过来的方法

兄弟组件之间的通讯可以借助于父组件作为中介,进行传递数据(父组件中写两个函数,这两个函数分别传给两个子组件,然后互相之间进行相互引用)

任意组件之间的通讯可以通过设置一个全局变量来作为中介,进行传递数据。