在React解包“this”是不好的做法吗？

Question

I always unpack this so that the render function looks tidier. Is it bad practice to do this?

Example:

class Zoom extends React.Component {
    // ...

    render() {
        const {view, zoomOutScreen} = this;
        const {navigation} = this.props;

        return (
            <Wrapper
                innerRef={view}
                animation='zoomIn'
                duration={200}
                useNativeDriver={true}
            >
                <Component
                    navigation={navigation}
                    zoomOutScreen={zoomOutScreen}
                />
            </Wrapper>
        );
    }
}

Answer 1

It's neither good nor bad, it's primarily a matter of style.

There could be a very small objective difference in some usage scenarios, but nothing worth thinking about. (If you use the properties repeatedly, caching them to a local constant may make them faster to look up. If you don't, caching them to a local constant is an unnecessary step. But again, in 99.999999999% of cases, it's just not going to make any real-world difference at all. Do what seems clearest.)

---

Side note: If you want, you can combine your two destructuring assignments:

const {view, zoomOutScreen, props: {navigation}} = this;

Answer 2

Not a bad practice but it is more code-readability and avoiding anti-patterns in React. It gives the knowledge to user what objects are binded to this component and what else is referring to global objects. So It it preferable not to destruct it.