React 快速入门学习

@whizbz11 2016-09-25 12:54:03发表于 iuap-design/blog

编写第一个组件

React是由Facebook和Instagram团队共同维护, 专注于“前端UI渲染“的JavaScript库。它的角色类似我们平常提到的MVC开发模式中的”V”,这些得益于React所提出的虚拟DOM概念。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>First Component</title>
    <script src="../javascripts/react-0.11.1.js"></script>
    <script src="../javascripts/JSXTransformer-0.11.1.js"></script>
</head>
<body>
<script type="text/jsx">
    /*** @jsx React.DOM */
    var APP = React.createClass({
        render:function(){
            return (
                <h1>Hello React</h1>
            )
        }
    });

    React.renderComponent(<APP />, document.body)
</script>
</body>
</html>

除去其他我们常见的HTML标签,这里第一个需要注意的是 <script type="text/jsx"></script>, 这段代码的目的在于配合/*** @jsx React.DOM */告诉JSXTransformer去将标签里的内容按照JSX 的语法来进行解析。

然后我们使用React的createClass方法创建一个组件。这里我们只需定义最基本的render方法。

Render渲染方法

在使用React.createClass()创建任意组件时,我们都需要给它定义render函数。

/*** @jsx React.DOM */
  var APP = React.createClass({
      render:function(){
          return (
              <h1>Hello React</h1>
              <Widget />
          )
      }
  });

render方法在被调用时首先会检查所在实例化对象下面定义的this.props和this.state属性,然后将其数据添加到对应的DOM中去。 函数内部的返回值可以包含其他的原生DOM对象,例如

, 也可以是React.DOM.div对象,另外还有一些其他的自定义组件。

在使用render方法时,尽量确保只返回一个节点(节点内可包含任意数目子节点)。而且大多数情况下使用()括号将返回结果包住。

Properties简介

在使用React.createClass()创建任意组件时,我们可以通过getDefaultProps方法给他定义一些属性。

/*** @jsx React.DOM */
var APP = React.createClass({
    getDefaultProps:function(){
        return {
            txt:'this is a prop'
        }
    },
    render:function(){
        return (
            <div>
              <h1>Hello React</h1>
              <p>{this.props.cat}</p>
              <p>{this.props.txt}</p>
            </div>
        )
    }
});

React.renderComponent(<APP cat={5} />, document.body)

从上面的例子中可以看出,当我们需要在render方法使用某些数据时,可以在getDefaultProps() 函数中定义这个属性,然后通过{this.props.txt}来进行获取。

另外一种就是继承父级元素定义的属性。例如这里的cat={5},写法和在普通html标签上添加属性类似。

state基础

props属性和state属性的共同点就是都可以作为属性传入组件。不同的是props一般用于静态数据,定义之后数据一般不会再发生改变。 而state属性则相反。

两者的使用方法也很类似。我们通过使用getInitialState方法定义组件的初始state属性。

/*** @jsx React.DOM */
var APP = React.createClass({
    getInitialState: function() {
        return {
            txt: 'this is some text from initial state'
        }
    },
    render: function(){
        return (
            <div>
              <h1>Hello React</h1>
              <p>{this.state.txt}</p>
            </div>
        )
    }
});

React.renderComponent(<APP />, document.body)

在组件完成加载之后,我们可以通过setState方法来改变我们设置的属性的值。

首先在render函数中加入一个input元素,用于触发onChange事件,然后调用setState方法。

/*** @jsx React.DOM */
var APP = React.createClass({
    getInitialState: function() {
        return {
            txt: 'this is some text from initial state'
        }
    },
    updateTxt: function(e) {
        this.setState({txt: e.target.value})
    },
    render: function(){
        return (
            <div>
              <input type="text" onChange={this.updateTxt} />
              <p>{this.state.txt}</p>
            </div>
        )
    }
});

运行以上代码后,当我们在文本框中输入任意文本后,就会触发绑定的onChange事件,之后调用我们定义好的updateTxt方法,从而最终通过setState方法来更新state的数据。