反应原生上下文和不推荐使用的超级用法

Posted 2023-03-13

【中文标题】反应原生上下文和不推荐使用的超级用法

【英文标题】：React native context and deprecated super usage

【发布时间】：2021-01-01 02:55:53

【问题描述】：

我已经离开 React Native 编程一周了，当我回来时，在一些 VSCode 更新之后，我注意到我在类构造函数中的许多 super(props) 调用现在被标记为已弃用。原因似乎是一些遗留上下文 API 问题，在此链接中对此进行了解释：React Native Legacy Context

我从链接中了解了一些影响上下文使用的问题。但是，我现在有点困惑是否需要拨打super()、super(props) 或根本不拨打电话。我之前的理解是，编写一个扩展基类的类，总是需要调用super()。如果基类构造函数还使用构造函数中接收到的任何道具，则还需要使用super(props) 传递道具。

在我的代码中，如果我需要一个有状态的组件，我几乎总是扩展 React.Component。我很少需要在constructor()s 中使用this.props，如果需要，我只使用它来设置初始状态对象，之后我会处理生命周期方法的更改。以下是我的大多数类组件的外观：

class ExampleComponent extends React.Component 
    constructor(props)
        super(props);  // super marked as deprecated here
        // super();    // super NOT marked as deprecated here

        this.state = 
            value: this.props.initialValue || 0
        ;
    

    componentDidUpdate = (prevProps, prevState, snapshot) => 
        // I would not actually do that, but for the sake of an example
        if (this.state.value > 10)
            this.setState( value: 10 );
        
    

    increment = () => 
        const value = this.state.value + 1;
        this.setState( value );
    

    render = () => 
        return <View>
            <Text>Current value is:  this.state.value </Text>
            <TouchableOpacity onPress= this.increment >
                <Text>Add one!</Text>
            </TouchableOpacity>
        </View>;
    

有人可以帮我理解super 在 React Native 环境中的正确用法吗？我还应该提到我正在使用基于 React 16.11 发布的 Expo SDK 38。我不清楚上述弃用是否也会影响这个版本的 React/React native。

【参考方案1】：

在进一步研究之后，似乎我对super() 和super(props) 的使用的了解是正确的。我遇到super(props) 被标记为已弃用的问题是由于 React 的 TS 定义中的错误弃用标记。

应该被标记为弃用的是 super 的重载形式 super(props, context)，它采用了 React 的遗留上下文 API 使用的 context 属性。

在 Microsoft 的 TypeScript github 页面上的这个（当前开放的）问题上更好地描述和讨论了这个问题：https://github.com/microsoft/TypeScript/issues/40511

在问题得到解决之前，可以放心地忽略弃用警告。

【讨论】：

好像patch 正在路上。