State
是數(shù)據(jù)來源的地方。 我們應(yīng)該盡可能使?fàn)顟B(tài)盡可能簡(jiǎn)單,并減少有狀態(tài)組件的數(shù)量。 例如,如果有十個(gè)組件需要來自狀態(tài)(State
)的數(shù)據(jù),應(yīng)該創(chuàng)建一個(gè)容器組件,以保持所有組件的狀態(tài)。
以下示例代碼顯示了如何使用EcmaScript2016
語法創(chuàng)建有狀態(tài)的組件。
文件:App.jsx -
import React from 'react';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
header: "Header from state...",
content: "Content from state..."
}
}
render() {
return (
<div>
<h1>{this.state.header}</h1>
<h2>{this.state.content}</h2>
</div>
);
}
}
export default App;
文件:main.js -
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App />, document.getElementById('app'));
這將產(chǎn)生以下結(jié)果。