React 是什么？
React 时Facebook推出的JacaScript Library,它是一个用于组件JavaScrtipt库，让你更简单的创建交互式用户界面，它的出现让许多革新性的Web观念开始流行起来，例如：Virtual DOM 、Component、声明式渲染等。
声明式渲染和命令式渲染的区别是什么？
声明式渲染：
简单来讲就是告诉“机器”，你想要的是什么，让“机器”想出如何去做。比如如下代码：
let name = "张三";{name}
命令式渲染：
简单理解就是命令“机器”如何去做事情，这样不管你想要的是什么，它都会按照你的命令去实现。比如如下代码，通过document中函数获取h1标签，然后给这个标签中的元素进行赋值，这每一步都需要告诉程序做怎么做。
document.querySelector("h1").innerHTML = "小红";
怎么使用React？
使用之前需要配置React开发环境
Note.js的安装：
- 通过在Node.js官网下载安装包进行安装即可
- 安装完Node.js以后通过npm -v 命令查看是否安装成功
React 命令行工具的安装：
- 安装完Node.js以后，在命令行输入如下命令进行安装
npm install -g create-react-app
creat-react-app helloword
cd helloword
npm start
JSX
JSX 是一个看起来像XML的JavaScript语法扩展。每一个JSX标签都会被JSX转换工具转换成一个纯JavaScript代码，使用JSX会使组件的结构和组件之间的关系看上去更加的清晰，并且它可以定义简介且我们熟知的包含属性的树状结构语法。具体代码如下所示：
Welcome to React Native!
To get started, edit App.js
{instructions}
HTML和React组件对比
React可以直接渲染HTML标签，一般都是小写字母开头，比如<div></div>标签。同时也可以直接渲染React组件，不过在使用React组件时，必须以大写字母开头，就比如在其它组件使用Props_3组件时，JSX标签就必须是以大写字母开头，就算是将组件的名称改为小写也会报错。如下代码：
正确写法：
import Props_3 from './src/components/Props_3'
export default class App extends Component {
render() {
return (
);
}
}
JSX用小写字母开头的错误提示：
JavaScript 表达式
如果想在JSX标签中使用JavaScript表达式，那么只需在JacaScript表达式之外添加一对大括号{ }即可,如下代码：
import React,{Component} from 'react'
import {StyleSheet,Text,View} from 'react-native'
export default class Main extends Component {
render() {
/*
* name={1>0?"张三":"李四"} {JavaScript表达式}
*
*案例一：在JSX标签属性中使用使用JavaScript表达式
*0?"张三":"李四"}>
*
*案例二：在JSX标签内部使用JavaScript表达式
* */
return{1>0?"张三":"李四"}
}
}
JSX中的注释
在JSX标签外部进行注释的方式有单行注释（//）和多行注释(/**/)，如下代码：
/*
* 多行注释
* */
在JSX标签内部进行注释的方式为{/*多行注释*/’}，如下代码：
{/*
多行注释
*/}
延展属性
JSX中的延展属性类似于Vue中的延展操作符，使用它可以将对象进行展开，然后传入数据。比如如下代码：
import React,{Component} from 'react'
import {StyleSheet,Text,View} from 'react-native'
export default class ExtensionAttributes_4 extends Component {
render(){
let attr = {
styles:styles.welcome,
disabled:true,
};
/*
* {...attr} 延展属性的使用，其中attr是一个对象，...表示将attr这个对象进行展开
*
* */
return 延展属性
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'red',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
});
Component
React允许将JS代码封装成一个组件（Component）,然后向插入普通HTML标签一样，将封装好的组件插入进JSX标签中，如下代码：
通过JS创建的组件
引入自定义的组件
props（组件的属性）
可以通过this.props.属性名 的形式获取组件对象的属性，对象的属性名可以任意创建，但是要避免与JacaScript关键字冲突。props一般用于父组件传递数据给子组件，在子组件中定义父组件要传递的属性（默认值和该属性的数据类型），然后由父组件根据这个属性去传递数据给子组件。这点与Vue中的props是一样的，只不过表现形式不一样而已。
PropTypes
组件的属性可以接收任意数据类型，比如：字符串、number、布尔值、函数等等。有时，我们需要一种机制，去验证别人使用组件时，提供的参数是否符合要求。比如该组件的属性只能传递字符串，那么就可以利用PropTypes属性来规定标准。代码如下：
定义
import React,{Component} from 'react'
import {StyleSheet,Text,View} from 'react-native'
import PropTypes from 'prop-types'
export default class PropTypes_5 extends Component {
/*
* title:PropTypes.string 表示规定传入的title数据必须是一个字符串，其它数据类型不可传入
* */
static propTypes = {
title:PropTypes.string
};
/*
* title 属性的默认数据，如果没有传入title属性，那么其默认值为 我是默认数据
* */
static defaultProps = {
title:'我是默认数据'
};
render(){
return PropTypes的使用，{this.props.title}
}
}
使用
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
/*
引入自定义组件
* */
import PropTypes_5 from './src/components/PropTypes_5.js'
export default class App extends Component {
render() {
let title = "测试";
return (
);
}
}
如若传递的不是字符串类型，会爆如下错误
ref属性
通过ref属性可以获取组件真是的DOM元素，这点与Vue相似。详细代码如下：
父组件
import React,{Component} from 'react'
import {Text,View} from 'react-native'
import Subcomponent from './Subcomponent'
export default class Ref_6 extends Component {
notificationSubcomponent = () => {
console.log("notificationSubcomponent被执行了");
//notificationSubcomponent被执行了
this.refs.subcomponent.showMessage("父组件调用子组件中的函数，并且传递参数");
}
render(){
/*
* onPress 为点击事件，该点击事件只能在Text标签中使用有效，在View标签中使用无效
*ref="subcomponent" 表示给当前这个Subcomponent组件设置一个ref属性，然后可以通过this.refs.subcomponent获取当前这个标签的DOM对象
* */
return
点我使用ref
}
}
子组件
import React,{Component} from 'react'
import {Text,View} from 'react-native'
export default class Subcomponent extends Component{
/*
* 自定义了一个显示信息的函数
* */
showMessage(message){
console.log(message);
//父组件调用子组件中的函数，并且传递参数
}
render(){
return null;
}
}
state(状态)
state 中的数据是这个组件私有的，其它组件是无法修改其中的值。而props中的数据是父组件传递过来的，子组件是无法修改父组件传递过来的数据的。其实我个人理解，这个state就类似于Vue中的data(){ return {}} 返回的数据，在其中定义的activeIndex属性就是这个组件所使用的，如下代码：
data() {
return {
activeIndex: "1",
}
},
react-native 中使用案例如下：
import React,{Component} from 'react'
import {Text,View} from 'react-native'
export default class State_7 extends Component{
constructor(){
super();
/*
*初始化state
* */
this.state = {
isShow:true,
};
/*
* 每1秒切换一个状态
* */
setInterval(() =>{
this.setState(newSate =>{
return {
isShow: !newSate.isShow
}
})
console.log("setInterval()被执行了");
//setInterval()被执行了
},1000)
}
render(){
/*
* 根据当前的状态显示对应视图
* */
if (this.state.isShow){
return state的使用案例
}else {
return null;
}
}
}
