資訊專欄INFORMATION COLUMN
摘要：前言由于的靈活性，我們在中其實有很多種綁定事件的方式，然而，其實有許多我們常見的事件綁定，其實并不是高效的。所以本文想給大家介紹一下綁定事件的正確姿勢。相當于，每次都會創(chuàng)建一次事件函數(shù)。看到這里，你也知道到底應(yīng)該如何綁定事件了。
前言
由于JS的靈活性，我們在React中其實有很多種綁定事件的方式，然而，其實有許多我們常見的事件綁定，其實并不是高效的。所以本文想給大家介紹一下React綁定事件的正確姿勢。常見兩種種錯誤綁定事件
class ErrorExample1 extends Component {
balabala(e) {console.log(e)}
render() {
const { text } = this.state;
return (
{text}
this.balabala(e)}>
)
}
}
class ErrorExample2 extends Component {
balabala(e) {console.log(e)}
render() {
const { text } = this.state;
return (
{text}
)
}
}
這是兩種最常見的React綁定事件代碼，但它為什么是錯誤的？
每當你的text發(fā)生變化，就會rerender，只要組件重新render，那就會重新創(chuàng)建新的事件函數(shù)，進而綁定事件，這個過程的開銷就是極大極大的浪費。相當于，每次rerender都會創(chuàng)建一次事件函數(shù)。
這據(jù)說是 Best Practiceclass Balabala extends Component {
constructor(p) {
suprt(p);
this.balabala = this.balabala.bind(this);
}
render() {
const { text } = this.state;
return (
{text}
)
}
}
然而我更喜歡的姿勢
class Balabala extends Component {
constructor(p) {
suprt(p);
}
醒來記得想我 = (e) => {
alert("想你了");
}
render() {
const { text } = this.state;
return (
{text}
)
}
}
利用箭頭函數(shù)，幫我們bind this。避免了在構(gòu)造函數(shù)里生命一堆的變量。減少鍵盤的敲擊，延長生命。
當然，還有人會問，這樣的寫法如何傳參呢？以前別人會這樣寫
class 渣男 extends Component {
constructor(p) {
suprt(p);
}
醒來記得想我 = (e, text) => {
alert(text); // alert 滾吧，渣男
}
render() {
const { text } = this.state;
return (
{text}
)
}
}
但是其實，我們可以這樣傳參，更加簡潔明了
class 渣男 extends Component {
constructor(p) {
suprt(p);
}
醒來記得想我 = (text) => (event) => {
alert(text); // 你渣我也喜歡，因為是你
}
render() {
const { text } = this.state;
return (
{text}
)
}
}
動態(tài)綁定
基于這個我們還可以針對同一事件修改多個input值，進行事件優(yōu)化
class ChangeMyName extends Component {
修改渣男名稱 = name => {
if (!this.handlers[name]) {
this.handlers[name] = event => {
this.setState({ [name]: event.target.value });
};
}
return this.handlers[name];
}
render() {
return (
<>
)
}
}
旁門左道，邪教！(個人不喜歡而已)
import autoBind from "react-autobind";
class Balabala extends Component {
constructor() {
autoBind(this);
}
醒來記得想我 (e) {
alert("想你了");
}
render() {
const { text } = this.state;
return (
{text}
)
}
}
import { BindAll } from "lodash-decorators";
@BindAll()
class Bbb extends Component {}
// 這種寫法等同于 bind
class Bbb extends Component {
balabala(){}
render() {
const { text } = this.state;
return (
{text}
)
}
}
基本都大同小異吧，就不過多介紹了。看到這里，你也知道到底應(yīng)該如何綁定事件了。
個人網(wǎng)站：http://meckodo.com
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/100615.html
摘要：處理事件響應(yīng)是應(yīng)用中非常重要的一部分。中，處理事件響應(yīng)的方式有多種。關(guān)于事件響應(yīng)的回調(diào)函數(shù)，還有一個地方需要注意。不管你在回調(diào)函數(shù)中有沒有顯式的聲明事件參數(shù)，都會把事件作為參數(shù)傳遞給回調(diào)函數(shù)，且參數(shù)的位置總是在其他自定義參數(shù)的后面。 React中定義一個組件，可以通過React.createClass或者ES6的class。本文討論的React組件是基于class定義的組件。采用cla...
摘要：假如我們從后臺拉取一個數(shù)據(jù)要填入輸入框，那么必須得使用受控組件，因為非受控組件只能被用戶輸入。不影響正常輸入填充該輸入框的默認值，此時不顯示內(nèi)容。 網(wǎng)頁中使用的form表單大家肯定都再熟悉不過了，它主要作用是用來收集和提交信息。React中的表單組件與我們普通的Html中的表單及其表現(xiàn)形式?jīng)]有什么不同，所以如何使用表單我覺得再拿出來說可能是畫蛇添足、毫無意義。不過再怎么樣也不能辜負大家...
閱讀 2269·2021-11-23 09:51
閱讀 5657·2021-09-22 15:39
閱讀 3343·2021-09-02 15:15
閱讀 3494·2019-08-30 15:54
閱讀 2355·2019-08-30 15:53
閱讀 1397·2019-08-30 14:04
閱讀 2446·2019-08-29 18:33
閱讀 2364·2019-08-29 13:08
