一，引入
<script src="./react.development.js"></script>
<script src="./react-dom.development.js"></script>
<script src="./browser.min.js"></script>
<script type="text/babel">
内容
</script>
二，JSX
JSX是一种Java Script 的语法扩展，React.DOM.render()将react元素渲染到Dom节点中；
// render方法有两个参数 第一个参数是要插入的内容，第二个参数是挂载的根元素
// jsx里插入表达式需要用一个{}
// jsx里的标签必须有结束标签
let name = 'xiaoming'
ReactDOM.render(
<h1>
hello world, {name + 'LALAL'}
<input type="text"/>
</h1>,
document.getElementById('app')
)
三，组件
方法一：使用JavaScript函数(无状态组件)
const Welcome = () => {
return <h1>hello xxx</h1>
}
// props参数是一个obj接收父组件的传值，return的最外层标签是只能有一个父元素；
const Com = (props) => {
return (
<div>
<h1>{props.name}</h1>
<p>world</p>
<span>{props.title}</span>
{props.children}
</div>
)
}
ReactDOM.render(
<Com name="hello" title="aaaaa">
<input type="text"/>
</Com>,
document.getElementById('app')
)
方法二：利用ES6 class 来定义一个组件(有状态组件)
class Com extends React.Component{
render() {
return (
<div>
<h1>hello</h1>
<p>{this.props.name}</p> //利用this.props来接收父组件的传值
<span>{this.props.title}</span>
{this.props.children}
<Wel/>
</div>
)
}
}
ReactDOM.render(
<Com name="hello" title="aaaaa">
<input type="text"/>
</Com>,
document.getElementById('app')
)
三，有状态组件和无状态组件的区别和特点
1，函数式（无状态的）只能展示内容；
类可以展示和修改内容
2，组件名称的首字母必须大写；
3，props.children 取到组件中首尾标签中间的值{props.children} 或{this.props.children} 类似vue中的slot
4，函数式需要用props.xxx来接收父组件的传值；
类需要用this.props.xxx来接收父组件的传值；
5，组件和React.DOM中的标签必须是闭合的；
四，state
State是组件对象最重要的属性，值是对象（可以包含多个数据），用于改变组件 内通状态的值（动态的)组件被称为“状态机”，通过更新组件的state来更新对应的页面显示（重新渲染
组件）
首先，属性值写在构造函数中
其次，组件中的数据写在state对象中
1，初始化状态
class Main extends React.Component{
constructor(props){
super(props);
this.state={
num:[]
}
}
}
2,读取某个状态值
this.state.num...
3,组件数据更新
this.setState({
num:this.state.num++;
)
4，props和state的区别
- props是不可变的，用于父子组件之间的传值；而state可以改变
五，refs
ref属性通常放在input标签内部交互获取输入框内的值类似于vue中的v-model方法一：
定义：
<input type="text" ref="name"/>
获取：
this.refs.name.value
方法二：
定义：
<input type="text" ref={input =>myInput=input}/>
获取：
this.myInput.value
input =>this.myInput=input==(input)=>{myInput=input}
推荐使用方法二
六，组件事件
1，组件事件的绑定使用驼峰式；例：<button onClick={this.方法名}></button>
2,组件事件绑定时的this指向(自定义的事件都需要改变this的指向)
方法一：
<button onClick={this.方法名.bind(this)}></button>
方法二：
<button onClick={this.方法名}></button>
在组件的构造函数中
constructor(params){
super(params);
this.方法名=this.方法名.bind(this)
}
3,形参event可以取到这个事件
4，父组件向子组件传递事件
class Childern extends React.Component{
constructor(params){
super(params);
this.click=this.click.bind(this)
}
click(){
this.props.add();
}
render() {
return (
<div>
<button onClick={this.click}></button>
</div>
)
}
}
class Main extends React.Component{
constructor(params){
super(params);
this.add=this.add.bind(this)
}
add(){
}
render() {
return (
<div>
<Childern add={this.add}></Childern>//子组件
</div>
)
}
}
七，取出对象中属性的方法
let obj = {
name: 'xm',
age: 12
}
属性值为常量：
1，obj.name;
2,obj['name']
属性值为变量：
1，let tag='name'
obj[tag]
八，双向数据绑定
类似于VUE中的v-model 利用onChange函数 每当DOM元素中的内容发生改变时就触发一次这个方法change(event){
console.log(event.target.value)//可以获取到表单元素中的数据
}
<input onChange={this.change}/>
九，组件样式
- 设置内部或外部样式
在style标签内部书写样式，
在需要添加样式的dom元素上利用className或id来对应类/id选择器的名字
- 设置内联样式
方法一：<h1 style={style}></h1>
在render函数内部定义一个属性style
如：let style={
color：red
}
方法二：<h1 style={
{
color:red
}
}></h1>
十，条件渲染
render()函数的return 中只能够返回简单的三目运算符 在render()函数里 return函数外部{ 利用if语句外部循环 利用map语句进行遍历 }生命周期钩子函数
1，constructor() 设置状态state
2，conponentWillMount() 修改状态
3，render() 渲染虚拟dom
4,conponentDidMount() 渲染完毕
5,componentWillReceiveProps 子组件接收到父组件的数据
6,shouldComponentUpdate 本组件是不是需要进行去更新视图，默认为true，要不不写，写了必写返回值，false表示不更新视图
7,componentWillUpdate 组件即将被更新-----无实际意义
8,render 重新渲染数据
9,componentDidUpdate 实例化一些对象（特别是如果数据是动态请求的）
10,componentWillUnmount 清除一些计时器，定时器等
11,componentDidCatch 错误异常处理
