1

React中事件和状态

 2 years ago
source link: https://blog.51cto.com/u_13349380/5607113
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

React中事件和状态

精选 原创
React中事件和状态_数据

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

        

        

            

                report
            

        

    







        
Recommend

        



                

    
About Joyk

    
 





Aggregate valuable and interesting links.

Joyk means Joy of geeK