[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对象。