有状态组件和无状态组件
首先需要明确的是, 组件中的状态(state)指的其实就是数据，有状态组件指的就是有自己数据的组件(逻辑组件)，无状态组件指的就是没有自己数据的组件(展示组件)
定义自己的状态
凡是继承于 React.Component 的组件, 默认都会从父类继承过来一个state属性，这个state属性就是专门用来保存当前数据的，所以但凡是继承于React.Component的组件, 都是 有状态 组件，所以但凡不是继承于React.Component的组件, 都是 无状态 组件，所以类组件就是有状态组件，所以函数组件就是无状态组件。
先来看一看有状态的组件，也就是继承了 React.Component 的组件，内容如下：
<!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 Home extends React.Component {
render() {
return (
<div>
<div>{this.state + ''}</div>
<button onClick={myFn}>按钮</button>
</div>
)
}
}
ReactDOM.render(<Home/>, document.getElementById('app'));
function myFn() {
message = 'www.it6666.top';
ReactDOM.render(<Home/>, document.getElementById('app'));
}
</script>
</body>
</html>
浏览器打开的样式如下所示：
再来看看无状态的组件，也就是函数组件，内容如下所示：
<!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">
function Home() {
return (
<div>
<div>{state + ''}</div>
<button onClick={myFn}>按钮</button>
</div>
)
}
ReactDOM.render(<Home/>, document.getElementById('app'));
function myFn() {
message = 'www.it6666.top';
ReactDOM.render(<Home/>, document.getElementById('app'));
}
</script>
</body>
</html>
浏览器打开的样式如下所示：
