一、一些基础概念
1、框架：基于整个项目的
2、库：在某个模块中单独使用，轻量级的
在vue中，DOM的操作时DOM指令调用js
在react中，所有的DOM 渲染都是由JS完成的
组件基于视图
模块基于代码
当前类的函数都是当前类的原型函数
类的原型函数可以访问类的公有属性 state
state 和proper都是对象、类的公有属性
{this.state.showType=='login'?<Login />:<Register/>}
二、react脚手架的安装方式
1、安装脚手架环境(在超级管理员权限下)
sudo npm install -g create-react-app
2、路径改变到桌面
cd Desktop
3、在桌面文件下创建项目(在超级管理员权限下)
sudo create-react-app my-app
4、将路径切换到创建的当前文件夹下
cd my-app/
5、运行项目
npm start
三、 ReactDOM.render()方法
要将React元素渲染到根DOM节点中，我们通过把它们都传递给 ReactDOM.render() 的方法来将其渲染到页面上
ReactDOM.render有2个参数，第一个为即将要渲染的新的DOM元素
第二个为新节点的父级标签(js原生的节点对象)
ReactDOM.render(
<h1>hello world</h1>,
root
);
也可以创建一个 React.Component 的 ES6 类，该类封装了要展示的元素（return的作用是将要展示的内容返回出去）
四、react渲染方式
React将所有的基于React的DOM渲染都封装在了JS中；
* （1）直接在ReactDOM.render()函数的第一个参数的位置写DOM
* （2）用一个函数(首字母大写)封装，再调用(单标签)
* （3）用类封装，这个类要继承React的Component类，之后直接调用(并没有从类中实例化对象，要关注this的指向)
五、JSX语法
<!--可以在JSX语法中用{}包裹js表达式-->
JSX 用来声明 React 当中的元素
在 JSX 中使用表达式
你可以任意地在 JSX 当中使用 JavaScript 表达式，在 JSX 当中的表达式要包含在大括号里。
六、props、state
props将外界的参数传给当前类从其父类继承到的某个函数中
//可以在调用组件时向组件传多个参数，但是这些参数都是以键值对的形式在props中被接收
//当前组件使用的所有的变量，在函数中用this.state的方式访问
this.state={
name:"rose",
age:18,
sex:"男"
}
react提供的setState函数，通过这个函数更改state的状态值，这个更改就可以动态的渲染到DOM节点上
this.setState对state中的数据进行更改
this.setState({
showType:type
})
七、钩子函数
componentDidMount
这是一个生命周期中的钩子函数，也是这个类的一个原型函数，可以在这个函数中访问这个类的原型函数和公有属性(state和props都是公有属性)
//在第一次渲染后调用(挂载后)
八、传参方法
在事件中调用函数时传参
{/*传参方式1*/}
点击事件触发时，调用函数fn1的bind方法，可以传递多个参数，在函数fn1中接收，事件对象e不需要传递
但是需要在函数中接收
<button onClick={this.fn1.bind(this,4,6)}>点击</button>
fn1(num1,num2,e){
console.log(num1,num2,e)
}
{/*传参方式2*/}
箭头函数的形式，事件对象为最后一个参数
<button onClick={ (e) => this.fn1(11,22,33, e)}>点击</button>
用bind方式
(1)触发事件时调的并不是类的原型函数
(2)调的是类的原型函数调了bind之后的返回值
(3)调返回值时相当于调了这个原型函数
(4)会将这个原型函数中的this替换成bind的第一个参数(一般情况下这个参数都是this)
九、React的条件渲染：
// react没有提供条件渲染指令，得通过分支语句在render函数渲染之前，做判断，调用不同的组件进行渲染
十、表单
用 onChange 事件来监听 input 的变化，并修改 state。
// 当input输入框的值发生改变时触发