workspace setup 安装和使用
html文档中需要引入react.js react-dom.js 以及babel等文件
采用JSX语法 <script type="text/babel">
components & rendering 组件渲染
var CommentBox = React.createClass({
render: function() {
return (
<div className="commentBox">Hello world!</div>
);
}
});
ReactDom.render(
<CommentBox />,
document.getElementById('content')
);
获取DOM元素节点，并将组件渲染上去。
composing multiple react components 组合多组件
var CommentList = React.createClass({
render: function() {
return (<div className="commentList">Hello, I am a CommentList</div>);
}
});
var CommentForm = React.createClass({
render: function() {
return (<div className="commentForm">Hello, I am a CommentForm.</div>);
}
});
var CommentBox = React.createClass({
render: function() {
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList />
<CommentForm />
</div>
);
}
});
在组合组件中，React会自动调用createElement(tagName)方法来渲染DOM节点。
state vs props & application data
React中的数据可以通过state和props两个属性值来获取。
props
props是一种从父级向子级传递数据的方式。而state仅用于交互功能，即数据随着时间变化。
给Comment控件添加一些属性
var Comment = React.createClass({
render: function() {
return (
<div className="comment">
<h2 className="commentAuthor">
{this.props.author}
</h2>
{this.props.children}
</div>
);
}
});
使用过程中，React会检测到定义的属性值
var CommentList = React.createClass({
render: function() {
return (
<div className="commentList">
<Comment author="Pete Hunt">This is one comment</Comment>
<Comment author="Jordan Walke">This is *another* comment</Comment>
</div>
);
}
});
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();
<div className="comment">
<h2 className="commentAuthor">
{this.props.author}
</h2>
{md.render(this.props.children.toString())}
</div>
);
}
});
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 (
<div className="commentBox">
<h1>Comments</h1>
<CommentList data={this.props.data} />
<CommentForm />
</div>
);
}
});
ReactDom.render(
<CommentBox data={data} />,
document.getElementById('content')
);
可以动态地渲染CommentList组件
var CommentList = React.createClass({
render: function() {
var commentNodes = this.props.data.map(function(comment) {
<Comment author={comment.author} key={comment.id}>
{comment.text}
</Comment>
});
return (
<div className="commentList">
{commentNodes}
</div>
);
}
});
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 (
<div className="commentBox">
<h1>Comments</h1>
/*从组件状态获取数据*/
<CommentList data={this.state.data} />
<CommentForm />
</div>
);
}
});
由于componentDidMount是在React被渲染后第一次执行的，所以可以利用setInterval方法每隔一段时间从服务器获取最新的数据
var CommentBox = React.createClass({
loadCommentsFromServer: function() {
$.ajax(...);
},
componentDidMount: function() {
this.loadCommentsFromServer();
setInterval(this.loadCommentsFromServer, this.props.pollInterval);
},
...
...
});
ReactDom.render(
<CommentBox url="/url/comments" pollInterval={2000} />,
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 (
<form className="commentForm">
<input type="text" placeholder="Your name" value={this.state.author} onChange={this.handleAuthorChange}/>
<input type="text" placeholder="Say something" value={this.state.text} onChange={this.handleTextChange}/>
<input type="submit" value="Post" />
</form>
)
};
});
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 (
<form className="commentForm" onSubmit={this.handleSubmit}>
....
</form>
)
}
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'
};
},
});
