React js教程：React 中的解构和事件处理程序（6）-慕源网

本文是React 教程系列的一部分。您可以在此处找到本系列之前所有帖子的链接

介绍

在上一篇文章中，我们了解了 state 及其用法，以及 props 和 state 的区别。现在，在本文中，我们将继续回顾在 React.js 中解构 props 和 state 的一个小概念以及事件处理的基础知识。

解构

解构是 React ES6 中引入的一个简单概念。它是一项 JavaScript 功能，允许用户从数组或对象中提取多条数据并将它们分配给自己的变量。这个概念使我们能够轻松地从数组或对象中提取数据，并使您的代码可读和可用。

例如，您有一个拥有多个属性的员工。

const employee = {  
    name : "emp",  
    salary:"10k",  
    designation:"tester"  
}

在 ES6 之前，您需要访问如下属性。

console.log(employee.name);  
console.log(employee.salary);  
console.log(employee.designation);

解构让我们分发这段代码。

const {name,salary,designation} = employee

上面的代码与下面显示的代码相同。

const name = employee.name;  
const salary = employee.salary;  
const designation = employee.designation;

现在，无需使用employee. prefix即可访问上述属性。

console.log(name);  
console.log(salary);  
console.log(designation);

解构道具和状态

现在，看看下面的例子。我想以下面提到的方式传递属性。

const personalinfo =  
{  
     name: "xyz",  
     address: "150 seattle",  
     zipcode: "111111",  
     city: "wc",  
     contactnumber: "999999999"  
}  
  
const proffessionalinfo =  
{  
     occupation : "business",  
     designation : "CEO",  
     salary : "50k"  
}

现在，在 App.js 的 Employee 组件中添加上述属性。

import React,{Component} from "react";  
import "./App.css";  
import logo from "./logo.svg";  
import Employee from "./Components/Employee";  
  
class App extends Component {  
         render(){  
                  const personalinfo =  
                  {  
                           name: "xyz",  
                           address: "150 seattle",  
                           zipcode: "111111",  
                           city: "wc",  
                           contactnumber: "999999999"  
                  }  
                  const proffessionalinfo =  
                  {  
                           occupation : "business",  
                           designation : "CEO",  
                           salary : "50k"  
                  }  
  
                  return (  
                           <div className="App">  
                                    <img src={logo} className="App-logo" alt="logo"/>  
                                    <Employee personalinfo={personalinfo} proffessionalinfo={proffessionalinfo} >  
                                    </Employee>  
                           </div>  
                  );  
         }  
}  
  
export default App;

访问 Employee 组件中的上述属性，如下所示。

import React from 'react';  
  
const Employee = (props) => {  
  
return(  
    <div>  
          <legend>Personal Details</legend><br/>  
          Name : {props.personalinfo.name}<br/>  
          address : {props.personalinfo.address}<br/>  
          zipcode : {props.personalinfo.zipcode}<br/>  
          city : {props.personalinfo.city}<br/>  
          contactnumber : {props.personalinfo.contactnumber}<br/>  
  
          <legend>Proffessional Detail</legend><br/>  
          occupation : {props.proffessionalinfo.occupation}<br/>  
          designation : {props.proffessionalinfo.designation}<br/>  
          salary : {props.proffessionalinfo.salary}<br/>  
   </div>  
  )  
}  
  
export default Employee;

输出将显示如下。

在上面的代码中，我们需要为每个属性指定 props.personalinfo 或 props.proffessionalinfo。

现在，如果我们解构 props，我们在 Employee 组件中进行了以下更改。

import React from 'react';  
  
const Employee = ({personalinfo,proffessionalinfo}) => {  
         return(  
                  <div>  
                        <legend>Personal Details</legend><br/>  
                        Name : {personalinfo.name}<br/>  
                        address : {personalinfo.address}<br/>  
                        zipcode : {personalinfo.zipcode}<br/>  
                        city : {personalinfo.city}<br/>  
                        contactnumber : {personalinfo.contactnumber}<br/>  
  
                        <legend>Proffessional Detail</legend><br/>  
                        occupation : {proffessionalinfo.occupation}<br/>  
                        designation : {proffessionalinfo.designation}<br/>  
                        salary : {proffessionalinfo.salary}<br/>  
                        </div>  
         )  
}  
  
export default Employee;

重要的更改在第一行完成。我们传递了personalinfo 和proffessionalinfo 对象，而不是props。

现在，我们将检查输出。

输出保持不变，但现在代码更具可读性和干净。

所以，这是一种解构 props 的方法，同样，我们可以解构 state。

事件处理

事件处理与我们在 JavaSript 中使用的方法相同。它是一个处理程序，用于确定在触发事件时需要采取哪些操作。此处，事件是指鼠标单击、按钮单击、鼠标悬停、文本输入等。

在 React 中，所有事件处理程序都以驼峰式定义，即在 JavaScript 中，onclick 在 React 应用程序中将被定义为 onClick()。

与 HTML 不同，在 JSX 中，我们将函数作为事件处理程序而不是字符串传递。

例如，在 HTML 中，我们曾经定义按钮点击的函数如下。

<button onclick =”showName()”> Display Name  
</button>

在 React 中，我们将其定义为：

<button onclick ={showName}> Display Name  
</button>

另一个区别是函数返回的值。

在 HTML 中，我们通常这样写，

<a href=”#” onclick=”console.log(‘Link Clicked’); return false;”>Click me</a>

在 React 中，不能返回 False。我们需要强制添加它以防止默认行为。您需要显式调用 preventDefault。例如 –

function DisplayLink(){  
   function linkClicked(e){  
           e.preventDefault(e);  
           console.log(“Link Clicked”);  
    }   
  
    return(  
          <a href=”#” onClick={linkClicked}> Click me </a>   
    );  
}

这里，e 指的是合成事件。React 实现了自己的事件以提供跨浏览器兼容性支持。基本上，React 将浏览器本机事件定义为 React SyntheticEvent 的实例并将其传递给 React 处理程序。

合成事件

合成事件是 React 引入的概念，用于提供跨浏览器功能。它与浏览器的本机事件具有相同的界面，其中包括 stopPropagation() 和 preventDefault() 事件。这个概念是池化的，这意味着 SyntheticEvent 对象将被重用，并且由于性能原因在事件回调后此事件中的所有属性都变为 null，因为此事件不能以异步方式使用。如果需要以异步方式使用 SyntheticEvent，则使用 event.persist() 方法，该方法将从池中删除 SyntheticEvent() 并允许用户代码保留对事件的引用。