【04】基础知识：React组件实例三大核心属性

【04】基础知识：React组件实例三大核心属性 - state

一、state 了解

理解

1、state 是组件对象最重要的属性，值是对象（可以包含多个 key-value 的组合）

2、组件被称为 “状态机”，通过更新组件的 state 来更新对应的页面显示（重新渲染组件）

强烈注意

1、组件中 render 方法中的 this 为组件实例对象

2、组件自定义的方法中 this 为 undefined，如何解决？

a)、强制绑定 this：通过函数对象的 bind()

b)、自定义方法使用：赋值语句+箭头函数

3、状态数据，不能直接修改或更新，需要通过 setState 方法进行修改

二、案例

定义一个展示天气信息的组件，默认展示天气炎热或凉爽，点击文字切换天气

基础写法（了解）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>state</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">// let that // ********了解：定义变量，缓存this// 1、创建组件class Weather extends React.Component {// 构造器调用几次？———— 1次，实例化组件时调用constructor(props) { // props为组件三大属性二，后续学习console.log('constructor')super(props)// 初始化状态this.state = { isHot: false, wind: '微风' }// that = this // ********了解：赋值this给that// 解决changeWeather中this指向问题（获取原型上的changeWeather，修改this指向为实例对象，返回新函数，挂载在实例自身）this.changeWeather = this.changeWeather.bind(this)}// render调用几次？———— 1+n次，实例化组件时调用1次、n是状态更新的次数render() {console.log('render')const { isHot, wind } = this.statereturn <h2 onClick={ this.changeWeather }>今天天气很 { isHot ? '炎热' : '凉爽' }， { wind }</h2>// ********了解：定义changeWeather在类外部// return <h2 onClick={changeWeather}>今天天气很 { isHot ? '炎热' : '凉爽' }， { wind }</h2>}// changeWeather调用几次？———— 点几次调几次changeWeather() {// changeWeather放在哪里？———— Weather的原型对象上，供实例使用// console.log(this) // undefined// 由于changeWeather是作为onClick的回调，所以不是通过实例调用的，是直接调用// 类中的方法默认开启了局部的严格模式，所以changeWeather中的this为undefinedconsole.log('changeWeather')const { isHot } = this.state// 严重注意：状态必须通过setState进行更新，且更新是一种合并，不是替换。this.setState({ isHot: !isHot })// 严重注意：状态(state)不可直接更改// this.state.isHot = !isHot // 错误写法，React中值未改变}}// 2、渲染组件到页面ReactDOM.render(<Weather/>, document.getElementById('test'))// ********了解：定义在类外部，一般不这么写// function changeWeather() {// 	console.log(this) // this为undefined，因为babel会将jsx转换为严格模式，严格模式下自定义函数中this为undefined// 	console.log(that.state)// }</script>
</body>
</html>

简化写法（常用）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>state简写方式</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">// 1、创建组件class Weather extends React.Component {// constructor构造器不需要时可省略// 初始化状态：类中可以直接写赋值语句，如下代码的含义是：给Weather的实例对象添加一个属性statestate = { isHot: false, wind: '微风' }render() {const { isHot, wind } = this.statereturn <h2 onClick={ this.changeWeather }>今天天气很 { isHot ? '炎热' : '凉爽' }， { wind }</h2>}// 自定义方法：要用赋值语句的形式（将changeWeather放在实例对象上，而不是原型对象上）+ 箭头函数（箭头函数没有this，指向父级的this，为实例对象）changeWeather = () => {console.log(this)const { isHot } = this.statethis.setState({ isHot: !isHot })}}// 2、渲染组件到页面ReactDOM.render(<Weather/>, document.getElementById('test'))</script>
</body>
</html>

三、原生事件绑定方法

1、element.addEventListener(事件名, 方法)

2、element.onclick = 方法

3、直接在标签上绑定

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>Document</title></head><body><button id="btn1">按钮1</button><button id="btn2">按钮2</button><button onclick="demo()">按钮3</button><script type="text/javascript">const btn1 = document.getElementById('btn1')btn1.addEventListener('click', () => {alert('按钮1被点击了')})const btn2 = document.getElementById('btn2')btn2.onclick = () => {alert('按钮2被点击了')}function demo(){alert('按钮3被点击了')}</script></body>
</html>