1、react的引入
react的语法
import React from "react";
reactDOM渲染的时候需要用到ReactDOM
import ReactDom from "react-dom";
2、map遍历循环（ 类vue的v-for ）
let Dom = (
arr.map((item,index)=>{
return <li key={index} className="list">{item}</li>
})
)
3、元素是否显示隐藏（类vue的v-if v-show v-htm v-text）
let Dom = <h2 style={{display:false?"block":"none"}}>{false?names:message}</h2>
4、属性绑定（类vue的v-bind）
let Dom = <h2 title={title}>{title}</h2>
5、class名
className
6、for
htmlFor 多用于label
7、render函数
参数1：需要渲染的组件或者DOM结构
参数2:将渲染的虚拟DOM放在那个标签内部
参数3：回调函数
eg：
ReactDom.render(
Dom,
document.querySelector("#root"),
()=>{
console.log("渲染成功")
}
)
8、需要安装：
cnpm install react react-dom --save-dev
9、组件规则
1）组件可以用单标签 双标签
<App/>
<App></App>
2）react严格规定 组件名称必须大写
3）区分组件和ELEMENT的区别
10、如何定义组件
export default class App extends Component{
render(){
里面必须要有render函数，必须返回一个jsx语法
)
}
}
11、react中如何对数据进修改？
this.setState({
key:value
1）key是需要修改的属性
2） value是需要修改成的值
})
12、组件
import React,{Component,Fragment} from "react";
//定义组件,继承组件父类，
export default class App extends Component{
constructor(){
//初始化生命周期函数
//必须要写super()
super()
//当前组件的状态
this.state={
message:'1815'
}
}
// 里面必须要写一个函数render
render(){
let {message}=this.state;//解构赋值
//必须返回一个jsx语法
return (
//this指向实例化对象，本对象App
//里面的this 指向App
<Fragment>
<h2 onClick={this.handleClick.bind(this)}>{message}</h2>
{/* <h2>App1</h2> */}
</Fragment>
)
}
handleClick(e){
console.log(this)//undefine(指向的一个虚拟dom)
// alert(1)
// console.log(e)
// this.state.message="1234"//在react修改数据不予许这么做
this.setState({
message:"111"
})
}
}
//Fragment不会被渲染到页面上，可以当作无用标签去使用
/*
render()
render用来渲染虚拟dom，当第一次渲染完毕以后，会将渲染的结果保存在缓存当中，当数据发生改变的时候
render会进行第二次渲染，会将缓存的数据拿出和现在的数据进行对比，改变需要改变的虚拟dom，
而不是将所有虚拟dom重新渲染
constructor()
初始化函数 生命周期
super()继承(必须写，否则报错)
定义当前组件的状态（属性）
*/