一：react了解
<script src="../build/react.js"> </script> //是react的核心库
<script src="../build/react-dom.js"> <script> //是提供了与dom相关的功能
<script src="../build/browser.min.js"> </script> //是将jsx语法转为javascript语法JSX的基本语法：遇到html标签（以<开头)，就用html规则解析， 遇到代码块（以{开头），就用javascript规则解析
二：ReactDOM.render() //将模板转为HTML语言，并插入指定的DOM节点。
例：
ReactDOM.render(
<div>hello</div>,
document.getElementById('demo')
)
三：React.createClass() //生成一个组件类
例：
var HelloName = React.createClass({
render:function(){
return <h1> hello {this.props.name} </h1>
}
})ReactDOM.render(
<HelloName name="nana" /> ,
document.getElementById('demo')
)
解析：1.HelloName就是一个组件类，模板插入.会自动生成一个实例；所有的组件类都必须要有自己的render方法，用于输出组件；
2.helloName组件加入了一个name属性，组件的属性可以在组件类的this.props对象上获取；
注意：1.组件类的第一个字母必须要大写，
2.只能包含一个顶层标签；
四：this.props.children //属性,表示组件的所有子节点
它的值可能有三类，没有子节点的时候underfined,一个子节点的时候是object,多个Arrray;React提供了一个工具方法React.Children来处理this.props.children,利用React.Children.map来遍历子节点this.props.children;
例：
var NoteList = React.createClass({
render:function(){
return <ol>
{
React.Children.map(this.props.children,function(child){
return <li>{child}</li>
})
}
</ol>
}
)}ReactDOM.render(
<NoteList>
<span>nana</span>
<span>xiaona</span>
</NoteList>,
document.getElementById('demo')
)
五：组件类的PropTypes属性，用来验证组件实例的属性是否符合要求;
例：
var MyTitle = React.createClass({
PropTypes:{
title:React.PropTypes.string.isRequired,
},
render:function(){
return <h1>{this.props.title}</h1>
}
})ReactDOM.render(
<MyTitle title="nana"/> ,
document.getElementById('dom')
)
React.PropTypes告诉React这个title属性是必须的，而且必须是字符串；
六：getDefaultProps() //设置组件属性的默认值
例：
var MyName = React.createClass({
getDefaultProps:function(){
return {name:'xiaona'}
},
render:function(){
return <h1>{this.props.name}</h1>
}
})ReactDOM.render(
<MyName />,
document.getElementById('dom')
)
七：getInitialState() // 设置组件的初始状态
例：
var ButtonLink = React.createClass({
getInitialState:function(){
return {link:false}
},
handleChangeState:function({
this.setState({
link:!this.state.link
})
},
render:function(){
var text = this.state.link ? '选择' : '不选';
return <p onClick={this.handleChangeState}> {text} </p>
}
});
ReactDOM.render(
<ButtonLink /> ,
document.getElementById('demo6')
)
详解：1.getInitilaState(); 设置组件初始状态；
2.this.setState({}) ; 修改组件初始状态；
3.this.state; 获取组件初始状态的某一值；
八：获取真实dom节点
组件并不是真实的dom,而是虚拟dom,存在于内存之中，插入文档之后，才会变成真实dom; 需要获取到真实的dom节点，用到ref属性；例：
var InputText = React.createClass({
handleGetValue:function(){
this.refs.textValue.focus();
},
render :function(){
return (
<div>
<input type="text" ref="textValue">
<input type="button" value="点击获取焦点" onClick={this.handleGetValue}>
</div>
)
}
});
ReactDOM.render(
<InputText /> ,
document.getElementById('demo')
)
详解：1.虚拟dom是拿不到用户输入的内容；文本输入框必须要有一个ref属性，然后this.refs.[refName]就会返回真实的dom节点；
2.this.refs.[refName]属性获取的是真实的dom,所以必须等到虚拟dom插入文档以后；所以通过为组件指定click事件的回调函数，确保只有等到真实dom发生click事件之后，才会读取this.refs.[refName]属性；
九：表单获取input的值 event.target.valuevar
var GetVlaue = React.createClass({
getInitialState:function(){
return { text:'请输入默认值', }
},
handelGetText:function(event){
this.setState({text:event.target.value})
},
render:function(){
return (
<div>
<input placehloder={this.state.text} onClick={this.handelGetText}/>
<span>{this.state.text}</span>
</div>
)
}
});ReactDOM.render(
<Get Value />,
document.getElementById('demo8')
）
十：组件的生命周期分为3个状态 ：
Mounting插入真实的dom
updating正在被重新渲染
Unmounting移除出真实dom
3种状态共计5种处理函数
compontentWillMount() 插入真实dom之前；
compontentDidMount() 插入真实dom之后；
剩下的集中待理解之后；
十一：Ajax
网友评论