HelloWorld
首先需要引入React的三个js依赖包,具体如下:
<!DOCTYPE html>
<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*/}
<h1>Hello,World</h1>,
document.getElementById('demo')
)
</script>
</body>
</html>
注意最后一个<script>
标签的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>p1</p>,
<p>p2</p>,
]
ReactDOM.render(
<div>{arr}{arr2}</div>,
document.getElementById('demo')
)
组件
React.createClass
方法就用于生成一个组件类,首字母必须大写
顶层标签只能有一个:return <h1>Hello {this.props.name}</h1><p>sth</p>
会报错
在添加属性时,class要写成className,for要写成htmlFor,因为class和for是JavaScript的关键字。
var Msg=React.createClass({
render:function () {
return <h1 className={this.props.class}>Hello {this.props.name}</h1>
}
});
ReactDOM.render(
<Msg name="peter" class="red"/>,
document.getElementById('demo')
)
可以看到上面的代码中有this.props
,作用就是向组件传递的参数可以在使用this.props
中获得.
复合组件
直接上代码
var Component1 = React.createClass({
render: function() {
return (
<h1>{this.props.prop1}</h1>
);
}
});
var Component2 = React.createClass({
render: function() {
return (
<p>{this.props.prop2}</p>
);
}
});
var Final = React.createClass({
render: function() {
return (
<div>
<Component1 prop1={this.props.prop1} />
<Component2 prop2={this.props.prop2} />
</div>
);
}
});
ReactDOM.render(
<Final prop1="one" prop2="two" />,
document.getElementById('demo')
);
props
上面已经知道props可以向组件中传递自定义参数,那下面就介绍一下其他props相关知识
- 默认props
通过getDefaultProps
设置组件默认属性值,当自定义属性和默认属性一样时,使用自定义属性.
- propTypes
propTypes可以验证传给组件的参数是否符合要求,也可以说是:定义组件需要接收什么养的参数类型
var Demo=React.createClass({
getDefaultProps:function(){
return{
myName:'defaultName'
}
},
propTypes:{
title:React.PropTypes.string.isRequired
},
render:function () {
return <span title={this.props.title} name={this.props.myName}>{this.props.innerHtml}</span>
}
});
var data='124';
ReactDOM.render(
<Demo title={data} innerHtml="demoText" myName='myName'/>,
document.getElementById('demo')
)
上面demo希望得到一个字符串类型的title属性,如果类型错误或没有title属性(isRequired 必填),则React会在控制台提出警告,但是代码依然可以执行。
最终span的name值为myName。
state
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 (
<div>
<p>{innerHtml}</p>
<button onClick={this.handleClick}>点击更换显示内容</button>
</div>
);
}
});
ReactDOM.render(
<State />,
document.getElementById('demo')
)
真实DOM
获取真实DOM需要在标签中添加ref属性,之后便可以this.refs.[ref值]获取.需要注意的是,此操作必须在DOM插入之后才能拿到真实DOM.
var RealDOM=React.createClass({
handleClick:function(){
console.log(this.refs.myInput.value);
},
render:function(){
return (
<div>
<input type="text" ref="myInput" />
<input type="button" value="input里有啥捏" onClick={this.handleClick} />
</div>
);
}
});
ReactDOM.render(
<RealDOM />,
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(
<div>
<input onChange={this.handleChange} value={value}/>
<p>{value}</p>
</div>
)
}
})
ReactDOM.render(
<Form />,
document.getElementById('demo')
)
AJAX
此处采用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(
<div>
<p>Name:{this.state.name}</p>
<p>age:{this.state.age}</p>
</div>
)
}
});
ReactDOM.render(
<AjaxDemo url='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 (
<div style={{fontSize:this.state.fontSize}}>
{this.props.name}
</div>
)
}
});
ReactDOM.render(
<Lifecycle name="lifecycle"/>,
document.getElementById('demo')
)
学习文章地址
- React 入门实例教程
- React 教程