《React官方文档》之教程Tutorial
原文链接 译者：jella77
教程Tutorial
我们提供:
- 可以看到所有评论的视图
- 提交评论的表单
- 通过Hooks可以自定义后端
它有如下特点:
- 优化的评论: 评论将会在保存到服务器上之前就出现在列表中，这样看上去非常快。
- 实时更新: 其他用户的评论会实时的被放到评论界面。
- Markdown格式: 用户可以使用Markdown来格式化他们的文本。
想要跳过这些只看源码？
运行一个服务器
首先，我们需要一个运行的服务器。它将作为API端口来获取并保存数据。为了简便，我们用脚本语言创建一个服务端。你可以看源文件 或者 下载zip文件 。
服务器使用一个JSON文件作为数据库。 在实际的产品中你不会这样用，但是这样可以简单的模拟出当你使用一个API是你可能做的事情。一旦你启动服务器， 它将会支持API端口并且为我们需要的静态页面提供服务。
开始
本教程中我们尽量简化。 上文提到的包中包含一个HTML文件。 在你最喜欢的编辑器中打开public/index.html，可以看到:
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>React Tutorial</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/babel" src="scripts/example.js"></script>
<script type="text/babel">
// To get started with this tutorial running your own code, simply remove
// the script tag loading scripts/example.js and start writing code here.
</script>
</body>
</html>
本教程余下的部份，我们将通过JavaScript语言完成<script>标签中的内容。我们没有任何高级的livereload（自动重新加载），因此你需要在保存修改刷新浏览器。启动服务后在浏览器中打开http://localhost:3000。当你未做任何修改加载在这个页面时，你将看到我们想要构建的成品。删掉前缀为<script>的标签就可以开始了。
注意：
我们在这里用到了jQuery因为我们想要简化ajax调用，但这在React中不是必要的。
你的第一个组件
React就是将各种组件模块化组合到一起。我们的评论框例子中需要以下组件结构：
- 评论框CommentBox
- 评论列表CommentList
- 每条评论Comment
- 可提交的评论表单CommentForm
首先，构建评论框组件，这就是个简单的<div>:
// tutorial1.js
var CommentBox = React.createClass({
render: function() {
return (
<div className="commentBox">
Hello, world! I am a CommentBox.
</div>
);
}
});
ReactDOM.render(
<CommentBox />,
document.getElementById('content')
);
注意纯TML元素名都是以小写字母开头，然而React类名通常以大写字母开头。
JSX语法
首先要注意到的是在你的 JavaScript中有XML化语法。我们有一个简单的预编译将语法糖转化为普通的JavaScript：
// tutorial1-raw.js
var CommentBox = React.createClass({displayName: 'CommentBox',
render: function() {
return (
React.createElement('div', {className: "commentBox"},
"Hello, world! I am a CommentBox."
)
);
}
});
ReactDOM.render(
React.createElement(CommentBox, null),
document.getElementById('content')
);
这种用法不是必需的，JSX确实比普通的JavaScript简单。更多内容可参考JSX 语法。
下一步
我们将一些JavaScript对象的方法传入React.createClass()来创造一个新的React组件。这个方法中最重要的是render，它将返回一个React组件树并最终渲染HTML。
<div>并不是真正的DOM节点，他们是React的div组件实例。你可以把这些当作React知道如何处理的数据或者标识。React是安全的。我们并不产生HTML字符串，所以XSS保护是默认的。
你可以不返回基本的HTML，可以返回你或者他人建立的一个组件树。这使得React是可组合的（可维护前端的一个关键原则）。
ReactDOM.render() 实例化根节点组件，开始框架，将标识注入到原生的DOM中，作为第二个参数。
通过在不同平台上共享的React核心工具，ReactDOM方法显示出特定的DOM方法 (e.g., React Native)。
需要注意的是在本教程中ReactDOM.render要在js文件的底部。ReactDOM.render只有在符合组件被定义后才可以被调用。
复合组件
下面我们构建一个评论列表和评论表单的框架，用到的同样是简单的<div>。将这两个组件添加到你的文件中，保持评论框CommentBox定义的存在以及ReactDOM.render的调用：
// tutorial2.js
var CommentList = React.createClass({
render: function() {
return (
<div className="commentList">
Hello, world! I am a CommentList.
</div>
);
}
});
var CommentForm = React.createClass({
render: function() {
return (
<div className="commentForm">
Hello, world! I am a CommentForm.
</div>
);
}
});
接下来，评论框使用这两个新组件：
// tutorial3.js
var CommentBox = React.createClass({
render: function() {
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList />
<CommentForm />
</div>
);
}
});
注意我们是怎样将HTML标签和我们构造的组件结合到一起的。HTML组件就是常规的React组件，和你自己定义的就只有首字母大小写的区别。 JSX编译器可以自动的将HTML标签重写到React.createElement(标签名)表达式中而不管其他的，这将避免全局命名空间被污染。
使用属性
我们创建Comment组件，它将依赖于它的父组件传递给它的数据。 对于子组件来说，从父组件传递来的数据可以像一个属性一样被获取。这些属性通过this.props得到。使用属性我们可以读取从CommentList传递给Comment的数据，并且渲染标识：
// tutorial4.js
var Comment = React.createClass({
render: function() {
return (
<div className="comment">
<h2 className="commentAuthor">
{this.props.author}
</h2>
{this.props.children}
</div>
);
}
});
通过将JavaScript表达式包含在JSX中（作为属性或者子节点），你可以将文本或者React组件放在树中。我们通过传给组件的this.props 及其他像this.props.children的键来获取值。我们获取传递给组件的属性传递给组件，比如this.props的键或者其他被大括号包起来的比如this.props.children。
组件属性
既然我们定义了Comment 组件，我们就希望利用它来传递作者名和评论内容。这将使得我们对每一段评论重用同样的代码。现在让我们为我们的CommentList添加一些评论：
// tutorial5.js
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>
);
}
});
注意到我们已经从父组件CommentList 向子组件Comment传递数据。例如：我们将名字Pete Hunt (通过author属性) 和评论内容This is one comment (通过类XML的子节点)传递给第一个Comment。如上所述，Comment组件将通过this.props.author和this.props.children获取属性。
添加Markdown
Markdown是一个简单的方式来格式化你的文本。例如星号围绕的文本将会被强调。
在本教程中我们使用一个第三方库marked，它将把Markdown文本转化为纯HTML.。我们为页面引用这个库然后直接使用，把文本转化为Markdown并输出：
// tutorial6.js
var Comment = React.createClass({
render: function() {
return (
<div className="comment">
<h2 className="commentAuthor">
{this.props.author}
</h2>
{marked(this.props.children.toString())}
</div>
);
}
});
我们现在所做的就是调用marked库。我们需要把this.props.children从React包裹的文本转化为一个字符串，因此我们显式的调用toString()。
但仍然有问题！我们渲染好的评论在显示器中这样显示:”<p>This is<em>another</em> comment</p>“。我们想把这些标签真正的渲染成HTML。
这是因为React会防止 XSS攻击。有种方法可以解决这个问题但建议尽量不这么做：
// tutorial7.js
var Comment = React.createClass({
rawMarkup: function() {
var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
return { __html: rawMarkup };
},
render: function() {
return (
<div className="comment">
<h2 className="commentAuthor">
{this.props.author}
</h2>
<span dangerouslySetInnerHTML={this.rawMarkup()} />
</div>
);
}
});
这个特殊的API使得插入纯HTML变得困难，但是为了marked也不得不使用这个伎俩。
记住： 使用这个要确保marked是安全的。在这里我们传递sanitize: true 来告诉marked不保留任何的HTML标识
连接上数据模型
到目前为止我们已经可以将评论直接插入到源代码中了。接下来我们将JSON对象传入评论列表。最终这个数据将来源于服务器，但现在这样写你的代码：
// tutorial8.js
var data = [
{id: 1, author: "Pete Hunt", text: "This is one comment"},
{id: 2, author: "Jordan Walke", text: "This is *another* comment"}
];
我们需要模块化的把这数据传入到CommentList。修改CommentBox和ReactDOM.render()调用来将数据通过属性传入到CommentList：
// tutorial9.js
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中数据可得，我们可以动态渲染评论：
// tutorial10.js
var CommentList = React.createClass({
render: function() {
var commentNodes = this.props.data.map(function(comment) {
return (
<Comment author={comment.author} key={comment.id}>
{comment.text}
</Comment>
);
});
return (
<div className="commentList">
{commentNodes}
</div>
);
}
});
这就可以了!
从服务器取数据
下面我们从服务器动态获取数据来代替固化的代码。我们去掉data属性并以一个URL来代替取数据：
// tutorial11.js
ReactDOM.render(
<CommentBox url="/api/comments" />,
document.getElementById('content')
);
这个组件不同于前面的那些因为它必须重新渲染它自己。服务器端响应之前组件不会有任何数据，这时间段组件不会渲染新的评论。
注意：代码在这个阶段是不能工作的。
反应状态
到目前为止，每个组件都可以基于自己的属性渲染自己。 属性props是不可改变的: 它们来自父节点并且属于父节点。为了实现交互，我们为组件引入一个可变的状态。 this.state是组件私有的并且可以通过调用this.setState()被改变。当状态state更新时，组件也会重新渲染。
render()方法就像this.props和this.state函数一样以声明形式写入。框架却表UI始终与输入一致。
当服务器端取数据，我们可以修改我们已有的评论。下面我们为 CommentBox组件增加一组数据作为它的状态：
// tutorial12.js
var CommentBox = React.createClass({
getInitialState: function() {
return {data: []};
},
render: function() {
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList data={this.state.data} />
<CommentForm />
</div>
);
}
});
getInitialState()在组件生命周期中被执行并且建立组件初始状态。
更新状态
当组件一开始被创建时，我们想要从服务器端获取JSON，并且更新状态反映到最新的数据中。我们将使用jQuery来创造一个异步的请求给我们前面获取数据的服务器。数据已经在你的服务器上了（基于comments.json文件），所以一旦数据被取出，this.state.data将会变成这样：
[
{"id": "1", "author": "Pete Hunt", "text": "This is one comment"},
{"id": "2", "author": "Jordan Walke", "text": "This is *another* comment"}
]
// tutorial13.js
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调用的方法。动态更新的关键是调用this.setState()。我们用来自服务器的评论组替代旧的评论组，并且UI可以自动更新。 由于这个反应特性，添加实时更新只需要有也很小的改变。我们在这里使用的是简单的轮询，但是你可以使用WebSocket或者其他技术。
// tutorial14.js
var CommentBox = React.createClass({
loadCommentsFromServer: 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)
});
},
getInitialState: function() {
return {data: []};
},
componentDidMount: function() {
this.loadCommentsFromServer();
setInterval(this.loadCommentsFromServer, this.props.pollInterval);
},
render: function() {
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList data={this.state.data} />
<CommentForm />
</div>
);
}
});
ReactDOM.render(
<CommentBox url="/api/comments" pollInterval={2000} />,
document.getElementById('content')
);
这里我们做的是将AJAX调用移到一个单独的方法中，并且在组件第一次被加载时以及之后每隔两秒时被调用。区运行你的浏览器并且修改 comments.json文件 (在你服务端的同一个目录下)，两秒钟后你就可以看到变化!
增加新评论
现在我们建立表单。我们的 CommentForm 组件应该获取用户的姓名和评论文本，并且发送一个请求给服务端将评论保存下来。
// tutorial15.js
var CommentForm = React.createClass({
render: function() {
return (
<form className="commentForm">
<input type="text" placeholder="Your name" />
<input type="text" placeholder="Say something..." />
<input type="submit" value="Post" />
</form>
);
}
});
控制组件
传统的DOM，input元素是由浏览器管理其状态（它渲染的值）。结果DOM的状态和组件的状态不同。视图状态与组件状态不同，这不是理想的。在React中，组件状态和视图状态始终一样，不仅限于初始化时相同。
因此我们使用this.state来保存用户的输入。我们定义初始状态state，并赋予两个属性作者名author和评论文本text并置空。在我们的<input>元素中，我们使用value属性并反映组件的状态 state，另外附上onChange事件。 这些 含有待赋值的<input>元素叫做控制组件。更多关于控制组件的内容可以参考表单。
// tutorial16.js
var CommentForm = React.createClass({
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>
);
}
});
事件
React为组件附上事件并用骆驼拼写法命名。我们为两个<input>元素附上 onChange 事件。现在作为用户在<input>区域输入文本，被附上的 onChange被激活，组件状态被改变。随后，<input>元素渲染的值将会被刷新，当前组件状态state也随之改变。
提交表单
下面我们让表单交互化。当用户提交表单，我们应该清空表单，并向服务端发送请求，刷新评论列表。首先我们要坚监听表单提交事件并清空它。
// tutorial17.js
var CommentForm = React.createClass({
getInitialState: function() {
return {author: '', text: ''};
},
handleAuthorChange: function(e) {
this.setState({author: e.target.value});
},
handleTextChange: function(e) {
this.setState({text: e.target.value});
},
handleSubmit: function(e) {
e.preventDefault();
var author = this.state.author.trim();
var text = this.state.text.trim();
if (!text || !author) {
return;
}
// TODO: send request to the server
this.setState({author: '', text: ''});
},
render: function() {
return (
<form className="commentForm" onSubmit={this.handleSubmit}>
<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>
);
}
});
我们为表单附上onSubmit句柄，这样表单被有效填写并提交后表单区域会立即清空。
调用 preventDefault() 来避免浏览器默认提交表单的动作。
作为属性回调
当一个用户提交一个评论，我们需要刷新列表把这个新评论放进来。在 CommentBox中完成这个逻辑非常合理，因为CommentBox拥有评论列表的状态。
我们需要从子组件中将数据传给父组件。我们在父组件 render方法中传一个回调函数 (handleCommentSubmit)给子组件，将它绑定到子组件的onCommentSubmit事件。一旦事件被激活，回调就被唤醒：
// tutorial18.js
var CommentBox = React.createClass({
loadCommentsFromServer: 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)
});
},
handleCommentSubmit: function(comment) {
// TODO: submit to the server and refresh the list
},
getInitialState: function() {
return {data: []};
},
componentDidMount: function() {
this.loadCommentsFromServer();
setInterval(this.loadCommentsFromServer, this.props.pollInterval);
},
render: function() {
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList data={this.state.data} />
<CommentForm onCommentSubmit={this.handleCommentSubmit} />
</div>
);
}
});
既然 CommentBox 已经让 CommentForm通过onCommentSubmit属性获得回调，当用户提交表单时CommentForm可以调用回调：
// tutorial19.js
var CommentForm = React.createClass({
getInitialState: function() {
return {author: '', text: ''};
},
handleAuthorChange: function(e) {
this.setState({author: e.target.value});
},
handleTextChange: function(e) {
this.setState({text: e.target.value});
},
handleSubmit: function(e) {
e.preventDefault();
var author = this.state.author.trim();
var text = this.state.text.trim();
if (!text || !author) {
return;
}
this.props.onCommentSubmit({author: author, text: text});
this.setState({author: '', text: ''});
},
render: function() {
return (
<form className="commentForm" onSubmit={this.handleSubmit}>
<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>
);
}
});
现在回调已经在了，我们要去做的就是提交给服务端并刷新列表：
// tutorial20.js
var CommentBox = React.createClass({
loadCommentsFromServer: 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)
});
},
handleCommentSubmit: function(comment) {
$.ajax({
url: this.props.url,
dataType: 'json',
type: 'POST',
data: comment,
success: function(data) {
this.setState({data: data});
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
getInitialState: function() {
return {data: []};
},
componentDidMount: function() {
this.loadCommentsFromServer();
setInterval(this.loadCommentsFromServer, this.props.pollInterval);
},
render: function() {
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList data={this.state.data} />
<CommentForm onCommentSubmit={this.handleCommentSubmit} />
</div>
);
}
});
优化: 优化的刷新策略
我们的应用现在已经具备了各功能了，但是在提交的评论出现在列表上之前还需要等待相应，这感觉上有点慢。我们可以直接将评论添加到列表中来使应用更快。
// tutorial21.js
var CommentBox = React.createClass({
loadCommentsFromServer: 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)
});
},
handleCommentSubmit: function(comment) {
var comments = this.state.data;
// Optimistically set an id on the new comment. It will be replaced by an
// id generated by the server. In a production application you would likely
// not use Date.now() for this and would have a more robust system in place.
comment.id = Date.now();
var newComments = comments.concat([comment]);
this.setState({data: newComments});
$.ajax({
url: this.props.url,
dataType: 'json',
type: 'POST',
data: comment,
success: function(data) {
this.setState({data: data});
}.bind(this),
error: function(xhr, status, err) {
this.setState({data: comments});
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
getInitialState: function() {
return {data: []};
},
componentDidMount: function() {
this.loadCommentsFromServer();
setInterval(this.loadCommentsFromServer, this.props.pollInterval);
},
render: function() {
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList data={this.state.data} />
<CommentForm onCommentSubmit={this.handleCommentSubmit} />
</div>
);
}
});
恭喜!
你刚刚通过这样简单的几步完成了一个评论框。更多内容见为什么使用React，更加深入可参考API reference。好运！
原创文章，转载请注明： 转载自并发编程网 – ifeve.com本文链接地址: 《React官方文档》之教程Tutorial
Loading...
暂无评论