- react-demos 阮一峰
- react-router gitBook
- react-router 2.0.x 版本变化
- 阮一峰的react-router
- React 教程合集
- Promise 迷你书
- isomorphic-fetch的用法
- React 简介与原理
- 怎么样更好的理解虚拟DOM
- React Native ES5 和 ES6 写法对照
- localStorage --setItem
组件加载完之后立即执行,可以通过this.getDOMNode() 来访问 DOM 结构, 在该方法里面可以执行 setInterval setTimeout 等操作 或者发送Ajax 请求
这个是用来调用父类的构造函数,子类必须在constructor方法中调用 super(), 否则构建实例会报错,这是因为子类没有自己的this对象。而是继承父类的this,所以没有super(),就没有this.
或者说是依赖都安装好了,但是还是无法识别,其原因在于忘记写.babelrc 文件了
es5:
Foo.prototype.ajax=function(){
$.get('http://foo/bar.com', function(res){
//这里的this指的不是当前的对象,所以要加bind
this.otherMethod();
}.bind(this))
}
es6:
class Foo {
ajax() {
$.get('http://foo/bar', res=> {
//这里的this指的是当前对象,而不是ajax对象
this.otherMethod();
})
}
}
</pre>
在demo11中。es5中的this 指向:es6代码中this指向: UserGist
官网 是这么说的
这个问题就是this指向的问题导致的:例如下面的函数
Data.tabData.map(function(item,index){ return( <li key={index} onClick={this.handleClick.bind(this)}>{item.tit} ) })
这样写的话就会导致外面定义的handleClick 出现上面的错误,解决方法是将 this
传进去 写法如下:
Data.tabData.map(function(item,index){ return( < li key={index} onClick={this.handleClick.bind(this)}>{item.tit} ) }, this)
Stack Overflow 答案:函数undefined
实现: 1. 用 JS 构建虚拟 DOM 树 2. 比较两颗虚拟 DOM 树的差异 3. 把差异的部分作为新的DOM 树渲染出来
实现的算法是: diff 算法。实现复杂度为:O(n^3), 但是在前端中,很少有跨层级移动DOM 元素,所以 Virtual DOM 只会对同一个层级的 DOM 元素进行比较,这样话算法复杂度就变为了O(n).
v0.1 版本和 v0.2 版本的区别导致的问题,因为这两个版本的写法用法差异性较大,所以用的时候要注意。 贴着连接以后好找uprade-guides,上面资料2 也有写。
{this.props.children}
这个的用法:这个是用来显示路由下面的内容的,比如
<ul>
<li><Link to='/about'>About</Link></li>
<li><Link to='/inbox'>Inbox</Link></li>
<li><Link to='/inbox/messages/23'>Message/23</Link></li>
</ul>
{this.props.children}
上面的{this.props.children}
就是用来显示路由 /About, /Inbox
所对应的内容的, /Inbox/message/23
对应的是一个子路由,它是在页面/Inbox 的基础上面分出来的路由。在/Inbox
所对应的组件下面摁钉也有一个相同的{this.props.children}
来显示该子路由组件, 如下:
class Inbox extends Component{
render(){
return(
<h1>Inbox Content</h1>
{this.props.children || "Hello Inbox"}
)
}
}
当然这个"Hello Inbox"
的这一项内容可以没的
还有一个注意的是 /inbox/message/23
对应的路由应该是 /inbox/message/:id
因为一开始对应的路由没有写,所以可以用 <IndexRoute component={}>
来对应路由 '/'
对于选中连接的样式可以直接使用 activeStyle={{}}
或者 activeClassName
的形式定义。而不需要自己判断是否选中
但是像上述的这种情况不适用与连接到根路由的情况,因为他会使得activeStyle
和activeClassName
失效,它会匹配任何的子路由,所以会一高亮,这个时候就需要用IndexLink
这个精确匹配来实现.或者加上 onlyActiveOnIndex={true}
这个属性
hashHistory
的是通过 URL 的hash 部分(#)来进行切换的。url 的形式如下所示:
而 browserHistory
则没有上面的(#)它显示出来的是正常的页面跳转链接,如下图所示:
在demo22 的评论demo 里面用到了 localStorage的getItem和setItem,因为还没搞到数据库那些东西,所以暂时先用这个代替下。