workspace setup 安装和使用
html文档中需要引入react.js react-dom.js 以及babel等文件
采用JSX语法
components & rendering 组件渲染
var CommentBox = React.createClass({
render: function() {
return (
Hello world!
);
}
});
ReactDom.render(
,
document.getElementById('content')
);
获取DOM元素节点,并将组件渲染上去。
composing multiple react components 组合多组件
var CommentList = React.createClass({
render: function() {
return (Hello, I am a CommentList);
}
});
var CommentForm = React.createClass({
render: function() {
return (Hello, I am a CommentForm.);
}
});
var CommentBox = React.createClass({
render: function() {
return (
Comments
);
}
});
在组合组件中,React会自动调用createElement(tagName)方法来渲染DOM节点。
state vs props & application data
React中的数据可以通过state和props两个属性值来获取。
props
props是一种从父级向子级传递数据的方式。而state仅用于交互功能,即数据随着时间变化。
给Comment控件添加一些属性
var Comment = React.createClass({
render: function() {
return (
{this.props.author}
{this.props.children}
);
}
});
使用过程中,React会检测到定义的属性值
var CommentList = React.createClass({
render: function() {
return (
This is one comment
This is *another* comment
);
}
});
this.props.author的值会有["Pete Hunt", "Jordan Walke"]
this.props.children则表示了组件的所有子节点,当子节点个数大于1时,可以使用map
方法来处理相关逻辑。
adding markdown
可以给组件加上markdown格式支持
var Comment = React.createClass({
render: function() {
return (
var md = new Remarkable();
{this.props.author}
{md.render(this.props.children.toString())}
);
}
});
application data 直接渲染数据
var data = [
{id: 1, author: "Pete Hunt", text: "This is one comment"},
{id: 2, author: "Jordan Walke", text: "This is *another* comment"}
];
var CommentBox = React.createClass({
render: function() {
return (
Comments
);
}
});
ReactDom.render(
,
document.getElementById('content')
);
可以动态地渲染CommentList
组件
var CommentList = React.createClass({
render: function() {
var commentNodes = this.props.data.map(function(comment) {
{comment.text}
});
return (
{commentNodes}
);
}
});
state
state属性是组件的私有变量,表示了组件的状态。当组件的状态更新的时候,组件会重新渲染自身。
var CommentBox = React.createClass({
//获取初始化状态,只执行一次
getInitialState: function() {
return {data: []};
},
//当组件加载后,获取数据
componentDidMount: function() {
$.ajax({
url: this.props.url,
dataType: 'json',
cache: false,
success: function(data) {
this.setState({data: data});
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
render: function() {
return (
Comments
/*从组件状态获取数据*/
);
}
});
由于componentDidMount
是在React被渲染后第一次执行的,所以可以利用setInterval方法每隔一段时间从服务器获取最新的数据
var CommentBox = React.createClass({
loadCommentsFromServer: function() {
$.ajax(...);
},
componentDidMount: function() {
this.loadCommentsFromServer();
setInterval(this.loadCommentsFromServer, this.props.pollInterval);
},
...
...
});
ReactDom.render(
,
document.getElementById('content')
);
javascript events & data changes 事件和数据更新
var CommentForm = React.createClass(function() {
getInitialState: function() {
return {author: '', text: ''};
},
handleAuthorChange: function(e) {
this.setState({author: e.target.value});
},
handleTextChange: function(e) {
this.setState({text: e.target.value});
},
render: function() {
return (
)
};
});
events 事件处理
事件处理是利用setState方法来更新组件状态,其中组件中onChange属性用来触发定义的事件监听器。
...
//处理submit方法
handleSubmit: function() {
e.preventDefault();
var author = this.state.author.trim();
var text = this.state.text.trim();
if(!text || !author) {
return;
}
this.setState({author: '', text: ''});
},
render: function() {
return (
)
}
React中绑定事件处理器是使用驼峰命名法的方式。
要在手机或平板上使用触摸事件,需要调用React.initalizeTouchEvents(true)
方法
Prop验证
React.PropTypes提供很多验证其来验证传入数据的有效性。
React.createClass({
propTypes: {
optionalArray: React.PropTypes.array,
optionalBool: React.PropTypes.bool,
optionalFunc: React.PropTypes.func,
optional....
optionalNode: React.PropTypes.node,
//自定义验证器
customProp: function(props, propName, componentName) {
if(!/matchme/.test(props[propName])) {
return new Error('Validation failed!');
}
}
},
...
})
默认prop值
var ComponentWithDefaultProps = React.createClass({
getDefaultProps: function() {
return {
value: 'default value'
};
},
});