我的掘金之React篇
React
- state用于内部,不与外部进行交互
- props单项数据流,内部不改变
- react.js == > React核心库
react中的函数式组件及类组件的选择?
- 组件内部需要包含内部状态state或者需要用到生命周期时考虑类组件,其他情况使用函数组件(无状态组件)。
react中受控组件和非受控组件区别?
-
非受控组件:表单元素的数据是存放在dom中。取值通过ref。
-
受控组件:表单元素的数据托管到react组件中,交由react控制。取值通过state。
调用setState 之后发生了什么?
- setState执行机制:合并、更新,多次调用,先存入队列,在合适的时机覆盖
- 多次调用
setStateDom
更新完毕之后执行,state
中的数据不立即修改而是存入队列,与之前state
的数据合并,走一遍确认没有其他数据需要更新之后,根据队列中需要修改的数据进行比较,最后覆盖. - 调用setstate函数之后,react 会将nextState与当前的组件state进行合并,触发一个调和过程。
在这个过程中react会基于底层diff算法(diff通过key能相对精准的知道哪些位置发生了改变)得到新dom树与老dom树的节点差异,
根据差异,对界面进行最小化重渲染。
React中key的作用?
- 提高性能、优化
- diff算法【比较差异】
key
是一个用于追踪哪些元素被修改或者被移除的标识。
虚拟Dom
- 普通的对象【Object类型的实例】
- 能够描述真实Dom的特点(不是所有都是虚拟Dom)
<tagName>、props、children
- 真实Dom消耗性能更大
JSX语法 【注:jsx不是js,不能运行】?
- jsx需要被
babel
转码,转化成VDom
- 用标签写虚拟Dom转化为
React.createElement( )
方法的调用
语法
- 遇到
{ }
解析成 JS - 遇到
< >
解析成虚拟Dom
React新增生命周期?
getDerivedStateFromProps,getSnapshotBeforeUpdate
- getDerivedStateFromProps:从属性中导出【用于state与props发送耦合时】
React路由跳转与a标签link的区别?
<a href="/"></a>
是前台向服务端发起请求,寻求资源- 路由跳转则不会发送请求,而是浏览器
url
地址栏发生改变,根据路径的变化切换相应的组件
单页面刷新之后,视图如何正确显示(路由向后台发送请求)?
页面被刷新后会向后台发送请求,而后台没有对应的接口,为了在页面的正常展示,后台需要做相应的处理
- 前端路由在后台路由中不一定存在
- 后台检测到是前端单页面的路由,响应单页面文件,并更新视图状态
最后的项目都要打包成js文件,引入页面,后台通过前端路由返回对应的组件
具体就是根据url路径
返回<div id="root"></div>
,导入相应的js
文件
React如何提高组件性能?
- 加
key
PureComponent
详解shouldComponentUpdate
Redux的原理【机制】
- 提供存储的机制,内存空间:
2kB
状态管理仓库,管理组件状态
Store
==> 存储
getState
==> 查看仓库状态【调用getState ,传递action指导如何修改,触发reducer修改数据,返回newState(最新的状态),最终获取state的最新数据】
dispatch
==> 修改 - 不用Redux也可更新数据
store.subscribe详解
监听,当仓库状态发生改变时就会执行,调用setState({ }),实现实时数据更新
React通信
- 父子
父组件:指明key值,value值
子组件:props接受key值,value值 - 子父
子组件:回调函数
父组件:接受参数 - Redux仓库
Context
Provider
Consumer
- 发布订阅模式【先订阅再发布】
React高阶组件【本质为函数】
接受一个组件,并返回一个新的组件
withRouter
路由拦截