路由
使用react的路由就要引入react路由插件react-router.js
ReactRouter 保存一些与路由相关的方法以及属性
createFactory
实现路由分成四步：
- 第一步：在父组件中引入路由ReactRouter.RouteHandler
- 第二步：定义路由组件，用React.createFactory,返回值就是路由组件
- 第三步：定义路由规则，使用路由组件，两个属性，
一个是path表示路由规则
一个是handler表示渲染路径 - 第四步：启动路由
用ReactRouter.run方法，
第一个参数表示路由规则，
第二个参数是个回调函数，在回调函数中我们将组件渲染到页面中，回调函数有个参数，表示通过路由匹配到组件；
createFactory是创建组件实例的工厂方法；
var App = React.createClass({
//页面打开的时候显示其中一个子页面，通过消息传递来控制，
render:function(){
return (
<div>
{/*页面头部*/}
<Header/>
<ReactRouter.RouteHandler />
</div>
)
},
})
var Route =React.createFactory(ReactRouter.Route);
var DefaultRoute = React.createFactory(ReactRouter.DefaultRoute)
var routes = (
<Route path="/" handler={App}>
<Route path="/start" handler={StartMain}></Route>
<Route path="/css" handler={CssMain}></Route>
<Route path="/component" handler={ComponentMain}></Route>
<Route path="/js" handler={JsMain}></Route>
<Route path="/customization" handler={CustomizationMain}></Route>
<Route path="/customization" handler={CustomizationMain}></Route>
<DefaultRoute handler={DefaultMain}></DefaultRoute>
</Route>
)
ReactRouter.run(routes,function(Handler){
React.render(<Handler />,document.getElementById('app'))
})
news项目
npm install i -g fis3-parser-typescript
在es6中创建React组件要继承Compoonent类，第一步要将该类保存下来：
const { Component } = React;
这句话是将React中的Component属性作为变量保存下来
设置状态直接写在构造函数中
constructor (props) {
super(props);
this.state = {
section : 'list',
list: [],
detail:{},
comment:{
id:'',
list:[]
}
}
}
ajax和字符串拼接：
const Util = {
/* 发起异步请求的方法
* @url 表示请求的路径
* @callback 表示请求的回调函数
*/
ajax (url,callback){
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4) {
if(xhr.status == 200) {
let data = JSON.parse(xhr.responseText);
callback(data);
}else{
console.log('请求失败')
}
}
}
xhr.open('GET',url,true);
xhr.send(null);
},
objToQuery(obj){
let query = '';
for(let i in obj){
query += '&' + i + '=' + obj[i];
}
return '?' + query.slice(1);
}
}
混合
mixins:[]
在中括号中我们可以定义多个对象，我们组建就会继承这些个对象上属性方法，这种对属性或者方法的复制，我们可以看成是一种多继承。和extend、assign比较像
var MethodMixin = {//混合方法，把公用的部分提取出来
getData:function(url,callback){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
//
if (xhr.readyState == 4){
if(xhr.status == 200){
var obj = JSON.parse(xhr.responseText)
callback(obj)
} else{
console.log('请求失败')
}
}
}
xhr.open("GET",url,true);
xhr.send(null);
},
asideAdaptor:function(arr){
//为每一个对象添加一个字段cls,表示该标签是否被选中
var result = [];
for(var i = 0;i< arr.length;i++){
result.push(arr[i]);
result[i].cls = '';
}
return result;
},
}
mixins: [MethodMixin],//调用混合
路由
寻找页面的，通过配置路由规则可以确定渲染某个页面对应的组件
第一步，在父组件中注入ReactRouter.RouterHandler，这样路由寻找的组件就会记载在这里；
第二步，通过工厂方法React.createFactory来创建路由组件，以及默认路由组件；
第三步，定义路由规则，定义路由规则可以通过jsx语法定义，每个路由规则上有两个属性，
第一个是path，路由对应的hash规则；
第二个是handler，确定某个页面组件；
第四步，启动路由，ReactRouter.run,来启动页面的路由规则，有两个参数
第一个参数表示的路由规则
第二个参数表示回调函数，当改变页面hash的时候，会触发某一条路由规则，此时就会调用该回调函数，这个回调函数也有参数；
第一个参数表示该路由规则下，匹配到的路由组件对应的父组件
第二个参数表示路由的一些属性信息；
ES6书写React
在ES6中我们的编程方式是一种面向对象的编程方式，所以我们定义组件我们就要创建一个类，创建的这个类就要继承React的Component（这是react提供的一个组件基类），通过继承这个基类，我们可以实现一个React组件；
const {render} = ReactDOM；
这种语法表示将ReactDOM中的一个属性获取下来保存在这个变量中，注意，这里的属性名称要与变量名称同名，否则获取不到；
在ES6中我们定义的属性，初始化的状态我们定义在构造函数中，而不是定义在getInitialState中；
在ES6中我们为子组件传递方法，或者对元素绑定事件的时候，要绑定当前作用域，否则该方法执行的时候作用域可能是window;
网友评论