react 代碼優化(一) ——事件處理

React的事件處理

一、React 的事件綁定屬性的命名要採用駝峯時寫法， 不能小寫

二、要傳入一個函數做爲事件處理函數，不能是字符串

例如：<button onclick={handleMe}>click me!</button>

三、阻止默認行爲preventDefault

function ActionLink() {
  function handleClick(e) {
    e.preventDefault();  //阻止默認行爲
    console.log('The link was clicked.');
  }

  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );
}

四、事件綁定

一、在構造函數中使用bind綁定this

class Introduce extends React.Component {
    constructor (props) {
        super(props);
        this.handleClick = this.handleClick.bind(this)
    }
    
    handleClick() {
        console.log('hello')
    }
    
    render() {
        return (
            <div onClick={this.handleClick}>click me!</div>
        )
    }
}

優勢：這種綁定方式 是官方推薦的，在類構造函數中綁定this, 只會生成一個方法實例， 而且綁定一次以後若是屢次用到這個方法，也不須要再綁定
缺點：即便不用到state，也須要添加類構造函數來綁定this，代碼量多一點

二、使用屬性初始化器語法綁定this(實驗性)

class Introduce extends React.Component {
    handleClick = () => {
        console.log('hello')
    }
    render() {
        return (
            <div onClick={this.handleClick}>click me!</div>
        )
    }
}
這種屬性初始化語法，將方法初始化爲箭頭函數，所以在建立函數的時候就綁定了this，無需再次綁定，這種須要結合babel轉義，很方便

三、在調用的時候使用bind綁定this

class Introduce extends React.Component {
    handleClick() {
        console.log('hello')
    }
    render() {
        return (
            <div onClick={this.handleClick.bind(this)}>click me!</div>
        )
    }
}

四、在調用的時候使用箭頭函數綁定this

class Introduce extends React.Component {
    handleClick() {
        console.log('hello')
    }
    render() {
        return (
            <div onClick={() => this.handleClick()}>click me!</div>
        )
    }
}
三、4這種方式會有性能影響而且若是回調函數做爲屬性傳給子組件的時候會致使從新渲染的問題 
綜上，方式一是官方推薦的，方式二是咱們用起來比較好用的 也結合了 方式一、三、4的優勢