React事件和状态

时间:2022-09-29 公众号_前端每日技巧人气:0

DOM事件

react中绑定事件的语法跟html中为元素绑定事件的语法相似，

html中绑定事件：

<div onclick="fn"></div>
    react中绑定事件
<div onClick={this.fn}></div>

注意：

1 事件名称首字母必须大写
2 事件回调函数定义在组件中，我们通过插值语法引入绑定
3 事件回调函数不能执行（后面不能添加参数集合()）

绑定的是一个未执行的方法

参数

React使用了事件委托模式实现事件的绑定（事件委托模式特点：1 减少事件数量， 2 预言未来元素， 3 防止内存外泄）

vue没有实现事件委托，参数就是源生的事件对象

jquery实现了事件委托模式，参数是jquery封装后的事件对象

react中的DOM事件是基于事件委托模式实现的，因此参数就是react封装的事件对象（16版本就一个参数）

因此可以通过事件对象准确的获取绑定事件的元素，以及触发事件的元素。

作用域

react中的DOM事件回调函数

ES5开发中，this指向组件实例化对象，并且是不能改变的

ES6开发中，this默认是undefined，我们未来访问组件中的其他数据，我们要绑定作用域

改变作用域由两种方式：

第一种，使用ES5提供的bind方法，改变作用域
第二种，使用ES6提供的箭头函数，是定义时的作用域

一旦改变了作用域，我们是可以传递自定义参数的

bind方式改变的作用域，传递的自定义参数始终在事件对象前面

箭头函数改变的作用域，传递的自定义参数可以在任何位置。

在ES6开发中，事件回调函数允许我们绑定其他的对象，但是工作中，不建议绑定组件之外的其他对象

举例：

// 定义类
 class Demo extends Component {
  // 事件回调函数
  clickBtn(e) {
      console.log(this, arguments)
      // console.log(e.target, e.currentTarget)
  }
  // 渲染
  render() {
      return (
          <div>
              <button onClick={this.clickBtn}><span>按钮</span>1</button>
              {/*更改this*/}
              <button onClick={this.clickBtn.bind(this, 100, 'hello', true)}>按钮2</button>
              <button onClick={e => this.clickBtn(100, e, 'demo', false)}>按钮3</button>
              {/*工作中，不建议绑定组件之外的其他对象*/}
              <button onClick={this.clickBtn.bind(obj)}>按钮4</button>
          </div>
      )
  }
}

状态

组件有两类数据，一类是属性数据，一类就是状态数据

属性数据是在组件外部传递给组件的，因此在组件外部维护

状态数据是在组件内部使用的，因此在组件内部维护

根据组件是否有状态数据，可以将组件分成两类，一类是无状态是组件，一类是有状态组件

无状态组件

如果组件创建完成，组件就是一成不变的，组件不会产生交互，不会发送请求，这类组件就是无状态组件

我们目前所学习的组件，都是无状态组件

无状态组件还可以简写成一个函数

无状态组件也叫state less component

有状态组件

如果组件创建完成后，会与用户产生交互，会发送异步请求等等，在组件内部就会产生数据，为了维护这部分数据，我们可以将这部分数据放在状态中，这样的组件就是有状态组件。

这里的数据就是状态数据

使用状态数据

使用状态数据跟使用属性数据一样，也是通过this.state来使用。

初始化状态数据

我们在组件的构造函数中，初始化状态数据。

es6中通过constructor定义构造函数，由于我们的组件继承了Component组件基类，

并且重写了构造函数constructor，为了在构造函数内实现构造函数继承，我们要使用super关键字

构造函数有props属性数据参数，为了继承它，我们要将props参数传递给super方法

super(props);

如果不传递：在构造函数中，this.props目前是undefined

由于继承了props，所以在构造函数中props和this.props没有区别了

初始化状态

在构造函数中，通过为this.state赋值即可。

注意：由于在构造函数中，我们可以访问属性数据，因此我们可以用属性数据为状态数据赋值，这样可以实现数据有外部流入内部（工作中常见）

修改状态数据

组件提供了一个this.setState的方法，可以在组件内部修改状态数据

参数是对象

key表示状态属性数据名称

value表示状态数据值

注意：无论是组件的属性数据发生改变，还是状态数据发生改变，组件都会执行render方法。

// 无状态组件内部不需要维护数据，因此可以简写成函数
 let Demo = () => <button>按钮</button>
 // 定义换一换组件
 class Demo extends Component {
 // 初始化状态数据
 constructor(props) {
      // 构造函数继承
      super(props);
      // console.log(this.props, props)
      // 初始化状态
      this.state = {
          num: 0
      }
  }
 // 定义子视图列表
 createChildList(arr) {
      // 将数组成员转成span
      return arr.map((item, index) => <span key={index}>{item}</span>)
  }
  // 创建新闻列表
  createList() {
      // console.log(this)
      // 获取数据长度
      let len = this.props.data.length;
      return this.props.data.map((item, index) => {
          // 遍历第二维数组,如果num与index相等，要显示
          return <li key={index} style={{
              display: this.state.num % len === index ? '' : 'none'
          }}>{this.createChildList(item)}</li>
      })
  }
  // 事件回调函数
  toggle() {
      // 更新num
      // var num = this.state.num;
      // // 下一页
      // num++;
      // 更新状态
      // this.setState({ num })
      // 简化成一步
      this.setState({
          // 先加再更新
          num: ++this.state.num
      })
  }
  // 定义渲染方法
  render() {
      return (
          <div>
              {/*<span onClick={this.toggle.bind(this)}>换一换</span>*/}
              <span onClick={e => this.toggle(e)}>换一换</span>
              {/*新闻列表*/}
              <ul>{this.createList()}</ul>
          </div>
      )
  }
}

加载全部内容