标签：tor app 改变 als super hand install ons local
下面内容代码使用ES6语法
一、组件的操作事件：
1、先要在组件类定义内定义操作事件的方法，如同event handler。若我需要监听在组件内的Button的点击事件onClick，首先定义监听方法，代码如下：
handleClick() { //TODO }
2、在contructor 函数，bind(this)。
constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); }
3、在render方法内，显式绑定事件
render() { return <div> <button onClick={this.handleClick}>click</button> </div>; }
经过以上操作即会触发监听事件方法
二、组件状态state
组件，我理解其实就是wpf的控件，那么state就是wpf中的依赖属性了，其功能如依赖属性其中的功能很类似，state的改变会改变组件的UI变化或者进行一些逻辑操作。
1、设置初始状态，即在contructor函数上设置组件初始state,
constructor(props) { super(props); this.state = { liked: false, opacity: 1 }; }
2、在事件中可以利用setState()设置新的状态，如在handleclick事件改变state，如下：
handleClick() { this.setState({ liked: !this.state.liked }); }
state改变后促使组件重新执行render()，进而改变了UI。
三、路由
reactjs可以使用单页面搭建整个网站或者APP，那么路由机制就十分需要，方便我们来实际一个页面来构建多个页面和页面的架构。React-Router是一个十分实用的官方插件，提供进行导航等操作。
1、安装插件
npm install -S react-router
2、使用
使用react-router 就像使用一般的插件，如下：
import React from ‘react‘; import { render } from ‘react-dom‘; import { Router, Route,IndexRoute, Link, browserHistory, hashHistory } from ‘react-router‘; import App from ‘./compoments/App‘; import ABout from ‘./compoments/ABout‘; import Home from ‘./compoments/Home‘; render((<Router history={browserHistory}> <Route path="/" component={App} > <IndexRoute component={Home}/> <Route path="/home" component={Home} /> <Route path="/about" component={ABout} /> </Route> </Router>), document.getElementById("container"));
其中App,Home,About 都是其他文件定义的组件。
Router的history属性设置是设置Router将使用哪种URL，例如使用hashHistory，路由的切换由URL的hash变化决定，即URL的#部分发生变化，即上面访问about页面，URL路径将是localhost:8080/#/about;例如使用browserHistory,将会调用浏览器的URL，即访问about页面，URL路径将是localhost:8080/about。
更多Router参数设置可以去官网查看。
标签：tor app 改变 als super hand install ons local
原文地址：http://www.cnblogs.com/NEIL-X/p/5988087.html
