在 React 中解压“this”是不好的做法吗？答案

【问题标题】：Is it bad practice to unpack "this" in React?在 React 中解压“this”是不好的做法吗？
【发布时间】：2023-04-10 00:56:01
【问题描述】：

我总是将 this 解包，以便渲染函数看起来更整洁。这样做是不好的做法吗？

示例：

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>
        );
    }
}

【问题讨论】：

标签： javascript reactjs react-native ecmascript-6

【解决方案1】：

没有好坏之分，主要是风格问题。

在某些使用场景中可能存在非常很小的客观差异，但没有什么值得考虑的。（如果您反复使用属性，将它们缓存到本地常量可能会使它们更快地查找。如果不这样做，将它们缓存到本地常量是不必要的步骤。但同样，在 99.999999999% 的情况下，它只是根本不会对现实世界产生任何影响。做看起来最清楚的事情。）

旁注：如果你愿意，你可以结合你的两个解构赋值：

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

【讨论】：

@charlietfl - 广泛的研究，我向你保证。这当然不是随意敲击键盘... ;-)

【解决方案2】：

这不是一个坏习惯，但它更具代码可读性并避免了 React 中的反模式。它向用户提供了哪些对象绑定到该组件以及其他哪些对象是指全局对象的知识。所以最好不要破坏它。

【讨论】：