react 代码优化(一) ——事件处理

wean 发布于2019-08-22 17:06 / 3009人阅读

摘要：的事件处理的事件绑定属性的命名要采用驼峰时写法，不能小写要传入一个函数作为事件处理函数，不能是字符串例如阻止默认行为阻止默认行为事件绑定在构造函数中使用绑定优点这种绑定方式是官方推荐的，在类构造函数中绑定只会生成一个方法实例，并且绑定一次之

React的事件处理 1、React 的事件绑定属性的命名要采用驼峰时写法，不能小写 2、要传入一个函数作为事件处理函数，不能是字符串

例如：

3、阻止默认行为preventDefault

function ActionLink() {
  function handleClick(e) {
    e.preventDefault();  //阻止默认行为
    console.log("The link was clicked.");
  }

  return (
    
      Click me
    
  );
}

4、事件绑定

1、在构造函数中使用bind绑定this

class Introduce extends React.Component {
    constructor (props) {
        super(props);
        this.handleClick = this.handleClick.bind(this)
    }
    
    handleClick() {
        console.log("hello")
    }
    
    render() {
        return (
            click me!
        )
    }
}

优点：这种绑定方式 是官方推荐的，在类构造函数中绑定this, 只会生成一个方法实例， 并且绑定一次之后如果多次用到这个方法，也不需要再绑定
缺点：即使不用到state，也需要添加类构造函数来绑定this，代码量多一点

2、使用属性初始化器语法绑定this(实验性)

class Introduce extends React.Component {
    handleClick = () => {
        console.log("hello")
    }
    render() {
        return (
            click me!
        )
    }
}
这种属性初始化语法，将方法初始化为箭头函数，因此在创建函数的时候就绑定了this，无需再次绑定，这种需要结合babel转义，很方便

3、在调用的时候使用bind绑定this

class Introduce extends React.Component {
    handleClick() {
        console.log("hello")
    }
    render() {
        return (
            click me!
        )
    }
}

4、在调用的时候使用箭头函数绑定this

class Introduce extends React.Component {
    handleClick() {
        console.log("hello")
    }
    render() {
        return (
             this.handleClick()}>click me!
        )
    }
}
3、4这种方式会有性能影响并且如果回调函数作为属性传给子组件的时候会导致重新渲染的问题 
综上，方式一是官方推荐的，方式二是我们用起来比较好用的 也结合了 方式1、3、4的优点

专线服务服务器托管事件处理程序待处理事件多个事件处理事件处理模型有

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94859.html

深入React知识点整理（一）

摘要：以我自己的理解，函数式编程就是以函数为中心，将大段过程拆成一个个函数，组合嵌套使用。越来越多的迹象表明，函数式编程已经不再是学术界的最爱，开始大踏步地在业界投入实用。也许继面向对象编程之后，函数式编程会成为下一个编程的主流范式。使用React也满一年了，从刚刚会使用到逐渐探究其底层实现，以便学习几招奇技淫巧从而在自己的代码中使用，写出高效的代码。下面整理一些知识点，算是React看书...

Gilbertat 2019-08-22 11:18 评论0 收藏0
浅析React之事件系统（一）

摘要：合成事件的使用方式在中不会把所有的事件处理器绑定到相应的真实的节点上，而是使用一个统一的事件监听器，把所有的事件绑定在最外层。在之前开发者需要为了优化性能需要自己来优化自己的事件处理器的代码，现在帮助你完成了这些工作。大家周末好，2016年的最后几篇文章开始写到了React的一些东西，那么最近就来一些图表君对于React的简单总结和理解，那么今天就开始第一篇，说一说React的事件系...

chemzqm 2019-08-20 14:05 评论0 收藏0
从 0 到 1 实现 React 系列 —— 4.优化setState和ref的实现

摘要：异步渲染利用事件循环，延迟渲染函数的调用调用回调函数处理后跟函数的情况浅合并逻辑事件循环，关于的事件循环和的事件循环后续会单独写篇文章。 showImg(https://segmentfault.com/img/remote/1460000015785464?w=640&h=280); 看源码一个痛处是会陷进理不顺主干的困局中，本系列文章在实现一个 (x)react 的同时理顺 Rea...

wangdai 2019-08-23 10:43 评论0 收藏0
谈谈React事件机制和未来(react-events)

摘要：另外第三方也可以通过的事件插件机制来合成自定义事件，尽管很少人这么做。抽象跨平台事件机制。打算干预事件的分发。事件是的一个自定义事件，旨在规范化表单元素的变动事件。 showImg(https://segmentfault.com/img/remote/1460000019961124?w=713&h=307); 当我们在组件上设置事件处理器时，React并不会在该DOM元素上直接绑定...

TNFE 2019-08-26 10:32 评论0 收藏0
React学习之漫谈React

摘要：事件系统合成事件的绑定方式合成事件的实现机制事件委派和自动绑定。高阶组件如果已经理解高阶函数，那么理解高阶组件也很容易的。例如我们常见的方法等都是高阶函数。对测试群众来说，从质量保证的角度出发，单元测试覆盖率是事件系统合成事件的绑定方式 `Test` 合成事件的实现机制：事件委派和自动绑定。 React合成事件系统的委托机制，在合成事件内部仅仅是对最外层的容器进行了绑定，并且依赖...

darkbug 2019-08-23 18:38 评论0 收藏0