React快速进阶
上一篇文章,React入门 大致了解了,如何基本的使用组件和更新组件. 现在,我们来点新的~ 属性验证React针对于props 专门提供了两种属性验证,来保证组件的可复用性~ class Search extends Component { constructor(){ super(); this.number = 0; } render() { return( <div> <span>{this.props.children}</span> </div> ) } } Search.propTypes = { children:PropTypes.string.isRequired } Search.defaultProps={ children:"default value" } 这里,设置this.children属性是必须的,并且如果你不写的话,他就会使用默认值,
并且,在设置类型的同时,你还可以在后面再写上 还有一些其他的内容,like:
怎么写组件?怎么写组件这个问题,翻译一下就是,怎么使用state和props属性. 因为组件的render和 基本样式为:
这个demo其实就一个中心点,通过onChange事件来控制内容信息的展示. 信息的展示,就是通过触发this.setState 方法来完成. 组件的生命周期所谓的生命周期,实际上就是一些列触发或者不触发渲染的方法~
我们来说一下,每个过程对应状态的触发顺序. Mounting该过程表示渲染组件的过程. 简而言之就是将我们写的组件类(class),通过render 方法渲染到页面上. 具体触发顺序是:
Unmounting卸载组件的过程. 即: <div> <single></single> </div> 渲染为: <div> {/* single component has been removed*/} </div> 该过程实际上只会触发一个方法:
Props Change看名字大家差不多已经猜出来了. 该过程就是主要处理props 内容的改变. 基本的过程为:
State Changes状态属性的改变实际上和Props的流程差不多,只是是少了
lifecycle有什么用上面说了这么多方法,那这些方法到底是写在哪里的呢? class Search extends Component{ render(){ return( <div> </div> ) } componentDidMount(){ alert('finish'); } } 这下,应该懂了. 这里大致了解一下就行,当做铺垫. immutable state因为state是起到组件渲染的关键作用. 所以,一般外部的data都是存储在state当中, 而这样方式,即容易让你情不自禁的改动this.state中的属性. 这样很容易,造成你直接改动this.state状态会无效,以及会降低React内部对状态渲染的性能. let newObj = Object.assign({},this.state.male,this.state.female); let newArray = this.state.people.map((val)=>val); 不过,由于Object.assign支持度较低. 你可以自己手动造一个轮子. Object.prototype.assign=function(origin,target){ for(var i in target){ if(origin.hasOwnProperty(i)){ origin[i]=target[i]; } } } 或者可以使用 动画ReactReact为了方便动画开发,特地提出了React CSSTransitionGroup这个addon. 细致点来说,CSSTransitionGroup 只提供了3个效果-渲染,新增,删除. 而且每个特效归根结底,还是需要你自己手动定义className,他只是把className 的替换帮你做了. npm install --save react-addons-css-transition-group // 在js中引用 import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; 先看一个简单的demo. 这里也有线上demo:online demo render(){ let lis = this.state.num.map((i,index)=>( <li key={i} onClick={this.remove.bind(this,index)} >{i}</li> )); return( <ul> <CSSGroup transitionName="demo" transitionEnterTimeout={300} transitionLeaveTimeout={300}> {lis} </CSSGroup> </ul> ) } 讲真,React会在真正渲染的时候,在他应用的位置添加
这里提一下,关于React class Name的设置位置. 只要和渲染节点设置在一起即可. li { font-size: 15px; line-height: 24px; list-style-position: inside; list-style-type: disc; text-align: left; width: 80%; border: 1px solid; margin-top: 8px; &.demo-leave { opacity: 1; transform: translateX(0); &.demo-leave-active { opacity: 0; transform: translateX(250px); transition: 0.3s; } } } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |