react学习文档：https://www.reactjscn.com/

React起源于Facebook的内部项目，因为该公司对市面上所有的JavaScript MVC框架都不满意就决定自己写一套，用来架设Instagram网站。做出来的以后发现这套东西好用，就在2013年5月开源了

React   特点

1.声明式设计：采用声明范式，可以轻松描述应用jsx

2.高效：通过对DOM的模拟，最大限度地减少与DOM的交互

3.灵活：可以与已知的库或框架很好地配合

4.数据驱动

5.单项数据流

6.组件化开发

组件 

组件是 UI（网页）界面的一部分  React应用UI的构建块，这些组件将整个UI分成小的独立并可重用的部分，每个组件彼此独立，而不会影响UI的其余部分

优点：

1.方便代码重用

2.便于代码管理

3.便于团队协作

React的理解

react是构建用户页面的avascript库不是框架 React中路由Router 状态Redux axios 都是需要下载而框架是集成的不需要下载直接使用 

安装React脚手架

cnpm install create-react-app  -g  全局安装环境

安装yarn

特点：下载 速度超快，Yarn 缓存了每个下载过的包，所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率，因此安装速度更快

cnpm  install  yarn  -g      全局安装

可以使用yarn 快速下载模块：   yarn   add    模块名

同时可以用yarn启动项目：yarn   start

使用React脚手架创建项目

create-react-app  项目名称

脚手架搭建的项目包含以下文件：

.git 版本管理

node_modules 依赖模块

public 静态文件

src   写源码的文件夹

App.js               App组件

App.css            App组件的样式文件

App.test.js       测试文件

index.css         全局样式文件

index.js               入口文件

创建组件

1.函数方式创建组件

import  React  from "react";                                //引入React模块 

import  "./top.css"                                               //引入组件样式

function  Top(props){                                        //通过函数创建了一个组件名称为Top ;  （props)接收外部传入的数据

    return (                                                          //返回React元素  是原生DOM组件的表示

          <div className="top">

                <h3> { props.title } </h3>

          </div>

    )

}

export default  Top                                          // 导出当前创建好的Top组件

组件内部视图只能有一个顶级元素

标签内部的class属性要换成className     目的：不与Es6 class类函数起冲突

渲染组件:

<组件名 id=""  title=""><组件名 >

2.通过类创建的组件  

import React, {Component}from 'react';                 //引入React模块 

class City extends Component {                          //通过类创建组件名为City的组件

    constructor(props) {                                          //constructor   构造方法    构造函数本身

            super(props);                                           // super(props)接收父组件传递的参数

    }

    render() {                                                    //每个组件强制必须有一个render（），它返回React元素   是原生DOM组件的表示

            return (  

                    <div> {this. props.title } </div>        //this.props 接收父组件通过属性传递的值

                );

        }

}

export default City;                                        // // 导出当前创建好的Top组件

特点：

1.组件传值 ：父组件通过属性传值       子通过this.props.属性名接收

2.状态：声明式渲染

3数据：数据驱动

创建好的组件引入根组件App.js

import React from 'react';                                          //引入React模块 

import './App.css';                                                        //引入App组件样式 

import Top  from  "../top/Top";                                      //引入Top组件 

import  City  from  "../city/City"                                      //引入City组件 

function App() {

  return (                                                

    <div className="App">                                 

           <Top title="aaaaaaaaaaaaaaaa" ></Top>                //Jsx语法：  组件标签的首字母大写 跟html标签区分   组件是可以重用的根据传入不同的属性值，呈现不一样的主体内容

           <Top title="标题2222222222222" ></Top>                

           <Top title="标题333333333333" ></Top>

           <Top title="标题444444444444" ></Top>

           <City  title="当前城市：落山鸡"  ></City >

    </div>

  );

}

export default App;                  

类组件（class component）和函数式组件（functional component）之间有何不同

1.构造函数创建的组件叫：无状态的组件；

2.class关键字创建的组件叫：有状态的组件；

3.有状态和无状态的本质的区别在于是否有state（状态）属性

state用来设置状态

使用this.state的地方是构造函数 state是组件的核心   基本上状态是确定组件的呈现和行为的对象

setState用来改变状态

setState是React事件处理函数中和请求回调函数中触发UI更新的主要方法

注意：不能再组件内部通过this.state修改状态，因为该状态会在调用setState（）后被替换

replaceState（）方法与setState（）类似，但是方法只会保留nextState状态，原state不在nextState中的状态都会被删除。

使用语法：

replaceState（object nextState[function clallback]） nextState,将设置的状态替换当前的state callback。可选参数，该函数会在replaceState设置成功，且重新渲染组件

React主要优点

它提高了引用的性能可以方便的在客户端和服务器端使用，由于JSX代码的可读性好 React很容易与Metor，Angular等其他框架集成。

什么是JSX

jsx是JavaScript的简写

jsx是javascript高级语法糖，最终执行时还是会转成原生的js，通过bebel等方式

在编写React中如何使用jsx语法？

在需要使用JavaScript代码的时候使用{}包裹   但是这个花括号只能填写一句JavaScript代码  如果你在{}花括号内填写for循环等多行代码时，它就会报错

如何在React组件中绑定事件呢？

<div onClick={this.show}> 显示</div>

React中的refs

refs是React提供给我们安全访问DOM元素或者某个组件实例的句柄，我们可以为元素添加ref属性然后在回调函数中接受该元素在DOM中的句柄，该值会最为回调函数的第一个参数返回，用于对render（）返回的特定元素或组件引用。当需要进行DOM测量或向组件添加方法时，他们就会派上用场。

给需要获取DOM元素节点添加ref属性                              <div ref="title">你好 世界</div>

在需要获取DOM元素的回调函数中                            this.refs.title      获取到真实的DOM元素节点    

React中有三种构建组件方式

1.React.createClass()

2.Es6   class

3.无状态函数组件

defaultchecked

可以返回checked属性的默认值；该属性在checkbox默认被选定时返回true，否则返回false