现在我们可以在HelloWorld的基础上开始练习官网首页上的几个例子。
A Stateful Component
一个可以处理State（状态）的组件：
在App.js组件中通过<Timer>标签引入到App组件的显示布局中。
最终效果如下：
在这个小练中，我们学到：props和state，当通过setState()函数重新设置state的值时，rander()方法会被调用重新绘制组件的界面。
还有一些window的内置函数setInterval：
Window.prototype.setInterval = function(code,delay) {};
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
JavaScript中的class
ES6提供了更接近传统语言的写法，引入了Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。基本上，ES6的class可以看作只是一个语法糖，它的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。
JavaScript语言的传统方法是通过构造函数，定义并生成新对象。
问题
用懂了静态语言，在看上面的代码时有一点感到奇怪的地方，Timer.js的“this.tick()”调用，我们看到tick的代码：
tick() {
this.setState((prevState) => ({
secondsElapsed: prevState.secondsElapsed +1
}));
}
tick()方法并没有传参数，prevState是形参，那么它的值是怎么来的？
请看setState的说明：https://facebook.github.io/react/docs/react-component.html#setstate
setState(nextState, callback)
setState也接授一个这种签名的函数：“function(state, props) => newState” 做为它的参数，正是我们上面这个例子所使用的，只是没有使用props。
this.setState((prevState, props) => {
return {myInteger: prevState.myInteger + props.step};
});
An Application
使用props和state创建一个Todo应用。在Hello-world项目的src下添加TodoApp.js文件。
代码如下：
import React from 'react';
class TodoApp extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.state = {items: [], text: ''};
}
render() {
return (
<div>
<h3>TODO</h3>
<TodoList items={this.state.items} />
<form onSubmit={this.handleSubmit}>
<input onChange={this.handleChange} value={this.state.text}/>
<button>{'Add #' + (this.state.items.length + 1)}</button>
</form>
</div>
);
}
handleChange(e) {
this.setState({text: e.target.value});
}
handleSubmit(e) {
e.preventDefault();
var newItem = {
text: this.state.text,
id: Date.now()
};
this.setState((prevState) => ({
items: prevState.items.concat(newItem),
text: ''
}));
}
}
class TodoList extends React.Component {
render() {
return (
<ul>
{this.props.items.map(item => (
<li key={item.id}>{item.text}</li>
))}
</ul>
);
}
}
export default TodoApp;
然后修改index.js，把引用的组件换成TodoApp，这里界面上就只需要TodoApp中的render()内容。
最终效果如下：
这一节有几个新的东西：
-
this.handleChange = this.handleChange.bind(this);
要理解清楚JavaScript中bind和this的意思。这里是使用bind函数，把期望的this值传递给handleChange()函数。 -
JavaScript中数组的map和concat方法。
concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。 -
preventDefault：取消事件的默认动作。该方法将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）。例如，如果type属性是"submit"，通过调用该方法，可以阻止提交表单。
-
箭头函数和this：箭头函数没有它自己的this值，箭头函数内的this值继承自外围作用域。在箭头函数出现之前，每个新定义的函数都有其自己的this值（例如，构造函数的this指向了一个新的对象；严格模式下的函数的this值为 undefined；如果函数是作为对象的方法被调用的，则其this指向了那个调用它的对象），在面向对象风格的编程中，这被证明是非常恼人的事情。
A Component Using External Plugins
如何在React的组件中使用外部的插件，这个例子要使用Markdown的一个插件来把输入的文字转换成Markdown格式。
先在Hello-world的项目上安装Markdwon需要用到的插件：
npm install remarkable --save
然后在src下新建一个MarkdownEditor.js组件：
代码如下：
import React from 'react';
import Remarkable from 'remarkable';
class MarkdownEditor extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.state = {value: 'Type some *markdown* here!'};
}
handleChange() {
this.setState({value: this.refs.textarea.value});
}
getRawMarkup() {
var md = new Remarkable();
return {
__html: md.render(this.state.value)
};
}
render() {
return (
<div className="MarkdownEditor">
<h3>Input</h3>
<textarea onChange={this.handleChange}
ref="textarea"
defaultValue={this.state.value}/>
<h3>Output</h3>
<div
className="content"
dangerouslySetInnerHTML={this.getRawMarkup()}
/>
</div>
);
}
}
export default MarkdownEditor;
暂时忽略render()方法中用到css样式，如div className的属性，不要影响我们学习的主要目标。
之后同样把�index.js中显示的组件替换成MarkdownEditor。最终效果如下：
网友评论