《深入react技术栈》学习笔记（三）漫谈React

isLishude 发布于2019-08-21 11:38 / 3341人阅读

摘要：前言接下来让我们进入新的章节漫谈。正文一事件系统的事件系统事件系统符合标准，不存在任何兼容性问题，并且与原生的浏览器事件一样有同样的接口。所有的事件都自动绑定到最外层。组织事件冒泡的行为只适用于合成系统中，且没办法阻止原生事件冒泡。

前言

接下来让我们进入新的章节：漫谈React。
本篇文章主要讲React事件系统和表单操作。

正文 一：事件系统

1.react的事件系统
react事件系统符合W3school标准，不存在任何IE兼容性问题，并且与原生的浏览器事件一样有同样的API接口。同样支持事件的冒泡机制，我们可以使用stopPropagation()和preventDefault()来终止它。
所有的事件都自动绑定到最外层。如果需要访问原生事件对象，可以使用nativeEvent属性。

2.合成事件
（1）事件委派
react把所有事件绑定到结构的最外层，使用一个同意的事件监听器，这个事件监听器上维持了一个映射来保存所有组件内部的事件监听和处理函数。
（2）自动绑定
在react组件中，每个方法的上下文都会指向该组件的实例，即自动绑定this为当前组件。但是在使用ES6 classes或者纯函数时这种自动绑定就不复存在，需要手动实现this的绑定。
（3）绑定方法
3-1：bind方法：可以帮助我们绑定事件处理完器内的this，并且可以向事件处理器中传入参数，比如：

import React,{Component} from "react"
class App extends Component{
    handleClick(e,arg){
        console.log(e,log);
    }
    render(){
        return ;
    }
}

3-2构造器内声明（推荐）：在组件的构造器内完成对事件的绑定。

class App extends Component{
    handleClick(e){
        console.log(e);
        this.handleClick=this.handleClick.bind(this);
    }
    render(){
            return ;
        }
}

3-3箭头函数:它自动绑定了定义此函数作用域的this。

class App extends Component{
   const handleClick= (e)=>{
        console.log(e);
    }
    render(){
            return ;
        }
}或
import React,{Component} from "react"
class App extends Component{
    handleClick(e,arg){
        console.log(e,log);
    }
    render(){
        return ;
    }
}

3.原生事件
componenDidMount会在组件已经完成安装并且在浏览器存在真实的 DOM后调用，此时我们就可以完成对原生事件的绑定。

import React,{Component} from "react"
class nativeEventDemo extends Component{
    componentDidMount(){
        this.refs.button.addEventListener("click",e=>{
            handleClick(e);
        })
    }
    handleClick(e){
        console.log(e);
    }
    componentWillUnmount(){
        this.refs.button.removeEventListener("click");
    }
    render(){
        return 
    }
}

注意：在react中使用DOM原生事件时，一定要在组件卸载时手动移除，否则可能出现内存泄漏问题。

4.混合事件

我们无法在组件中将事件绑定到组件范围之外的区域，只能使用原生事件来实现。

但是，尽量在React中混用合成事件和原生DOM事件：用reactEvent.nativeEvent.stopPropagatoin()来阻止事件冒泡是不行的。组织React事件冒泡的行为只适用于React合成系统中，且没办法阻止原生事件冒泡。反之，在原生事件中阻止事件冒泡，却可以阻止React事件的传播。

对于无法使用React的合成事件系统的场景，我们还需要使用原生事件来完成。

二：表单

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

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

react进阶漫谈

摘要：父组件向子组件之间非常常见，通过机制传递即可。我们应该听说过高阶函数，这种函数接受函数作为输入，或者是输出一个函数，比如以及等函数。在传递数据的时候，我们可以用进一步提高性能。本文主要谈自己在react学习的过程中总结出来的一些经验和资源，内容逻辑参考了深入react技术栈一书以及网上的诸多资源，但也并非完全照抄，代码基本都是自己实践，主要为平时个人学习做一个总结和参考。本文的关键...

neuSnail 2019-08-20 14:16 评论0 收藏0
react进阶漫谈

摘要：父组件向子组件之间非常常见，通过机制传递即可。我们应该听说过高阶函数，这种函数接受函数作为输入，或者是输出一个函数，比如以及等函数。在传递数据的时候，我们可以用进一步提高性能。本文主要谈自己在react学习的过程中总结出来的一些经验和资源，内容逻辑参考了深入react技术栈一书以及网上的诸多资源，但也并非完全照抄，代码基本都是自己实践，主要为平时个人学习做一个总结和参考。本文的关键...

wyk1184 2019-08-30 15:52 评论0 收藏0
react进阶漫谈

摘要：父组件向子组件之间非常常见，通过机制传递即可。我们应该听说过高阶函数，这种函数接受函数作为输入，或者是输出一个函数，比如以及等函数。在传递数据的时候，我们可以用进一步提高性能。本文主要谈自己在react学习的过程中总结出来的一些经验和资源，内容逻辑参考了深入react技术栈一书以及网上的诸多资源，但也并非完全照抄，代码基本都是自己实践，主要为平时个人学习做一个总结和参考。本文的关键...

junnplus 2019-08-01 16:17 评论0 收藏0
《深入react技术栈》学习笔记（二）初入React世界

摘要：用于规范的类型与必需的状态。表示由组件更改的数据，通常是通过与用户的交互来更改的。为了实现的修改，需要注册事件处理程序到相应的元素上。当事件发生时，将更新后的值是从中检索，并通知组件。通常情况下，该函数初始化状态使用，，或其他数据存储。前言上一篇文章中，我们讲到了JSX的一些用法和注意事项，这次我们来讲react中最基础也是特别重要的内容：组件。这篇文章包含组件的以下内容：状态、属...

MRZYD 2019-08-20 14:47 评论0 收藏0
《深入react技术栈》学习笔记（一）初入React世界

摘要：前言以深入学习技术栈为线索，记录下学习的重要知识内容。要传入时，必须使用属性表达式。如果要使用自定义属性，要使用前缀这与标准是一致的。前言以《深入学习react技术栈》为线索，记录下学习React的重要知识内容。本系列文章没有涵盖全部的react知识内容，只是记录下了学习之路上的重要知识点，一方面是自己的总结，同时拿出来和在学习react的人们一块分享，共同进步。正文一：rea...

verano 2019-08-20 14:47 评论0 收藏0