React 和 vue的区别以及React的环境搭建,运行
原创
©著作权归作者所有:来自51CTO博客作者深圳大树的原创作品,请联系作者获取转载授权,否则将追究法律责任
# React
## React 和 vue
- React 和 vue 同属MVVM框架
- M:model
- V:VIEW
- VIEWMODEL
- React 全部是在js中定义的,不象vue将文件拆分为3部分。
- react 不存在模板的说法
## 虚拟DOM
- 概念
- DOM是浏览器提高的API数量相对固定,扩展比较难
- 虚拟DOM:用js对象表现出DOM的内容以及层级系,可以自定义api,通过特定的方式渲染到页面中。
- 原理
- 按需更新,重新渲染
- diff算法
- 逐层对比新旧dom树,所有节点对比完毕后,就能定位到变化的部分了,将变化部分的组件移除,替换新的组建。
- 在每个DOM节点上都会生成一个key,这个key将dom节点与虚拟dom关联
## react 框架搭建
- 安装nodejs
- npm install -g create-react-app
- create-react-app react_demo1
- 项目名称不能大写
- 终端 运行 npm run start 运行项目
## JSX基础
- 它是符合XML规范的js语法,即开闭标签 ** 必须** 完整
- jsx内部运行时,先把html代码转换为Js对象,组成虚拟dom
- jsx所有元素只能由一个根基节点
### 渲染标签
注意1:在html中要使用className代替class
注意2:无论在数组还是在变量中去赋值dom,都不需要加引号
注意3:只有有数组,就要用到Key
##组件
注意1:react是一个组件级的框架,所有的组件或路由都是组件的形式存在的,只要注意组件的首字母不能小写,若小写就会被认为是普通的html,有响应式组件,非响应式组件;
----------demo---------
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
//var mydiv=React.createElement('div',{calss:'my-div',id:'mydiv'},'hello denny')
//var msg="text "
//var mydiv2=<div>{msg}</div>
function MyComponent() {
return <div>my name is denny</div>
}
ReactDOM.render(
// <React.StrictMode>
// <App />
// </React.StrictMode>,
//mydiv,
//mydiv2,
<React.StrictMode>
<MyComponent />
</React.StrictMode>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
---------------run react---------------------------------------------
1 cmd (project path)
2 cnpm i
3. vscode npm run start
上一篇:Linux命令整理
下一篇:大数据 -- Spark
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
React环境搭建与项目运行
React环境搭建与项目运行
环境搭建 React