ReactTransitionGroup 钩子中的回调是什么？答案

【问题标题】：What are the callbacks in ReactTransitionGroup hooks?ReactTransitionGroup 钩子中的回调是什么？
【发布时间】：2015-07-13 00:45:41
【问题描述】：

React.js 为动画提供了一个低级 API，称为 ReactTransitionGroup。在文档中声明对于钩子componentWillAppear、componentWillEnter 和componentWillLeave，回调作为参数传递。

我的问题是，这个回调到底是什么以及它是如何传递给这些钩子的，除了动画被延迟到被调用之前，文档没有说明这些回调。

【问题讨论】：

标签： javascript animation reactjs

【解决方案1】：

首先，我还在学习 ReactJS，所以我的方法有可能是错误的，或者不是。为此提前道歉。

打开您的开发者工具的console 窗口并分析我刚刚制作的this jsFiddle 示例。观察回调被调用的顺序。

我正在使用TweenMax 对框进行一些动画处理，使其在单击按钮时出现或消失。

Low-level API 公开了很多有用的回调供我们使用。共享示例演示了这些回调的用法。

JavaScript：

var ReactTransitionGroup = React.addons.TransitionGroup;
var MyBox = React.createClass({
    show: function(callback){
        var node = React.findDOMNode(this);
        TweenMax.fromTo(node, 2, { width: 100, height: 100, backgroundColor: '#0cc', scale: 0.2, opacity: 0, rotation: -180 }, { width: 100, height: 100, backgroundColor: '#0cc', scale: 1, opacity: 1, rotation: 0, ease: Expo.easeInOut, onComplete: callback, onCompleteScope: this });
    },
    hide: function(callback){
        var node = React.findDOMNode(this);
        TweenMax.to(node, 2, { width: 100, height: 100, backgroundColor: '#cc0', scale: 0.2, opacity: 0, ease: Expo.easeInOut, onComplete: callback, onCompleteScope: this });
    },
    componentWillAppear: function(didAppearCallback){
        console.log('MyBox.componentWillAppear');
        this.show(didAppearCallback);
    },
    componentDidAppear: function(){
        console.log('MyBox.componentDidAppear');
    },
    componentWillEnter: function(didEnterCallback){
        console.log('MyBox.componentWillEnter');
        this.show(didEnterCallback);
    },
    componentDidEnter: function(){
        console.log('MyBox.componentDidEnter');
    },
    componentWillLeave: function(didLeaveCallback){
        console.log('MyBox.componentWillLeave');
        this.hide(didLeaveCallback);
    },
    componentDidLeave: function(){
        console.log('MyBox.componentDidLeave');
    },
    componentDidMount: function() {
        console.log('MyBox.componentDidMount');
    },
    componentWillUnmount: function() {
        console.log('MyBox.componentWillUnmount');
    },
    render: function(){
        return <div>&nbsp;</div>;
    }
});
var Container = React.createClass({
    getInitialState: function(){
        return { isShowing: false };
    },
    onButtonClicked: function(){
        this.setState({ isShowing: !this.state.isShowing });
    },
    render: function(){
        var myBox = this.state.isShowing ? <MyBox key="myBox" /> : '';
        return (
            <div id="container">
                <MyButton onButtonClicked={this.onButtonClicked} />
                <ReactTransitionGroup transitionName="hellotransition">
                    {myBox}
                </ReactTransitionGroup>
            </div>
        );
    }
});
var MyButton = React.createClass({
    render: function(){
        return <button onClick={this.props.onButtonClicked}>Click Me</button>;
    }
});
//
React.render(<Container />, document.body);

如果有任何不清楚的地方请告诉我，我很乐意分享我所知道的。

【讨论】：

那么，不创建容器类，不把componentWillLeave放在子类上，就不能处理componentWillLeave吗？
@crush：这个想法是每个component 都有自己的可用生命周期事件。因此父组件将有自己的componentWillLeave 方法可供使用，子组件将拥有自己的。
现在在制作模块时，我必须通过我的容器组件将所有参数传递给我的实际组件。这不是很多工作，只是多余的。顺便说一下，这个例子帮助了我。
嗯。我希望你不是说你正在传递（或试图传递）这些生命周期事件到你的子组件？很高兴这个例子有帮助，我也在学习。 :)
Refer to this jsfiddle 我创建的。看看我首先必须如何将我的 onAuthenticated 回调通过我的转换容器传递给我的实际组件？那是冗余。

【解决方案2】：

如果没有回调，React 将无法知道要等待您的自定义动画多长时间。来自文档中的一种方法的一些澄清：

componentWillLeave(callback)

当孩子从ReactTransitionGroup 中移除时调用。尽管子节点已被移除，ReactTransitionGroup 仍会将其保留在 DOM 中，直到调用 callback。

假设您想在一个组件被挂载时淡出它，并且您想在纯 JavaScript 中实现淡出代码。当组件被卸载时，React 调用componentWillLeave。您启动淡出代码（可能使用 jQuery 动画，或一些补间库），当淡出完成 done 时，您调用回调以指示动画已完成，然后只有这样 React 才会卸载组件。

【讨论】：