React的基础知识

React 是一个用于构建用户界面的 JavaScript 库，它是 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。React 主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。由于拥有较高的性能，且代码逻辑非常简单，越来越多的人已开始关注和使用它。

中文官网：https://react.docschina.org

---

React特点
1、声明式设计

react是面向数据编程，不需要直接去控制dom，你只要把数据操作好，react自己会去帮你操作dom，可以节省很多操作dom的代码。这就是声明式开发。

2、使用JSX语法

JSX 是 JavaScript 语法的扩展。React 开发大部分使用 JSX 语法（在JSX中可以将HTML于JS混写）。

3、灵活

react所控制的dom就是id为root的dom，页面上的其他dom元素你页可以使用jq等其他框架 。可以和其他库并存。

4、使用虚拟DOM、高效

虚拟DOM其实质是一个JavaScript对象，当数据和状态发生了变化，都会被自动高效的同步到虚拟DOM中，最后再将仅变化的部分同步到DOM中（不需要整个DOM树重新渲染）。

5、组件化开发

通过 React 构建组件，使得代码更加容易得到复用和维护，能够很好的应用在大项目的开发中。

6、单向数据流

react是单向数据流，父组件传递给子组件的数据，子组件能够使用，但是不能直接通过this.props修改。 这样让数据清晰代码容易维护。

---

安装React

npm install create-react-app -g  //或者使用淘宝源cnpm

---

使用React
创建项目

create-react-app demo

进入项目并且把项目跑起来,浏览器会自动打开项目页面

cd demo && npm start

---

编写React项目
先把项目里面src目录的文件全部删除,创建一个index.js文件

import React from 'react';
import ReactDOM from 'react-dom';

//使用组件 多数是使用import从其他地方引入js文件

class App extends React.Component{
    render(){/* render(){}是渲染的方法,必须return(标签) */
        return(
            <div>/* 所有的标签必须放在一个根标签里 */}
             <form action="">
                    <label htmlFor=""></label>{/*  JSX语法格式里面for都要改成htmlFor  */}
                    <input type="text"/>
                </form>
                <p className="box" style={{color:'red',backgroundColor:'black'}}>文字</p>{/*  JSX语法格式里面class都要改成className,style={{键值对加驼峰式写法}}  */}
            </div>
        )
    }
}




ReactDOM.render(//这里注意是用ReactDOM.render(参数一:标签,参数二,渲染到哪个位置)而不是React.render 
<div>{/* JSX表达式必须具有一个父元素 */}
    <h1>标题</h1>
    <App/> //使用闭合标签或者双标签插入组件
</div>
,document.getElementById('root')//这里的root是不用加#号的
)

---

React的JSX创建出来的是虚拟DOM，而不是HTML

const Rele = React.createElement('div')//虚拟DOM
const Dele = document.createElement('div')
let Rarr = []
let Darr = []
for(let i in Rele){
    Rarr.push(i)
}
for(let i in Dele){
    Darr.push(i)
}
console.log(Rarr.length);//7
console.log(Darr.length);//255

所以使用虚拟DOM是更加的优化,它忽略了真实DOM中不必要的属性
JSX不是HTML
JSX创建的是ReactDOM(虚拟DOM)
JSX中的<div>hello</div> 等同于 React.createElement("div");