【React.js终探（五）】的更多相关文章

React.js终探（七）(完)

我们在前面介绍了组件的各种特性,这一节我们来说说多组件的情况. 在实际开发中,我们的组件难免会遇到有公共部分的情况,如果是个别情况还好,但如果数量比较多的话,那这时候,就需要公用了. 怎么公用呢? React为我们提供了它的方法. mixin:复用代码 可以把部分代码提出来公用.mixin是掺合混合的意思,即可以把一个对象的属性拷贝到另一个对象上. 使用mixin有两步: 定义一个mixin对象,即如 var EzLoggerMixin = { log:function(){ //sth. ha…

React.js终探（五）

在React中,一切都是看做组件. 而组件的嵌套也是十分常见的. 所以有的组件就作为容器组件 容器组件 React元素可以包含子元素 如 //JSX <ezpanel title="title"> <p>this is demo content</p> </ezpanel> 在React中,用this.props.children可以访问子元素 如: var EzPanel = React.createClass({ render : f…

React.js终探（六）

在React中,我们怎么样使用它跟CSS 3 动画结合在一起使用呢? CSS3 Transitoin CSS3动画要求DOM属性变化的时候才能够被触发.所以这就需要我们把属性变化后的React元素渲染到真实的DOM中,这样才能够有过渡效果,形成动画. 那我们来实现一种:第一次渲染后,当渲染完成时,调用setState(),且重新设置样式,接着便触发第二次渲染,中间便有过渡效果. 注意:使用window.getComputedStyle(),调用它,会刷新DOM的样式,确保的是之前设置的样式已经渲…

React.js再探（四）

不知道看官们还记不记得上一节的内容,关于生命周期的.我们来个例子重温且练习一下. 传送门:http://www.cnblogs.com/galenyip/p/4574400.html 我们来实现一下时钟的功能,要求当秒是“0”的时候,字体变为红色.注意用componentWillUpdate实现. 如       当秒是0   变为 <!DOCTYPE html> <html> <head> <meta charset="utf-8">…

React.js再探（二）

上文中说到了组件了. 我们使用组件的目的最大莫过于复用,提供生产效率. 那么,这时候组件就应该能够提供一些”api”出来,让开发者去定义在不同场景下的不同表现,比如,行为或外观等. 而这些“api”就是 属性   在React中,用 props 访问实例元素的属性   属性:props 比如在JSX片段中,组件的实例元素有一个属性onoff: React.render( <ezlampcomp onoff="off"></ezlampcomp> , docume…

React.js再探（三）

很多时候,组件实例的外观和行为我们通过props进行定制就可以了.因为任何时候,组件实例的表现只跟 传过来的props属性 相关. 我们称这种为 无状态/ stateless 组件 即它自身是 无记忆的   比如切换开关,它可以响应用户的点击事件,如果当前状态是关,那么它就 切换到开的状态(显示开状态的图片):而如果当前状态是开,那么它就切换到关的 状态(显示关状态的图片)   状态记忆:state React引入了状态机的概念,让组件具有不同的状态,使得组件具有记忆功能 具体如下: state…

react.js 从零开始（五）React 中事件的用法

事件系统   虚拟事件对象 事件处理器将会传入虚拟事件对象的实例,一个对浏览器本地事件的跨浏览器封装.它有和浏览器本地事件相同的属性和方法,包括 stopPropagation() 和 preventDefault(),但是没有浏览器兼容问题. 如果因为一些因素,需要底层的浏览器事件对象,只要使用 nativeEvent 属性就可以获取到它了.每一个虚拟事件对象都有下列的属性: boolean bubbles boolean cancelable DOMEventTarget currentTa…

【React.js小书】动手实现 React-redux（五）：Provider - 方志

我们要把 context 相关的代码从所有业务组件中清除出去,现在的代码里面还有一个地方是被污染的.那就是 src/index.js 里面的 Index: 1234567891011121314151617181920 ...class extends Component { static childContextTypes = { store: PropTypes.object } getChildContext () { return { store } } render () { retu…

React.js 小书 Lesson26 - 实战分析：评论功能（五）

作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson26 转载请注明出处,保留原文链接和作者信息. (本文未审核) 持久化评论 同样地,可以通过类似于用户名持久化的方式对评论列表内容进行持久化,让用户发布的评论在刷新页面以后依然可以存在.修改 src/CommentApp.js: class CommentApp extends Component { constructor () { super() this.state = { comme…

React.js实现原生js拖拽效果及思考

一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖拽效果. 首先,其实拖拽效果的思路是很简单的.主要就是三个步骤: 1.onmousedown的时候,启动可拖拽事件,记录被拖拽元素的原始坐标参数. 2.onmousemove的时候,实时记录鼠标移动的距离,结合被拖拽元素第一阶段的坐标参数,计算并设置新的坐标值. 3.onmouseup的时候,关闭可拖拽事件…