Tôi nên xử lý hoạt ảnh nghỉ phép trong componentWillUnmount trong React như thế nào?

Question

Tôi đã tự hỏi liệu có ai có thể cung cấp một số thông tin chi tiết về cách họ xử lý hoạt ảnh trái trong React.js hay không. Tôi đã sử dụng Greensock TweenMax và các hoạt ảnh nhập hoạt động tốt trên componentDidMount, nhưng tôi chưa tìm được cách đáng tin cậy để tạo hiệu ứng cho một thành phần.

Cảm giác của tôi là nó nên đi vào componentWillUnmount, nhưng React không cung cấp cơ chế gọi lại để bạn chỉ ra khi nào bạn sẵn sàng bỏ đi một thành phần. Do đó, hoạt ảnh chuyển tiếp không bao giờ hoàn thành do hoạt ảnh không đồng bộ với React. Thay vào đó, bạn sẽ thấy một phần nhỏ của hoạt ảnh thứ hai, thành phần biến mất và được thay thế bằng thành phần tiếp theo hoạt ảnh.

Đây là vấn đề mà tôi đã bắt đầu sử dụng React cách đây 9 tháng. Tôi không thể không nghĩ rằng có phải là một giải pháp ra khỏi đó khác hơn ReactCSSTransitionGroup mà tôi thấy là cồng kềnh và khó tính, đặc biệt là với bộ phản ứng-router.

Answer 1

ReactTransitionGroup (khi đó ReactCSSTransitionGroup được tạo) là thành phần cơ bản cho phép nhập và thoát không đồng bộ. Nó cung cấp các móc vòng đời mà bạn có thể sử dụng để móc vào các hình động dựa trên JS. The docs list móc phép:

ReactTransitionGroup is the basis for animations. When children are declaratively added or removed from it (as in the example above) special lifecycle hooks are called on them. There are 3 ways to get starting using ReactCSSTransitionGroups :

import ReactCSSTransitionGroup from 'react-addons-css-transition-group' // ES6 
var ReactCSSTransitionGroup = require('react-addons-css-transition-group') // ES5 with npm 
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup; // ES5 with react-with-addons.js 

componentWillAppear(callback)

This is called at the same time as componentDidMount() for components that are initially mounted in a TransitionGroup . It will block other animations from occurring until callback is called. It is only called on the initial render of a TransitionGroup .

componentDidAppear()

This is called after the callback function that was passed to componentWillAppear is called.

componentWillEnter(callback)

This is called at the same time as componentDidMount() for components added to an existing TransitionGroup . It will block other animations from occurring until callback is called. It will not be called on the initial render of a TransitionGroup .

componentDidEnter()

This is called after the callback function that was passed to componentWillEnter is called.

componentWillLeave(callback)

This is called when the child has been removed from the ReactTransitionGroup . Though the child has been removed, ReactTransitionGroup will keep it in the DOM until callback is called.

componentDidLeave()

This is called when the willLeave callback is called (at the same time as componentWillUnmount).

^{Animation - Low-level API}

Để animate một đứa trẻ ra ngoài, bạn cần để bắt đầu hoạt hình của bạn trong componentWillLeave và gọi được cung cấp callback khi hoạt ảnh hoàn tất. Như một ví dụ, here's a JSFiddle cho thấy một thành phần tách rời-sinh động trẻ em của mình trong và ngoài: http://jsfiddle.net/BinaryMuse/f51jbw2k/

Mã liên quan để tạo hiệu ứng động là:

componentWillLeave: function(callback) { 
    this._animateOut(callback); 
}, 

_animateOut(callback) { 
    var el = ReactDOM.findDOMNode(this); 
    setTimeout(function() { 
    TweenLite.to(el, 1, {opacity: 0}).play().eventCallback("onComplete", callback); 
    }, this.props.animateOutDelay); 
}, 

Answer 2

Check-out React-Motion

https://www.youtube.com/watch?v=1tavDv5hXpo

Cheng Lou là một nhà phát triển trong nhóm React.

Anh ấy nói về các vấn đề với ReactCSSTransitionGroup hiện tại.

Ông đã phát triển React-Motion để khắc phục vấn đề này.

Mặc dù nó không sử dụng chuyển tiếp css, nó có vẻ hoạt động tốt và rất xác định. Trường hợp như ReactCSSTransitionGroup có vẻ là khó tính như bạn không thể làm gián đoạn quá trình chuyển đổi.