首先需要引入React的三个js依赖包,具体如下:
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script type="text/javascript" src="../js/react.js" >script>
<script type="text/javascript" src="../js/react-dom.js" >script>
<script type="text/javascript" src="../js/browser.min.js" >script>
head>
<body>
<div id="demo">div>
<script type="text/babel">
ReactDOM.render(
{/*总是demo*/}
Hello,World</h1>,
document.getElementById('demo')
)
script>
body>
html>
注意最后一个标签的type值为
text/babel
,可以简单理解为此属性声明使用React的JSX语法,而非javaScript.
有时又会在其他地方看到type的值为text/jsx
,区别在于babel可以使用es6的语法.
那么JSX又是什么呢?简单来说就是,JSX在遇到<时就当HTML解析,遇到{就当JavaScript解析。
上面的{/*总是demo*/}
就好理解了,就是JavaScript的注释.
jsx会自动展开数组里的元素
var arr=[1,2,3];
var arr2=[
<p>p1p>,
<p>p2p>,
]
ReactDOM.render(
<div>{arr}{arr2}div>,
document.getElementById('demo')
)
sthReact.createClass
方法就用于生成一个组件类,首字母必须大写
顶层标签只能有一个:return
会报错 Hello {this.props.name}
在添加属性时,class要写成className,for要写成htmlFor,因为class和for是JavaScript的关键字。
var Msg=React.createClass({
render:function () {
return this.props.class}>Hello {this.props.name}
}
});
ReactDOM.render(
"peter" class="red"/>,
document.getElementById('demo')
)
可以看到上面的代码中有this.props
,作用就是向组件传递的参数可以在使用this.props
中获得.
直接上代码
var Component1 = React.createClass({
render: function() {
return (
{this.props.prop1}
);
}
});
var Component2 = React.createClass({
render: function() {
return (
{this.props.prop2}
);
}
});
var Final = React.createClass({
render: function() {
return (
this.props.prop1} />
this.props.prop2} />
);
}
});
ReactDOM.render(
"one" prop2="two" />,
document.getElementById('demo')
);
上面已经知道props可以向组件中传递自定义参数,那下面就介绍一下其他props相关知识
- 默认props
通过getDefaultProps
设置组件默认属性值,当自定义属性和默认属性一样时,使用自定义属性.
- propTypes
propTypes可以验证传给组件的参数是否符合要求,也可以说是:定义组件需要接收什么养的参数类型
var Demo=React.createClass({
getDefaultProps:function(){
return{
myName:'defaultName'
}
},
propTypes:{
title:React.PropTypes.string.isRequired
},
render:function () {
return this.props.title} name={this.props.myName}>{this.props.innerHtml}
}
});
var data='124';
ReactDOM.render(
"demoText" myName='myName'/>,
document.getElementById('demo')
)
上面demo希望得到一个字符串类型的title属性,如果类型错误或没有title属性(isRequired 必填),则React会在控制台提出警告,但是代码依然可以执行。
最终span的name值为myName。
this.props
表示固定的参数,而 this.state
则是要与用户进行互动的。
那么既然有默认props,当然也少不了默认stategetInitialState
,返回的对象可以通过this.state获取。
可以通过this.setState
来修改state,并且在修改后会自动调用this.render方法再次渲染页面
var State=React.createClass({
getInitialState:function(){
return {flag:false};
},
handleClick:function(){
this.setState(
{
flag:!this.state.flag
}
);
},
render:function(){
var innerHtml=this.state.flag?'true':'false';
return (
{innerHtml}
);
}
});
ReactDOM.render(
,
document.getElementById('demo')
)
获取真实DOM需要在标签中添加ref属性,之后便可以this.refs.[ref值]获取.需要注意的是,此操作必须在DOM插入之后才能拿到真实DOM.
var RealDOM=React.createClass({
handleClick:function(){
console.log(this.refs.myInput.value);
},
render:function(){
return (
"text" ref="myInput" />
"button" value="input里有啥捏" onClick={this.handleClick} />
);
}
});
ReactDOM.render(
,
document.getElementById('demo')
)
除了此种方式之外,我们还可以使用findDOMNode()
方法来获取DOM节点来进行一些DOM操作。此方法依然需要等到DOM插入之后才能获得真实DOM。
因为表单一般是要和用户互动的,所以应使用this.state
来操作
var Form=React.createClass({
getInitialState:function(){
return {value:'initForm'}
},
handleChange:function(e){
this.setState({
value:e.target.value
})
},
render:function(){
var value=this.state.value;
return(
this.handleChange} value={value}/>
{value}
)
}
})
ReactDOM.render(
,
document.getElementById('demo')
)
此处采用jQuery的ajax来处理,当然,也可以选择其它ajax方式来实现.
componentDidMount
会在组件已经插入DOM后执行.
var AjaxDemo=React.createClass({
getInitialState:function () {
return {
name:'',
age:''
}
},
componentDidMount:function(){
$.get(this.props.url,function (res) {
var name=res.name;
if(this.isMounted()){
this.setState({
name:'peter',
age:18
});
}
}.bind(this));
},
render:function () {
return(
Name:{this.state.name}
age:{this.state.age}
)
}
});
ReactDOM.render(
'demo11.json'/>,
document.getElementById('demo')
)
demo11.json内容如下
{
"name":"peter",
"age":"18"
}
上面使用的componentDidMount
就是生命周期的方法之一。
组件的生命周期可分成三个状态:
- Mounting:已插入真实 DOM
- Updating:正在被重新渲染
- Unmounting:已移出真实 DOM
生命周期方法有:
- componentWillMount():完成首次渲染之前调用,此时仍可以修改组件的state。
- componentDidMount():完成首次渲染之后调用。如果要和其他JavaScript框架一起使用,可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。
- componentWillUpdate(object nextProps, object nextState):重新渲染(render)之前调用,此时不允许更新props或state。
- componentDidUpdate(object prevProps, object prevState):渲染结束调用
- componentWillUnmount():移出DOM之前调用
- componentWillReceiveProps(object nextProps):已加载组件收到新的参数时调用
- shouldComponentUpdate(object nextProps, object nextState):组件是否应当渲染新的props或state,通常不需要使用。
var Lifecycle=React.createClass({
getInitialState:function () {
return {
fontSize:10
};
},
componentDidMount:function(){
this.timer=setInterval(function () {
var fontSize=this.state.fontSize;
fontSize+=2;
if(fontSize>30){
fontSize=10;
}
this.setState({
fontSize:fontSize
});
}.bind(this),1000);
},
render:function () {
return (
this.state.fontSize}}>
{this.props.name}
)
}
});
ReactDOM.render(
"lifecycle"/>,
document.getElementById('demo')
)
- 学习文章地址
- React 入门实例教程
- React 教程