React基本概念

react起源于Facebook的内部项目（2013年5月开源）

1.特点：

①声明式设计：直接有返回值；

②高效；

③灵活；

④JSX*：是js语法的扩展，可以在js文件中书写html结构；

⑤单向响应的数据流：要改变state中的数据时，需要手动的使页面更新（利用this.setState，后面会介绍他的用法）

⑥组件：react中一切皆为组件

之前的node.js是MVC框架，而Vue是MVVM框架（其实，如果没有Vuex那么Vue只是一个MV框架），而React则是一个不完整的MVC/MVVM框架；

react中利用函数化/式编程：也就是说输入一个值，输出的结果是特定的；

2.安装：cnpm install react react-dom -S（其中react用来书写jsx语法，react-dom用来解析jsx语法也就是渲染）

import React from 'react';
import ReactDOM from 'react-dom';
import {HashRouter as Router ,Route} from "react-router-dom"

ReactDOM.render(

        <Router>
             <Route path="/" component={App} /> 
        </Router>
      
     document.getElementById('root'),
    () => {
        console.log("成功")
    });

3.既然说react中一切皆为组件，那么我们需要写的页面其实也是组件（.js文件），那如何创建一个组件呢

在react中一般通过class类的方式来创建一个组件：class 组件名 extends React.Component{}           //(这里的React是import React from 'react')

在组件内部必须有一个render函数*（他也是react的一个生命周期），并且其内部要返回一个jsx语法；注：一般常见的jsx语法中的input中的value属性需要书写成defaultValue或者给该元素绑定一个onChange事件（这里也说明了在react中绑定事件用事件名进行绑定on后的第一个字母大写：onClick={this.handle.bind(this)}，这里可以涉及到一个事件绑定的性能优化）

React.Component是一个对象，是所有组件的父类（用extends（继承）的时候你就该意识到这点了），这个类中会包含很多方法，比如生命周期。

 

4.如果想要写一些当前组件需要的状态值时，可以有两种方法：

①state={ n:1  }        ②constructor(){  super()    this.state = { n:1 }}

一般情况下很少用①，当你配置比较全面时，不需要在初始化做一些操作时，只是单纯的存放状态的时候，就可以用①；相反就用②

5.上面提到的this.setState现在就来说说他：

首先，他是一个异步方法（为什么呢？  因为当多个他执行的时候，会进行合并，可以加快dom的渲染速度）

其次他是当需要修改this.state中的数据时，就调用他：

他有两种书写方式：

①this.setState({  key:val })   ②this.setState( (state)=>{ let str = (state.message + ' ').split("").reverse().join("")  return{ message:str }  } )  

由此可见，②可以在内部做一些关于state的操作

this.setState有两个参数：参数一是一个对象  或者 是一个函数 但是内部必须返回一个对象；参数二是一个回调：作用是①验证数据是否修改成功②可以获取更新后的dom结构