吊炸天的react入门教学

最新推荐文章于 2024-09-13 15:06:03 发布

Jouryjc

最新推荐文章于 2024-09-13 15:06:03 发布

阅读量1.1k

点赞数 3

分类专栏： JavaScript 前端管理工具文章标签：前端架构 react JavaScript

JavaScript 同时被 2 个专栏收录

42 篇文章 0 订阅

订阅专栏

前端管理工具

3 篇文章 0 订阅

订阅专栏

所有的组件都是有生命周期的，这无疑为我们开发提供了很大的便利。比如刚才例子中的getInitialState，只会在控件装载(mount)后，调用一次。当然还有其它的生命周期函数：
componentWillMount在组件即将装载前调用，可以把Ajax放这。
componentDidMount在组件已经被渲染出了DOM后调用，这时，我们可以借助this.getDOMNode取到跟节点，做一些后续工作。
componentWillUnmount组件被移除时，相关资源的清理工作，就得在这里(如移除EventHandler，若EventHandler操作了不存在的组件，error自然就被抛出)。

Component Methods

通过getDefaultProps，我们可以为properties提供默认值，即当properties没有通过attributes传入，这些默认值会派上用场。

var Widget = React.createClass({
  getDefaultProps: function(){ return{ number: 10 }; }, render: function(){ return( <div> <h1>{this.props.number}</h1> </div>); } }); React.render(<Widget/>, document.body);

React并不提倡提供过多的模版功能，它提倡的是回归原始，比如：当我们需要用到repeater。我们可以这样：

var Widget = React.createClass({
  render: function(){ var data =[1,2,3,4]; //请假设这是有用数据 var content = data.map(function(item){ return (<h2>{item}</h2>) }); return( <div> <h1>{content}</h1> </div>); } });

React

组件开发入门

Introduction

本文组成：

Ryan Clark文章Getting started with React的翻译。
博主的实践心得。

React由Facebook的程序员创建，是一个非常强大的javascript类库。
一个很大的卖点是virtual DOM机制，在DOM操作的性能上有较大的优势。
React社区常常介绍它为MVC架构中的“V”，虽说如此，如果将React与Flux(以后将会介绍)结合，我们就可以轻松实现M与V的同步。
在本文中，将会用到博主前两天介绍的webpack。以下是博文链接：
webpack 学习笔记 01 使用webpack的原因
 webpack 学习笔记 02 快速入门

Components

JSX

Using JSX

render扮演着"ViewModel"的角色，在我们返回HTML信息前，将Model注入View，并加入各类js逻辑。
现在，我们新建一个目录，建立以下文件

index.html
entry.js
webpack.config.js

借助npm与bower我们可以快速下载依赖项

npm init   
npm install babel-loader --save
bower install react   
bower init

以下是index.html的内容，借助webpack，我们可以不用再修改它，就完成本示例了。

<html>
    <head>
        <meta charset="utf-8"> <title>react demo</title> </head> <body> <script type="text/javascript" src="bundle.js" charset="utf-8"></script> </body> </html>

以下是webpack配置内容

module.exports = {
  entry: "./entry.js",
  output:{
    path: __dirname,
    filename: "bundle.js"
  },
  module: { loaders: [ { test: /\.js?$/, exclude: /(node_modules|bower_components)/, loader: 'babel' } ]} }

配置做好了，让我们开始第一个JSX。

var React = require("./bower_components/react/react.js");

var Widget = React.createClass({
  render:function(){ return( <div> <h1>React with webpack</h1> </div>); } }); React.render(<Widget />, document.body);

运行指令

webpack -w

可以看到如下结果：

Using variables for attributes

如前文所说，React组件里可以加入任意的js逻辑，我们可以把刚才的JSX改成这样：

var Widget = React.createClass({
  render:function(){
    var text = "React with webpack"; return( <div> <h1>{text}</h1> </div>); } });

Basics of a component

var Widget = React.createClass({
  render:function(){
    var text = ""; return( <div> <h1>{this.props.displayText}</h1> </div>); } }); React.render(<Widget displayText="React with webpack"/>, document.body);

State

var Widget = React.createClass({
  getInitialState: function(){
    return{
      number: 0
    };
  },
  increment: function(){
    this.setState({
      number: this.state.number + 1
    });
  },
  render: function(){
    return(
    <div> <h1>{this.state.number}</h1> <button onClick={this.increment}>Inc</button> </div>); } });

显示的数字将伴随按钮点击上升。

The component lifecycle

Component Methods

通过getDefaultProps，我们可以为properties提供默认值，即当properties没有通过attributes传入，这些默认值会派上用场。

var Widget = React.createClass({
  getDefaultProps: function(){
    return{ number: 10 }; }, render: function(){ return( <div> <h1>{this.props.number}</h1> </div>); } }); React.render(<Widget/>, document.body);

React并不提倡提供过多的模版功能，它提倡的是回归原始，比如：当我们需要用到repeater。我们可以这样：

var Widget = React.createClass({
  render: function(){
    var data =[1,2,3,4]; //请假设这是有用数据 var content = data.map(function(item){ return (<h2>{item}</h2>) }); return( <div> <h1>{content}</h1> </div>); } });