发帖  主题  评论  推荐  标签 用户 查搜   用户 密码 自动 注册  
 
面向对象 设计模式 领域驱动设计 企业架构 框架 开发教程 微服务 CQRS 扩展性 并发编程 事件溯源 分布式 SOA

React.JS基础教程

  React( ReactJS或React.js) 是一个由Facebook和Instagram在2013年推出用于开发用户界面的开源javascript库包,可以看成是MVC模式中的View视图模式。

  React主要目标是瞄准大型应用中界面经常跟随数据变化的场景,React是由Jordan Walke创建,他是一个Facebook的软件工程师,曾经从事基于PHP组件系统XHP开发,React也受到到函数编程思想的影响。

  React主要得益于virtual-DOM虚拟DOM的思想,虚拟DOM能够在DOM改变时,分辨出新旧版本DOM的不同,只将DOM中改变的部分进行渲染,这是一种非常有效率的浏览器DOM更新方式。

React的工作原理如下:

ractjs

当服务器端将AJAX的响应结果送回客户端浏览器时,会通过React的setState()方法改变浏览器中视图数据,而一个事件循环会监测到状态的改变,触发视图的重新渲染,包括DOM组件树中的更新,由于DOM更新非常耗费性能,引入虚拟DOM则达到最小化的更新量。

下载

  在Facebook的http://facebook.github.io/react/下载React.js

 

页面设置

  使用React.js之前,我们要在页面中加载react.js 和JSXTransformer.js, 然后就可以使用javascript编写你的组件了,javascript的type设置为text/jsx:

<!DOCTYPE html>
<html>
<head>
  <script src="build/react.js"></script>
  <script src="build/JSXTransformer.js"></script>
</head>
<body>
  <div id="mount-point"></div>
  <script type="text/jsx">
    // React代码写在这里
  </script>
</body>
</html>

在React中, 组件是绑定安装到每一个元素的, 这样这里我们使用div mount-point作为父容器。

 

基础概念

React的基本构建块称为组件,如下:

<script type="text/jsx">
  /** @jsx React.DOM */
  React.render(
    <h1>Hello, world!</h1>,
    document.getElementById('myDiv')
  );
</script>

这段代码你会发现很奇怪, Javascript/HTML混合写在一起,这其实是JSX, 它是一个Javascript XML 语法转换. 这能让你在Javascript中编写类似HTML之类标签,严格来说是基于对象的XML语法,

上面这段语法等同于下没有JSX的代码:

/** @jsx React.DOM */
React.render(
  React.DOM.h1(null, 'Hello, world!'),
  document.getElementById('myDiv')
);

这里的React.DOM.h1,最后一个是html的h1语法,类似语法有很多,React.DOM.*支持的属性更多见这里。而如果使用JSX,这里是JSX更详细的描述。

 

组件

前面当我们使用render方法,第一个参数是我们需要渲染的组件,第二个是它应该安装对应的DOM节点,我们能使用createClass方法来创建定制的组件类:

var MyComponent = React.createClass({
  render: function(){
    return (
      <h1>Hello, world!</h1>
    );
  }
})

上述代码创建好一个类以后,我们就可以render渲染它到我们的文档:

React.render(
  <MyComponent/>,
  document.getElementById('myDiv')
);

 

属性

当我们使用我们定义的组件时,我们能增加属性也称为props. 这些属性能在通过this.props在render方法中使用,这样就能渲染输出动态数据:

var MyComponent = React.createClass({
  render: function(){
    return (
      <h1>Hello, {this.props.name}!</h1>
    );
  }
});

React.render(<MyComponent name="Handsome" />,document.getElementById('myDiv'));

上面就是将MyComponent的属性name的值Handsome动态输出为:<h1>Hello, Handsome!</h1>

React组件需要实现render()方法,这会获得输入数据然后返回需要显示。

下面再看看一个简单的Hello案例。:

var Hello = React.createClass({
  render: function () {
    return <div>Hello {this.props.name}</div>;
  }
});      
React.render(<Hello name="World" />, document.body); 

该代码中类似XML的语法也就是JSX,下面是没有JSX的React组件实现:

var Hello = React.createClass({displayName: "Hello",
  render: function() {
    return React.createElement("div", null, "Hello ", this.props.name);
  }
});
React.render(React.createElement(Hello, {name: "World"}), mountNode); 

React组件除了render以外,还有更多方法:见下面组件规格说明。

render

render()函数应该是纯粹的函数,也就是说不能改变组件的状态,一般是检查this.props 和 this.state 并返回单个的子元素。

getInitialState

在组件安装前调用一次,这个返回值将用于初始化this.state的值

getDefaultProps

当类被创建时调用一次并被缓存,其得到值将在this.props中设置

propTypes

这个propTypes 对象允许你校验将传送给你组件的props值

mixins

这个mixins数组将允许你使用mixins在多个组件之间分享行为

statics

这个静态对象允许你定义一个在组件类中可被调用的静态方法

displayName

displayName字符串用于调试信息. JSX会自动设置这个值。


生命周期

render仅仅是在创建一个组件才需要的方法,有好几个生命周期方法能帮助我们做到更多功能,下表总结了这些方法激活条件。

componentWillMount

在服务器端和客户端调用一次, 是在初始渲染发生时立即触发调用。

componentDidMount

在初始渲染发生后立即在客户端调用。

componentWillReceiveProps

当一个组件接受到新的prop属性值. 这里使用setState()

shouldComponentUpdate

当新的属性值props或状态接受到时,在渲染之前被调用,如果返回false会忽视render() 。

componentWillUpdate

当新的属性值props或状态接受到时,在渲染之前立即被调用,这里不能使用setState()。

componentDidUpdate

在组件的更新被flush到DOM以后立即被调用,这里是用于操作DOM。

componentWillUnmount

当一个组件从DOM中卸装之前,立即被调用。

 

状态和属性

每个组件都有一个状态对象和属性props对象,状态是通过setState方法来设置的,调用setState 会触发UI更新,如果希望在任何互动发生之前设置一个初始化状态,我们使用thegetInitialState方法,见如下:

var MyComponent = React.createClass({
  getInitialState: function(){
    return {
      count: 5
    }
  },
  render: function(){
    return (
      <h1>{this.state.count}</h1>
    )
  }
});

除了设置初始状态以外还有更多方法:

setState

使用当前状态和nextState合并merge

replaceState

类似setState(), 但是会删除任何不在nextState中存在的状态key.

forceUpdate

调用组件的render(),忽视shouldComponentUpdate()

 React.findDOMNode (0.13+)

返回对应的原生浏览器DOM元素。

isMounted

如果组件已经被渲染到DOM中,isMounted()返回真

setProps

为了改变属性或触发重新渲染。

replaceProps

类似 setProps()但是会删除先前存在的props属性值,而不是合并两者。

再看下面使用上表的更多方法的复杂案例:

 

<VideoComponent fullscreen={true} />
// props
  this.props.fullscreen //=> true
// state
  this.setState({ user: 'hemanth' });
  this.replaceState({ ... });
  this.state.username //=> 'hemanth'
  render: function () {
    return <div className={this.props.fullscreen ? 'full' : ''}>
      Hello, {this.state.username}
    </div>;
} 

预先导入的状态和属性:

React.createClass({
  getInitialState: function () {
    return { comments: [] };
  },
  getDefaultProps: function () {
    return { name: "Hello" };
  }
); 

 

事件

React也内建一个跨浏览器的事件系统,事件被作为组件的属性携带,能触发方法,让我们再看看计数这个案例:

/** @jsx React.DOM */

var Counter = React.createClass({
  incrementCount: function(){
    this.setState({
      count: this.state.count + 1
    });
  },
  getInitialState: function(){
    return {
      count: 0
    }
  },
  render: function(){
    return (
      <div class="my-component">
        <h1>Count: {this.state.count}</h1>
        <button type="button" onClick={this.incrementCount}>Increment</button>
      </div>
    );
  }
});

React.render(<Counter/>, document.getElementById('mount-point'));

 

单向数据流

在React中, 应用数据是通过状态和属性props对象实现单向流动, 相比Angular的双向流动,这意味着,在一个多组件层次中,一个普通父组件能管理状态并将其沿着父子链通过props传递

你的状态应该通过setState方法更新,以确保节目刷新,如果必要,结果值应该使用属性被下传到子组件,子组件通过this.props能访问到这个属性。

/** @jsx React.DOM */

var FilteredList = React.createClass({
  filterList: function(event){
    var updatedList = this.state.initialItems;
    updatedList = updatedList.filter(function(item){
    return item.toLowerCase().search(
      event.target.value.toLowerCase()) !== -1;
    });
    this.setState({items: updatedList});
  },
  getInitialState: function(){
    return {
      initialItems: [
        "Apples",
        "Broccoli",
        "Chicken",
        "Duck",
        "Eggs",
        "Fish",
        "Granola",
        "Hash Browns"
        ],
      items: []
    }
  },
  componentWillMount: function(){
    this.setState({items: this.state.initialItems})
  },
  render: function(){
    return (
      <div className="filter-list">
        <input type="text" placeholder="Search" onChange={this.filterList}/>
        <List items={this.state.items}/>
      </div>
    );
  }
});

var List = React.createClass({
  render: function(){
    return (
      <ul>
      {
        this.props.items.map(function(item) {
          return <li key={item}>{item}</li>
        })
      }
      </ul>
    ) 
  }
});

React.render(<FilteredList/>, document.getElementById('mount-point'));

 

AJAX请求

React 默认情况并不提供一个帮助方法管理AJAX请求,但是你能使用其他Javascript库包比如JQuery或Zepto进行必要的AJAX请求。下面是基于props.url进行AJAX请求,成功返回后设置数据状态:

componentDidMount: function() {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      cache: false,
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  } 

组件内的Style样式

在React并不是使用传统的内联CSS字符串指定Style样式,而是指定每个Style作为一个对象,其key是style名称的camelCased版本,其值是style的值字符串。

var divStyle = {
  color: 'white',
  backgroundImage: 'url(' + imgUrl + ')',
  WebkitTransition: 'all', // note the capital 'W' here
  msTransition: 'all' // 'ms' is the only lowercase vendor prefix
};
React.render(<div style={divStyle}>Hello World!</div>, mountNode); 

Style属性中如果有数字,将会自动加上"px",比如“width: 10”读成“width: 10px”,这里列出不会获得自动PX后最的属性列表:

  • boxFlex

  • boxFlexGroup

  • columnCount

  • fillOpacity

  • flex

  • flexGrow

  • flexPositive

  • flexShrink

  • flexNegative

  • fontWeight

  • lineClamp

  • lineHeight

  • opacity

  • order

  • orphans

  • strokeOpacity

  • widows

  • zIndex

  • zoom

 

如何访问DOM?

下面是根据引用访问DOM节点:

<input ref="firstName">
this.refs.firstName
React.findDOMNode(this.refs.firstName).focus()
React.findDOMNode(this.refs.firstName).value
DOM Events: Helps to handle DOM events.
<input type="text" value={this.state.value} onChange={this.handleChange} />
handleChange: function(event) {
  this.setState({ value: event.target.value });
} 

使用Mixin进行两边数据绑定的方式:

Email: <input type="text" valueLink={this.linkState('email')} />
React.createClass({
  mixins: [React.addons.LinkedStateMixin]
});
this.state.email 

 

校验属性

Primitive types初始类型: .string, .number, .func, and .bool.

React 元素: .element, .node.

Enumerables: .oneOf, .oneOfType.

数组Arrays和对象objects: array[Of], .object[Of], .instanceOf, .shape.

使用方法:

React.createClass({
  propTypes: {email: React.PropTypes.string, firstName: React.PropTypes.string, age:  React.PropTypes.number, gender: React.PropTypes.oneOf(['M','F','NA']) 
    node: React.PropTypes.node, cb: React.PropTypes.func.isRequired,
  }
}); 

创建你自己的Mixin:

var TimeOutMixin = {
  componentWillMount: function() { .. }
}
var TickTock = React.createClass({
  mixins: [TimeOutMixin]
} 

 

下面是在Javascript 6中React用法(React on ES2015/ES6):

Classes

class Animal extends React.Component {
  render() {
      return <img alt={this.props.name} src={this.props.src} />;
  }
} 

属性初始化:

var Video = React.createClass({
  getDefaultProps: function() {
                   return {
                       autoPlay: false,
                       maxLoops: 10,
                       };
  },
  getInitialState: function() {
                       return {
                       loopsRemaining: this.props.maxLoops,
                       };
  },
  propTypes: {
                       autoPlay: React.PropTypes.bool.isRequired,
                       maxLoops: React.PropTypes.number.isRequired,
                       posterFrameSrc: React.PropTypes.string.isRequired,
                       videoSrc: React.PropTypes.string.isRequired,
  },
}); 

箭头函数:

class PostInfo extends React.Component {
  handleOptionsButtonClick = (e) => {
                       this.setState({showOptionsModal: true});
  }
} 

使用模板字符串的动态属性名:

class Form extends React.Component {
  onChange(inputName, e) {
                       this.setState({
                       [`${inputName}Value`]: e.target.value,
                       });
  }
} 

Destructuring & spread attribute

class AutoloadingPostsGrid extends React.Component {
  render() {
              var {
                       className,
                       ...others,  // all properties of this.props except for className
               } = this.props;
               return <PostsGrid {...others} />
  }
} 

CoffeeScript and React [React v0.13.0+]

div = React.createFactory 'div'
class Counter extends React.Component
  @propTypes = initialCount: React.PropTypes.number
  @defaultProps = initialCount: 0
  constructor: (props) ->
                       super props
                       @state = count: props.initialCount
  tick: =>
                       @setState count: @state.count + 1
  render: ->
                       div onClick: @tick,
                       'Clicks: '
                       @state.count 


现在我们已经学习了一些React基本概念,可以花更多时间了解 React API 以及有关JSX.

为什么我再也不使用MVC框架了?

前端Flux架构简介

什么是Redux?

Reactive响应式编程

更多React.JS介绍

React In-depth

 

解道移动版 | 关注解道 | 联系解道 | 关于解道 | 广告联系 | 网站地图 | 设为首页

沪ICP证12033263 如有意见请与我们联系 Powered by JdonFramework
返回顶部