# 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