1.React组件状态（state）
组件可以拥有状态（state），它是组件数据的私有部分，可以用来管理动态数据。状态仅适用于类组件，或者使用 React 的 Hook 时可以在函数组件中使用。
注意
- 组件中render方法中的this为组件实例对象
- 组件自定义方法中的this指向为undefined解决方法
- 强制绑定this,通过函数的bind()
- 赋值+箭头函数（this指向外找）
- 状态数据：不能直接修改或更新，使用setState修改状态值
2. 构造器初始化state以及数据读取
利用构造器初始化state，以及state中数据的读取，具体例子如下
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello，React</title>
</head>
<body>
<!-- 容器 -->
<div id="test"></div>
<!-- {/* // 引入 React核心库 */} -->
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<!-- {/* // 引入 react-dom 用于支持 react 操作 DOM */} -->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<!-- {/* // 引入 babel：1. ES6 ==> ES5 2. jsx ==> js */} -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- {/* // 引入 JSX 语法 */} -->
<script type="text/babel">
// 1. 创建一个类式组件 extends React.Component 继承react内置的类
class Weather extends React.Component{
// 构造器中初始化状态
constructor(props) {
// 调用父类的构造器
super(props);
this.state = {
temperature: 35,
weather: '晴'
}
}
render () {
console.log(this);
return <h1>今日的天气：{this.state.temperature}°C，{this.state.weather}，天气热</h1>
}
}
// 2.渲染组件到页面
ReactDOM.render(<Weather />,document.getElementById('test'))
</script>
</body>
</html>3.state初始化数据 添加点击事件onClick 更新数据
重点
3.1构造器中绑定事件处理函数，bind更改this指向问题
javascript
this.change = this.changeWeather.bind(this)3.2render中标签添加点击事件
javascript
render () {
// 读取状态与添加点击状态 this=>Weather组件实例对象
return <h1 onClick={this.change}>今日的天气：{this.state.temperature}°C，{this.state.weather}，天气{this.state.isHot?'很热':'很冷'}</h1>
}3.3setState方法修改state状态中的值
javascript
changeWeather() {
// 获取初始的值
const dataList = this.state
// 解决方法：1. 手动绑定this 2. 使用箭头函数
// this.setState({temperature: 36, weather: '多云', isHot: false})
// 或者使用箭头函数
this.setState((prevState) => ({
temperature: 36,
weather: '多云',
isHot: !dataList.isHot
}))
}3.4整体代码构造函数标准代码模式
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello，React</title>
</head>
<body>
<!-- 容器 -->
<div id="test"></div>
<!-- {/* // 引入 React核心库 */} -->
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<!-- {/* // 引入 react-dom 用于支持 react 操作 DOM */} -->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<!-- {/* // 引入 babel：1. ES6 ==> ES5 2. jsx ==> js */} -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- {/* // 引入 JSX 语法 */} -->
<script type="text/babel">
// 1. 创建一个类式组件 extends React.Component 继承react内置的类
class Weather extends React.Component{
// 构造器中初始化状态----调用1次
constructor(props) {
// 调用父类的构造器
super(props);
this.state = {
temperature: 35,
weather: '晴',
isHot:true
}
// 绑定事件处理函数 changeWeather中的this指向问题
this.change = this.changeWeather.bind(this)
}
// 调用---N+1次 N为state更新次数 1为初始化调用1次
render () {
// 读取状态与添加点击状态 this=>Weather组件实例对象
return <h1 onClick={this.change}>今日的天气：{this.state.temperature}°C，{this.state.weather}，天气{this.state.isHot?'很热':'很冷'}</h1>
}
// 事件处理函数---点几次就调用几次
changeWeather() {
// 点击事件 changeWeather--Weather原型对象上，实例使用
// changeWeather作为onClick事件的回调函数，不是通过实例调用而是直接调用
// 类中方法默认开启局部严格模式，所以changWeather中的this是undefined
// 获取初始的值
const dataList = this.state
//注意：状态state不可直接修改，需要通过setState方法修改 更新是一种合并操作，而不是直接替换
// 解决方法：1. 手动绑定this 2. 使用箭头函数
// this.setState({temperature: 36, weather: '多云', isHot: false})
// 或者使用箭头函数
this.setState((prevState) => ({
temperature: 36,
weather: '多云',
isHot: !dataList.isHot
}))
}
}
// 2.渲染组件到页面
ReactDOM.render(<Weather />,document.getElementById('test'))
</script>
</body>
</html>3.5 state常用编码模式非构造函数模式
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello，React</title>
</head>
<body>
<!-- 容器 -->
<div id="test"></div>
<!-- {/* // 引入 React核心库 */} -->
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<!-- {/* // 引入 react-dom 用于支持 react 操作 DOM */} -->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<!-- {/* // 引入 babel：1. ES6 ==> ES5 2. jsx ==> js */} -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- {/* // 引入 JSX 语法 */} -->
<script type="text/babel">
// 1. 创建一个类式组件 extends React.Component 继承react内置的类
class Weather extends React.Component{
// 初始化状态
state= {
temperature: 35,
weather: '晴',
isHot:true
}
render () {
return <h1 onClick={this.changeWeather}>今日的天气：{this.state.temperature}°C，{this.state.weather}，天气{this.state.isHot?'很热':'很冷'}</h1>
}
// 点击事件-赋值语句+箭头函数 箭头函数向外找this指向
changeWeather = ()=> {
const dataList = this.state
this.setState((prevState) => ({
temperature: 36,
weather: '多云',
isHot: !dataList.isHot
}))
}
}
// 组件渲染
ReactDOM.render(<Weather />,document.getElementById('test'))
</script>
</body>
</html>