JIYIK CN >

In the article Passing Props , we learned about the concept of React Props and how to use it. In this article, we will introduce the use of Props to generate state in getInitialState. This method of use is called Anti-Pattern.

The reason why it is called an anti-pattern is that using Props to generate state in getInitialState will cause repeated "source trust" problems. In addition, the getInitialState function is only called when the component is rendered for the first time. That is to say, when the component is rendered for the second time, the getInitialState function will not be called again. That is to say, if we want to change the value of Props and thus the value of State through the second rendering, it is impossible.

Let's look at a piece of code:

var MessageBox = React.createClass({
    getInitialState: function() {
        return {name: 'Mr. ' + this.props.name};
    },
    render: function() {
        return <div>{'Mr. '+this.state.name}</div>;
    }
});
ReactDOM.render(
    <MessageBox name="Rogers" />,
    document.getElementById('content')
);

The above example is an anti-pattern. If we want to render the MessageBox component again and change the name value of Props, we will find that the content in the div remains unchanged, and it is still Mr. Rogers instead of Mr. Onmpw.

ReactDOM.render(
    <MessageBox name="Rogers" />,
    document.getElementById('content')
);
ReactDOM.render(
    <MessageBox name="Onmpw" />,
    document.getElementById('content')
);

So, for the above example, it is better to use this.props directly in div rather than this.state.

var MessageBox = React.createClass({
    render: function() {
        return <div>{'Mr. '+this.props.name}</div>;
    }
});
ReactDOM.render(
    <MessageBox name="Onmpw" />,
    document.getElementById('content')
);

The result of this example is Mr. Onmpw output on the page.

ReactDOM.render(
    <MessageBox name="Rogers" />,
    document.getElementById('content')
);

If we render again, it will be Mr. Rogers.

The situation described above is an anti-pattern of using Props in getInitialState. Of course, if we can clearly define the purpose of Props , using it in getInitialState will not produce anti-patterns. For example, when a value is initialized, the value of the Prop will not change.

var Counter = React.createClass({
    getInitialState: function() {
        return {count: this.props.initialCount};
    },
    handleClick: function() {
        this.setState({count: this.state.count + 1});
    },
    render: function() {
        return <div onClick={this.handleClick}>{this.state.count}</div>;
    }
});
ReactDOM.render(
    <Counter initialCount={7}/>,
    document.getElementById('content')
);

The above examples avoid the anti-pattern. The above examples are modified from the examples in the official documentation. I hope this article will help you learn React .