React之组件化
2023-09-27 14:28:54 时间
image.png
一、说一下对组件化的理解
1.1 组件的封装
- 视图
- 数据
- 变化逻辑
image.png
1.2 组件的复用
props
传递- 复用
image.png
image.png
二、JSX 本质是什么
2.1 JSX 语法
html
形式- 引入
JS
变量和表达式 - 循环
style
和className
- 事件
- JSX 语法根本无法被浏览器所解析
- 那么它如何在浏览器运行?
image.png
2.2 JSX 解析
JSX
其实是语法糖- 开发环境会将
JSX
编译成JS
代码 JSX
的写法大大降低了学习成本和编码工作量- 同时,
JSX
也会增加debug
成本
image.png
image.png
image.png
2.3 JSX 独立的标准
JSX
是React
引入的,但不是React
独有的React
已经将它作为一个独立标准开放,其他项目也可用React.createElement
是可以自定义修改的- 说明:本身功能已经完备;和其他标准监控和扩展性没问题
三、JSX 和 vdom 的关系
3.1 为何需要 vdom
vdom
是React
初次推广开来的,结合JSX
JSX
就是模板,最终要渲染成html
- 初次渲染 + 修改
state
后的re-render
- 正好符合
vdom
的应用场景
3.2 React.createElement 和 h
image.png
3.3 何时 patch
- 初次渲染 -
ReactDOM.render(<App/>, container)
- 会触发
patch(container, vnode)
re-render
-setState
- 会触发
patch(vnode, newVnode)
3.4 自定义组件的解析
image.png
‘div’
- 直接渲染<div>
即可,vdom
可以做到Input
和List
,是自定义组件(class
),vdom
默认不认识- 因此
Input
和List
定义的时候必须声明render
函数 - 根据
props
初始化实例,然后执行实例的render
函数 render
函数返回的还是vnode
对象
image.png
四、说一下 React setState 的过程
4.1 setState 的异步
image.png
setState 为何需要异步?
- 可能会一次执行多次
setState
- 你无法规定、限制用户如何使用
setState
- 没必要每次
setState
都重新渲染,考虑性能 - 即便是每次重新渲染,用户也看不到中间的效果
- 只看到最后的结果即可
image.png
4.2 vue 修改属性也是异步
- 效果、原因和
setState
一样
4.3 setState 的过程
- 每个组件实例,都有
renderComponent
方法 - 执行
renderComponent
会重新执行实例的render
render
函数返回newVnode
,然后拿到preVnode
- 执行
patch(preVnode, newVnode)
五、React vs vue
5.1 两者的本质区别
- vue - 本质是 MVVM 框架,由 MVC 发展而来
- React - 本质是前端组件化框架,由后端组件化发展而来
- 但这并不妨碍他们两者都能实现相同的功能
5.2 看模板和组件化的区别
vue
- 使用模板(最初由angular
提出)React
- 使用JSX
- 模板语法上,我更加倾向于
JSX
- 模板分离上,我更加倾向于
vue
模板的区别
模板应该和 JS 逻辑分离
image.png
image.png
image.png
组件化区别
React
本身就是组件化,没有组件化就不是React
vue
也支持组件化,不过是在MVVM
上的扩展- 对于组件化,我更加倾向于
React
,做的彻底而清晰
5.3 两者共同点
- 都支持组件化
-
都是数据驱动试图
求点赞,求关注~
作者:Amor丶情深
链接:https://www.jianshu.com/p/8e90f63c95fe
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
相关文章
- vue笔记三(组件)
- 编写react组件最佳实践
- vue 翻页组件vue-flip-page
- Android新架构组件WorkManager
- GraphVis 图可视化分析组件
- 从零開始学android<gallery拖拉组件.二十七.>
- Unity ContextMenu 扩展组件的环境菜单(在 Inspector 视图组件名称上的右击下拉菜单)
- idea安装findbugs及Find-sec-bugs安全组件
- 【Java AWT 图形界面编程】菜单组件 ① ( 菜单相关组件简介 | 菜单组件使用步骤 | 菜单列表中添加分割线 | 设置 MenuItem 菜单项快捷键 )
- 基于react-markdown组件自定义一个Markdown显示器
- TS装饰器bindThis优雅实现React类组件中this绑定
- 将函数作为子组件的组件
- 通俗易懂 k8s (2):认识 kubernetes 核心组件原理
- 2.QT-窗口组件(QWidget),QT坐标系统,初探消息处理(信号与槽)
- 用react模仿知乎的用户头像裁剪组件
- shouldComponentUpdate避免组件无意义渲染
- Vue 组件库实践和设计
- React Native 的图片点击放大效果的组件使用 react-native-zoom-image
- React Native之Modal组件实现遮罩层效果
- React-Native 中自定义checkbox组件
- React Native可变换图像组件
- React Native开源仿QQ微信列表左右滑动删除等功能组件(react-native-swipeout)
- React Native组件之Text