[react] addons
#文件中直接引入JS文件的方式和引入模块的方式最好不要混用。
#组件的写法在ES6中略有不同
var HelloComponent = React.createClass({ render: function() {return <div>Hello {this.props.name}</div>;} }); //如果使用ES6,可以这样写:class HelloComponent extends React.Component { render() {return <div>Hello {this.props.name}</div>;} }
#CommonJS 与 ES6的区别
var React = require('react/addon');var MyComponent = React.createClass({// do something });module.exports = MyComponent;//ES6 import React from 'react/addons'; class MyComponent extends React.Component {// do something use es6 } export default MyComponent;
react: react核心库,包含创建组件的类和函数
react-dom:页面呈现库,包含react组件或元素在浏览器呈现的函数,主要是render函数
ReactCSSTransitionGroup
一组动画必须要挂载了才能生效
ReactCSSTransitionGroup是动画的基础。
可以require('react-addons-css-transition-group')
也可以通过引入react-with-addons.js文件,配合React.addons.CSSTransitionGroup得到。
当一个新的项被添加到ReactCSSTransitionGroup,它将会被添加example-enter类,然后在下一时刻被添加example-enter-active CSS类。这是一个基于transitionName prop的约定。
.example-enter
.example-enter.example-enter-active
当移除一项的时候
.example-leave
.example-leave.example-leave-active
禁用动画
transitionEnter={false}
transitionLeave={false}
componentWillEnter(callback)
在组件被添加到已有的TransitionGroup中的时候,
该函数和componentDidMount()被同时调用。
这将会阻塞其它动画触发,直到callback被调用。
该函数不会在TransitionGroup初始化渲染的时候调用。
componentDidEnter()
该函数在传给componentWillEnter的callback函数被调用之后调用。
componentWillLeave(callback)
该函数在子级从ReactTransitionGroup中移除的时候调用。
虽然子级被移除了,ReactTransitionGroup将会使它继续在DOM中,直到callback被调用。
componentDidLeave()
该函数在willLeave callback被调用的时候调用(与componentWillUnmount是同一时间)。
#渲染一个<ul>
<ReactTransitionGroup component="ul"> ... </ReactTransitionGroup>
#渲染一个带有css类的<ul>
<ReactTransitionGroup component="ul" className="animated-list"> ... </ReactTransitionGroup>
#Custom Classes
... <ReactCSSTransitionGroup transitionName={ { enter: 'enter', enterActive: 'enterActive', leave: 'leave', leaveActive: 'leaveActive', appear: 'appear', appearActive: 'appearActive' } }> {item} </ReactCSSTransitionGroup><ReactCSSTransitionGroup transitionName={ { enter: 'enter', leave: 'leave', appear: 'appear' } }> {item2} </ReactCSSTransitionGroup> ...
Animate Initial Mounting
the default value of transitionAppear is false
#transitionAppear with the value true
During the initial mount ReactCSSTransitionGroup will get the example-appear CSS class and the example-appear-active CSS class added in the next tick.
render: function() { return ( <ReactCSSTransitionGroup transitionName="example" transitionAppear={true} transitionAppearTimeout={500}> <h1>Fading at Initial Mount</h1> </ReactCSSTransitionGroup> ); }
#Rendering a Single Child
var FirstChild = React.createClass({ render: function() { var children = React.Children.toArray(this.props.children); return children[0] || null; } }); //Now you can specify FirstChild as the component prop in //<ReactTransitionGroup> props and avoid any wrappers in the result DOM:<ReactTransitionGroup component={FirstChild}> {someCondition ? <MyComponent /> : null} </ReactTransitionGroup>
ReactLink
是一种设置通用数据流循环模型的语法糖,或者说“关联”某些数据到React state
ReactLink仅仅是一个onChange/setState()模式的简单包装和约定。
它不会从根本上改变数据在React应用中如何流动。
可以require('react-addons-linked-state-mixin')
也可以通过引入react-with-addons.js文件,配合React.addons.LinkedStateMixin得到。
LinkedStateMixin给React组件添加一个叫做linkState()的方法。
linkState()返回一个ReactLink对象,包含React state当前的值和一个用来改变它的回调函数。
<input type="text" valueLink={this.linkState('message')} />;
对于checkbox,你应该使用checkLink而不是valueLink:
<input type="checkbox" checkedLink={this.linkState('booleanValue')} />
Test Utilities(Jest)
React.addons.TestUtils
react-addons-test-utils
Simulate
Simulate.{eventName}(
DOMElement element,
[object eventData]
)
// <button ref="button">...</button>
var node = this.refs.button;
ReactTestUtils.Simulate.click(node);
// <input ref="input" />
var node = this.refs.input;
node.value = 'giraffe';
ReactTestUtils.Simulate.change(node);
ReactTestUtils.Simulate.keyDown(node, {key: "Enter", keyCode: 13, which: 13});
react-router
通过react-router的Router和Route组件,可以组织app的路由表。
Router中嵌套Route,并通过path和component属性指定路由对应的render组件。
从属性上就很容易推断react-router在做的事:
在render的根部获得render的控制权,然后通过path的匹配选择在render中填入哪个组件。
使用<Link>的优点有2:
1. 自动根据history类型生成href;
2. 提供一些有用的内置实现,比如:activeClassName
通过RouterContext注入的router对象的push函数可以实现到一个新的路由的跳转,
不过需要在contextTypes声明,否则context中不会包含router对象。
转载于:https://www.cnblogs.com/qingmingsang/articles/5495488.html
[react] addons相关推荐
- react 实现数据双向绑定
首先从没有使用mixin的例子引入 [javascript] view plaincopy print? var BindingExample = React.createClass({ getIni ...
- react封装函数_GitHub - daifee/react-component: 用 React 封装一套常用组件
Daifee-React-Component 用 React 封装一套常用组件 所有组件都是 stateless 组件,但为方便,某些组件提供 API 调用方式的静态方法. [TOC] 使用前须知 源 ...
- React 15.5带来重大修改
Facebook发布了React 15.5,给开发人员足够的时间来调整和适应版本16的重大变化. Andrew Clark在一篇博文中公布了将在主程序包中弃用React.PropTypes和React ...
- Immutable 详解及 React 中实践
Shared mutable state is the root of all evil(共享的可变状态是万恶之源) -- Pete Hunt 有人说 Immutable 可以给 React 应用带来 ...
- 一个 react+redux 工程实例
在前几天的一篇文章中总结部分提到了学习过程中基础的重要性.当然,并不是不支持大家学习新的框架,这篇文章就分享一下react+redux工程实例. 一直在学习研究react.js,前前后后做了几次分享. ...
- React性能优化总结
文章同步于Github Pines-Cheng/blog 初学者对React可能满怀期待,觉得React可能完爆其它一切框架,甚至不切实际地认为React可能连原生的渲染都能完爆--对框架的狂热确实会 ...
- Reactjs 15.4.X IE11 Objects are not valid as a React child
2019独角兽企业重金招聘Python工程师标准>>> Reactjs 15.4.X 在IE下出现如下异常: Objects are not valid as a React chi ...
- Immutable 详解及 React 中实践 1
本文转自:https://github.com/camsong/blog/issues/3 Shared mutable state is the root of all evil(共享的可变状态是万 ...
- React插件及动画
一.插件 React.addons是为了构建 React应用而放置的一些有用工具的地方.此功能应当被视为实验性的,但最终将会被添加进核心代码中或者有用的工具库中: TransitionGroup和CS ...
最新文章
- swift使用xib绘制UIView
- 教育部办公厅关于2020-2021学年面向中小学生的全国性竞赛活动名单的公示
- mybatis java传参_[Java教程]Mybatis批量和传参
- sql 删除最低分数_一份虐你千百遍的SQL语句面试题,请笑纳
- 自定义通配器导入bean对象
- lwip+freeRTOS 故障容错 客户端主动发起连接
- MySQL表结构设计之范式化和反范式化对比
- 奇怪的bug,不懂Atom在添加markdown-themeable-pdf,在配置好phantomjs的情况下报错
- springboot jwt token前后端分离_7个开源的 Spring Boot 前后端分离项目,一定要收藏!...
- php设置文件权限问题,php如何设置文件权限
- 51单片机外设篇:按键
- oracle中avl,AVL CRUISE软件功能简介
- 我国跨境电子商务的发展概念以及发展概况
- 七日杀服务器怎么设置家的位置,七日杀固定地图在哪儿建家好 | 手游网游页游攻略大全...
- Python➕ ps 图钉画图纸制作教程
- 参加腾讯云TVP的Coding吐槽大会感想
- yourshelf是什么意思中文_shelf是什么意思中文
- Android 获取最近几天的日历日程
- Arthas监控学习与分享
- 破解CMOS密码和隐藏文件