Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.2k views
in Technique[技术] by (71.8m points)

reactjs - React native context and deprecated super usage

I've been away from react native programming for a week and when I got back, after some VSCode updates, I have noticed that many of my super(props) calls in class constructors are now marked as deprecated. The reason seems to be some legacy context API issue, which is explained at this link: React Native Legacy Context

I have understood some of the issues affecting context usage from the link. However, I am now a bit confused as to whether I need to make a call to super(), super(props) or not to make the call at all. My previous understanding was that, writing a class that extends a base class, always requires a call to super(). If the base class constructor also uses any props received in the constructor, passing the props with super(props) is also required.

In my code, I almost always extend React.Component if I need a stateful component. I rarely need to use this.props in constructor()s, and if I do, I only use it to set up the initial state object, after which I deal with changes in lifecycle methods. The following is how most of my class components would look like:

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

Can someone help me understand the correct usage of super in a React Native environment? I should also mention that I am using Expo SDK 38, which was released based on React 16.11. It is unclear to me whether the deprecation above also affects this version of React/React native or not.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

After looking further into this, it seems that my knowledge of the use of super() and super(props) is correct. The issue I am experiencing with super(props) being marked as deprecated is due to an erroneous deprecation marking in React's TS definitions.

What should've been marked as deprecated was the overloaded form of super, super(props, context), which takes a context prop used by React's legacy context API.

The issue is better described and discussed at this (currently open) issue on Microsoft's TypeScript github page: https://github.com/microsoft/TypeScript/issues/40511

Until the issue is fixed, the deprecation warning can be safely ignored.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

2.1m questions

2.1m answers

60 comments

57.0k users

...