亲宝软件园·资讯

展开

React事件和状态

公众号_前端每日技巧 人气:0

DOM事件

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

html中绑定事件:

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

注意:

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

参数

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

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

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

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

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

作用域

react中的DOM事件回调函数

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

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

改变作用域由两种方式:

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

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>
      )
  }
}

加载全部内容

相关教程
猜你喜欢
用户评论