React基础知识点（下）-阿里云开发者社区

React基础知识点（下）

2023-05-29 68

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： React基础知识点

有状态组件和无状态组件

函数组件又叫做无状态组件，类组件又叫做有状态组件

状态(state) 即数据

函数组件没有自己的状态，只负责数据展示

类组件有自己的状态，负责更新UI，让页面动起来

State和SetState（★★★）

state基本使用

状态(state)即数据，是组件内部的私有数据，只能在组件内部使用

state的值是对象，表示一个组件中可以有多个数据

通过this.state来获取状态

示例demo

exportdefaultclassextendsReact.Component {
constructor(){
super()
// 第一种初始化方式this.state= {
count : 0        }
    }
// 第二种初始化方式state= {
count:1    }
render(){
return (
<div>计数器 :{this.state.count}</div>        )
    }
}

setState() 修改状态

状态是可变的

语法：this.setState({要修改的数据})

注意：不要直接修改state中的值，这是错误的

setState() 作用：1.修改 state 2.更新UI

思想：数据驱动视图

示例demo

exportdefaultclassextendsReact.Component {
// 第二种初始化方式state= {
count:1    }
render(){
return (
<div><div>计数器 :{this.state.count}</div><buttononClick={() => {
this.setState({
count: this.state.count+1                })   
                }}>+1</button></div>        )
    }
}

小结

修改state里面的值我们需要通过 this.setState() 来进行修改

React底层会有监听，一旦我们调用了setState导致了数据的变化，就会重新调用一次render方法，重新渲染当前组件

抽取事件处理函数

当我们把上面代码的事件处理程序抽取出来后，会报错，找不到this

原因

在JSX中我们写的事件处理函数可以找到this，原因在于在JSX中我们利用箭头函数，箭头函数是不会绑定this，所以会向外一层去寻找，外层是render方法，在render方法里面的this刚好指向的是当前实例对象

事件绑定this指向

箭头函数

利用箭头函数自身不绑定this的特点

利用bind方法（★★★）

利用原型bind方法是可以更改函数里面this的指向的，所以我们可以在构造中调用bind方法，然后把返回的值赋值给我们的函数即可

classAppextendsReact.Component {
constructor() {
super()
    ...
// 通过bind方法改变了当前函数中this的指向this.onIncrement=this.onIncrement.bind(this)
  }
// 事件处理程序onIncrement() {
    ...
  }
render() {
    ...
  }
}

class的实例方法（★★★）

利用箭头函数形式的class实例方法

注意：该语法是实验性语法，但是，由于babel的存在可以使用

// 事件处理程序onIncrement= () => {
console.log('事件处理程序中的this：', this)
this.setState({
count: this.state.count+1    })
  }

小结

推荐：使用class的实例方法，也是依赖箭头函数不绑定this的原因