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接受父组件传递过来的参数
子组件如果想和父组件通信,子组件要调用父组件传递过来的方法
兄弟组件之间的通讯可以借助于父组件作为中介,进行传递数据(父组件中写两个函数,这两个函数分别传给两个子组件,然后互相之间进行相互引用)
任意组件之间的通讯可以通过设置一个全局变量来作为中介,进行传递数据。