React入门

内容简介：React入门

React毫无疑问是2015年最为火热的前端框架。

React 是一个 Facebook用来创建用户界面的 JavaScript 库，React的目标就是 构建随着时间数据不断变化的大规模应用程序 。

我们在接下来的一系列文章来介绍React的相关知识。本章我们主要介绍React入门知识。

1. 开发环境

首先我们需要配置让sublime支持react语法，教程可见 这里 。

项目里面我们采用webpack解析React语法，因为开发React通常采用的JSX语法并不能直接被浏览器解析，我们需要在开发环境定义一套webpack loader来解析React，babel可以很好地实现这个需求，我们只需要在webpack.config.js定义如下loader:

{
    test: /\.jsx?$/, 
    exclude: /node_modules/,  
    loader: 'babel',
    query: { presets: ['react', 'es2015']} 
}

这样我们就可以愉快地编写React而不用担心浏览器不认识JSX了。

2. 常用API

1).React.createClass Function

React.createClass可以创建一个React组件类，结合React的虚拟DOM机制，我们就可以像搭积木一样组装好各个类，按需定制，这样在一些大型项目里面降低代码的耦合性，提高应用可扩展性。

通常createClass可以像这样定义：

var Hello = React.createClass({ 
    render: function(){
        return ( 
            <h1>Welcome to VocabGiant</h1>;
        );
    }
});

JSX的灵活之处还在于我们可以这样改造：

var Hello = React.createClass({ 
    render: function(){
        var welcome = <h1>Welcome to VocabGiant</h1>;
        return ( 
            welcome
        );
    }
});

我们也可以创建一个稍微实际点的demo：

var ListItem = React.createClass({
  render : function(){
    return (<li>{this.props.list}</li>)
  }
});


var List = React.createClass({
  render : function(){
    var listItems = [1,2,3].map(function(item){
      return <ListItemlist={item}/>;
    })

    return (
      <div>
        <ul>
          {listItems}
        </ul>
      </div>
    )
  }
});


React.render(<List/>,document.body);

这个跟上例区别在于同时涉及到父组件和子组件之间的通信，这里父组件通过 props (这里是list)将数据传递给子组件,子组件通过this.props.list获取传递的参数。最好再通过render将数据渲染出来。

2).props和state

props和state都可以用于组件间的通信和数据传输，他们的不同点在于props是单向传输并且不可变(immutable)的，一旦定义好了以后就不再变化，而state是可以从父组件从上往下传递，也可以由子组件从下往上传递，期间state可以在任意时刻改变。

上面的例子已经演示过了props的应用，下面我们通过实现一个简单的搜索筛选来演示state的应用。

首先我们定义一个List组件：

var ListItem = React.createClass({
  //term为提供的所有list数组集合
  render: function(){
    return (
      <li>
      {this.props.term}
      </li>
    );
  }
});

var ListItems = React.createClass({
  render: function(){
    //创建空数组保存筛选出来的字段
    var items = [];
    //父组件通过state更新filterTerm后再通过props传递给子组件
    var filterTerm = this.props.filterTerm;
    
    //遍历list数组，如果找到匹配字符就将新的iterm推送到之前创建的数组里
    this.props.terms.forEach(function(term){
      if (term.indexOf(filterTerm) != -1) {
        items.push(<ListItemkey={term}term={term}/>);
      }
    })

    return (
      <div>
        <ul>{items}</ul>
      </div>
    )
  }
});

这样我们就创建好了一个List的组件，接下来我们再来实现搜索框组件。

搜索框用于和用户进行交互，首先需要从上层组件获取数据，同时要将用户输入的数据与父组件进行通信。

var SearchBox = React.createClass({
  handleChange: function(){
    this.props.onUserInput(
      //这里refs会找到dom元素
      this.refs.filterTerms.value
    )
  },
//父组件通过fiilterTerm属性将上层数据交给searchBox组件,
//searchBox组件通过handleChange属性定义的方法将当前数据传回给父组件。
  render: function(){
    return (
      <formaction="">
            <inputtype="text"id="filter"ref="filterTerms"placeholder="Find term"onChange={this.handleChange}value={this.props.filterTerm}/>
        </form>
    )
  }
});

最后我们将当前两个组件组合一起：

var Home = React.createClass({
  getInitialState: function(){
    return {
      filterTerm: ""
    };
  },
  handleUserInput: function(filterTerm){
    this.setState({
      filterTerm: filterTerm
    })
  },

  render: function(){
    return (
      <div> 
          <SearchBox filterTerm={this.state.filterTerm} onUserInput={this.handleUserInput} /> 
          <ListItems
              filterTerm={this.state.filterTerm}
              terms={this.props.terms} />
        </div>
    )
  }
});

var terms = ['mare', 'sole', 'sabbia', 'acqua', 'spiaggia'];
React.render(<Home terms = {terms} />, document.body);

就这样，我们就创建好了一个完整的react组件。打开浏览器来体验一下，非常棒，不是么?

3).React状态生命周期

当我们需要开发一个实际项目时，通常我们需要异步获取线上数据，这个时候就不能像之前一样在本地指定静态数据了。这个时候就需要涉及到React状态生命周期。

var ListItem = React.createClass({
  render: function(){
    return (
      <li>{this.props.item.origin}</li>
    );
  }
});


var ListItems = React.createClass({
  render: function(){
    var listItems = this.props.items.map(function(item){
      return <ListItem item={item} key={item.origin} />;
    });

    return (<ul>
     {listItems}
      </ul>);
  }
});


var Home = React.createClass({
  getInitialState: function(){
    return {
      vocabulary: [],
    };
  },
  //这里实现异步请求
  componentDidMount: function(){
    $.get(this.props.url, function(result){
      var words = result.words;
      //需要确认当前组件已经被渲染到dom里了
      if (this.isMounted()) {
        this.setState({
          vocabulary: words
        });
      }
    }.bind(this));
  },

  render: function(){
    return (
      <div> 
    <ListItems items={this.state.vocabulary} /> </div>
    )
  }
});

//这时候我们只需要挂载url即可
ReactDOM.render(<Home url="/getVocabulary" />, document.body);

总结

目前我们已经完成了对react开发环境的构建、常见组件的渲染，父/子组件间通过props和state进行通信，并引入React状态生命周期来请求真实数据。

以上所述就是小编给大家介绍的《React入门》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！

查看所有标签

猜你喜欢:

• TiDB入门（四）：从入门到“跑路”
• MyBatis从入门到精通(一)：MyBatis入门
• MyBatis从入门到精通(一)：MyBatis入门
• Docker入门（一）用hello world入门docker
• 赵童鞋带你入门PHP（六） ThinkPHP框架入门
• 初学者入门 Golang 的学习型项目，go入门项目

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。