React 和 vue的区别以及React的环境搭建，运行

# 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