本文共 1763 字,大约阅读时间需要 5 分钟。
image.png
image.png
props
传递image.png
image.png
html
形式JS
变量和表达式style
和 className
- JSX 语法根本无法被浏览器所解析
- 那么它如何在浏览器运行?
image.png
JSX
其实是语法糖JSX
编译成 JS
代码JSX
的写法大大降低了学习成本和编码工作量JSX
也会增加 debug
成本image.png
image.png
image.png
JSX
是 React
引入的,但不是 React
独有的React
已经将它作为一个独立标准开放,其他项目也可用React.createElement
是可以自定义修改的vdom
是 React
初次推广开来的,结合 JSX
JSX
就是模板,最终要渲染成 html
state
后的 re-render
vdom
的应用场景image.png
ReactDOM.render(<App/>, container)
patch(container, vnode)
re-render
- setState
patch(vnode, newVnode)
image.png
‘div’
- 直接渲染 <div>
即可,vdom
可以做到Input
和 List
,是自定义组件(class
),vdom
默认不认识Input
和 List
定义的时候必须声明 render
函数props
初始化实例,然后执行实例的 render
函数render
函数返回的还是 vnode
对象image.png
image.png
setState 为何需要异步?
setState
setState
setState
都重新渲染,考虑性能image.png
setState
一样renderComponent
方法renderComponent
会重新执行实例的 render
render
函数返回 newVnode
,然后拿到 preVnode
patch(preVnode, newVnode)
vue
- 使用模板(最初由 angular
提出)React
- 使用 JSX
JSX
vue
模板的区别
模板应该和 JS 逻辑分离
image.png
image.png
image.png
组件化区别
React
本身就是组件化,没有组件化就不是 React
vue
也支持组件化,不过是在 MVVM
上的扩展React
,做的彻底而清晰都是数据驱动试图
求点赞,求关注~