再上一章節中，為什么直接修改 state 的內容為啥界面就不會更新呢，那肯定是有原因的，接下來我就來一一簡單的來介紹一下吧。
再這里，我就自定義一個類組件，讓我們之前的 Home 繼承自我們現在自定義的一個類組件如下所示：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./react.development.v17.js"></script>
<script src="./react-dom.development.v17.js"></script>
<script src="./babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
class BNTangComponent extends React.Component {
constructor() {
super();
this.state = null;
}
setState(val) {
console.log('需要更新界面');
this.state = val;
ReactDOM.render(this.render(), document.getElementById('app'));
}
}
class Home extends BNTangComponent {
constructor() {
super();
this.state = {
message: 'BNTang'
}
}
render() {
return (
<div>
<div>{this.state.message}</div>
<button onClick={this.myFn}>按鈕</button>
</div>
)
}
myFn = () => {
this.state.message = 'www.it6666.top';
this.setState({
message: 'www.it6666.top'
})
}
}
ReactDOM.render(<Home/>, document.getElementById('app'));
</script>
</body>
</html>
通過如上我自定義的類組件可以很明顯的發現如果直接修改 state 的內容是沒有觸發重新加載的，所以如果需要達到修改了內容界面需要更新就的要通過 setState 來進行修改，上面的代碼很明顯了，通過 setState 觸發了重新渲染的函數。再瀏覽器中進行測試效果如下圖所示：
只不過不需要我們自行的去處理這件事了而已，內部已經幫我們做好了。