React中怎么實現Props反模式

這篇文章主要介紹了React中怎么實現Props反模式的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇React中怎么實現Props反模式文章都會有所收獲，下面我們一起來看看吧。

之所以稱其為反模式是因為在getInitialState中使用Props生成state會導致重復“來源信任”問題。并且還猶豫getInitialState函數只是在組件被第一次渲染時調用。也就是說當該組件第二次再使用render渲染的時候，getInitialState函數不會再被調用。也就是說如果我們想通過第二次渲染改變Props的值從而改變State的值是不可能的。

下面我們來看一段代碼：

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

對于上面的例子，可以說就是一種反模式的運用。如果我們想再次渲染組件MessageBox改變Props的name值。我們會發現div中的內容不變的，依然是 Mr. Rogers而不是Mr. Onmpw。

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

所以說，對于上面的例子，div中直接使用this.props相對于this.state更好一些。

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

這個例子的結果就是在頁面上輸出 Mr. Onmpw。

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

如果我們再次渲染，那就會就會是Mr. Rogers。

上面介紹的情況就是Props在getInitialState中使用的反模式。當然，如果我們能明確Props的用途，在getInitialState中使用也不會產生反模式的情況。比如，初始化一個值，該Prop的值不會改變。

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

關于“React中怎么實現Props反模式”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“React中怎么實現Props反模式”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。