一、React的简介
React是一个用于构建用户界面的JavaScript库，React 从诞生之初就是可被逐步采用的，因而你可以按需引入或多或少的 React 特性。
二、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中(这样就不需要每一次都全部重新渲染)
5、组件化开发
React的组件化开发，使得代码可以更加的容易复用和维护，能够很好的应用在大的项目开发中。
6、单向数据流
React是单向数据流，父组件传递给子组件的数据，子组件可以使用，但是不能直接通过this.props来修改
三、脚手架的安装
使用 npm 安装React官方脚手架(create-react-app)到全局1、
npm install create-react-app -g
四、创建项目
1、构建一个React项目(先进入要存放项目的地方)
create-react-app demo
2、进入创建的React项目并且跑起来
cd demo && npm start
五、组件化开发
在React项目中，我们都是使用组件化开发的，将需要重复使用或者模板类似的抽离出来做成一个一个组件， 以便重复使用，便于维护
定义组件分为三部分：
1、引入 React 模块
2、定义组件类
3、导出组件
//1、导入React核心模块
import React from 'react'
//2、定义组件类
class Hello extends React.Component{ //类
render(){ //函数
return ( //返回值
<div>
hello world !!! 我是组件222
</div>
)
}
}
//3、导出组件
export default Hello
只需要在使用的该组件的地方导入即可使用组件
//import 组件名 from '文件路径'
import Hello from './App' //1、导入Hello组件 (首字母必须大写)
ReactDOM.render(
<Hello /> // 2、使用Hello组件 (首字母必须大写)
, document.getElementById('root'));
//注意：Hello是组件名，在使用的时候就应该写JSX标签写法，而不能直接写Hello
!!注意：
1、组件在定义的时候，return后面只能有一个根标签，不能有多个，但是根标签内部可以有多个标签
2、使用组件的时候，首字母要大写
六、JSX的语法糖
React使用JSX来代替常规的JavaScript，JSX看上去更像是XML的JavaScript语法扩展，在React中会在babel中
编译成JavaScript
1、JSX的特点
- JSX执行更快，它是在JavaScript上做的优化
- 使用JSX来编写模板更加快捷简单
- 它是类型安全的，在编译过程中就能发现错误
2、JSX几个注意的格式：
JSX和html的标签属性的区别
HTML标签属性 JSX 原因
for htmlFor for在JS中为for循环关键字
class className class在JS中为声明类关键字
style 需使用JS对象(使用双花括号--{{}})
3、React中JSX创建出来的是虚拟DOM，而不是HTML
4、JSX变量引用、三目运算符、for循环的使用要在{}中执行
{/* 这是注释的格式 */}
{/* JSX中引用变量需要加单花括号 */}
<p>{name}</p>
{/* 三目运算符的使用 */}
<p>num1和num2中比较大的是：{num1>num2? num1: num2}</p>
<ul>
{/* 数组名.map(函数) */}
{
//格式1：
arr.map((v,k)=>(
<li key={k}>{v}</li>
)
)
}
{
//格式2：可以把上面的大括号和return换成小括号
arr.map((v,k)=>{
return <li key={k}>{v}</li>
}
)
}
</ul>
七、组件状态this.state的基本使用
// 定义状态数据：
consructor(props) {
super(props);
this.state = {
num: 24
}
}
// 使用状态数据
return (
<div>
<p>{this.state.num}</p>
</div>
)
// 修改状态数据
1、通过事件或者定时器触发
<button onClick={this.handleClick.bind(this)}>点击加一</button>
2、在事件函数中定义修改方法
this.state({
num: this.state.num + 1
})
八、组件属性this.props
import React from 'react'
//定义一个头部组件(子组件)
class Header extends React.Component{
//定义默认值
static defaultProps = {
bgc : "blue",
title : "默认标题",
children: "默认的子元素"
}
render(){
return (
<div style={{height:60, backgroundColor:this.props.bgc, textAlign:"center", color:"#fff"}}>
{this.props.title}
<p>{this.props.children}</p>
</div>
)
}
}
// 父组件
export default class hello extends React.Component{
render(){
return (
<div>
<Header title="首页" bgc="green"/>
<Header title="列表页" bgc="red"/>
<Header/>
{/* 子元素的使用 */}
<Header bgc="pink">Header子元素</Header>
</div>
)
}
}
1、在父组件中使用子组件的时候，可以定义属性的值
<组件名 属性名=值 />
2、定义子组件的时候，在需要填入值的地方使用 this.props.属性名 来获取定义的值
<div style={{height:60, backgroundColor:this.props.bgc, textAlign:"center", color:"#fff"}}>
3、我们设置的属性名渲染到页面上有时候会出现延迟，这个时候我们可以先给它设置一个默认值，在页面真正
的数据还未渲染上去的时候的默认值
static defaultProps = {
bgc : "blue",
title : "默认标题",
children: "默认的子元素"
}
4、子元素的使用
在父组件中，以 <组件名 属性名=值></组件名> 方式定义子组件的时候，我们可以添加子元素
<组件名 属性名=值>子元素</组件名>
在子组件内部使用 this.props.children 来获取这个子元素
九、子组件如何修改props
与 Vue 中一样，一般情况下子组件是无法修改父组件传递过来的props值，修改props值的唯一方法，就是触发父组件去修改。
// 子组件
<button onClick={this.props.handleClick}></button>
// 父组件
<button handleClick={this.handleclick.bind(this)}></button>
十、子传父
React中的子传父，需要使用箭头函数来实现
// 父组件
handleClick(num) {
console.log(num)
}
<button handleClick={(num) => this.handleClick(num)} />
// 子组件
<button onClick={() => this.prosp.handleClick(1)} />
