React教程:完成首页的几个实例

现在我们可以在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()内容。

最终效果如下:

这一节有几个新的东西:

  1. this.handleChange = this.handleChange.bind(this);
    要理解清楚JavaScript中bind和this的意思。这里是使用bind函数,把期望的this值传递给handleChange()函数。

  2. JavaScript中数组的map和concat方法。
    concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。

  3. preventDefault:取消事件的默认动作。该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作)。例如,如果type属性是"submit",通过调用该方法,可以阻止提交表单。

  4. 箭头函数和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。最终效果如下:

推荐阅读更多精彩内容