React - 相關知識點

1、組件中get的使用（作爲類的getter）

ES6知識：class類也有自己的getter和setter，寫法如下：

Class Component {
     constructor() {
         super()
         this.name = ''
    }    
    
    // name的getter
    get name() {
        ...
    }

    // name的setter
    set name(value) {
        ...
   }
}

react組件中的get的使用如下：

/*
 *  renderFullName的getter 
 *  可以直接在render中使用this.renderFullName
 */ 

get renderFullName () {
  return `${this.props.firstName} ${this.props.lastName}`;
}

render() {
    return (
          <div>{this.renderFullName}</div>
    )   
}

那getter在react組件中有什麼用處呢？？

constructor (props) {
    super()
    this.state = {};
  }

    
  render () {
    // 常規寫法，在render中直接計算 
    var fullName = `${this.props.firstName} ${this.props.lastName}`;

    return (
      <div>
        <h2>{fullName}</h2>
      </div>
    );
  }

// 較爲優雅的寫法:，減少render函數的臃腫
renderFullName () {
  return `${this.props.firstName} ${this.props.lastName}`;
}

render () {
  var fullName = this.renderFullName() 
　 <div>{ fullName }</div> 
}

// 推薦的做法：通過getter而不是函數形式，減少變量
get renderFullName () {
  return `${this.props.firstName} ${this.props.lastName}`;
}

render () {
   <div>{ this.renderFullName  }</div> 
}

2、組件的attr及事件執行順序

• 父子組件：以props形式，父傳遞給子
• 同一組件：後面覆蓋前面

依靠上述規則，那麼要使得 attr 的權重最高，應該放到最底層的組件中，而且位置儘量的靠後。

<-- 父組件Parent | 調用子組件並傳遞onChange屬性 -->
<div>
    <Child  onChange={this.handleParentChange} />
</div>

<-- 子組件Child | 接收父組件onChange， 自己也有onChange屬性 -->
<input {...this.props} onChange={this.handleChildChange}  />

此時，Child 組件執行的 onChange 只是執行 handleChildChange 事件，handleParentChange 事件並不會執行.

1.如果只需要執行handleParentChange怎麼辦
input中 {…this.props} 與 onChange={this.handleChildChange} 換個位置。

2.如果兩個事件都需要執行怎麼辦
在Child組件中 handleChildChange 中執行 this.props.handleParentChange

3、類中的方法用ES6形式簡寫的不同之處： fn = () => {} 與 fn() {} 的區別

export default Class Child extends Component {
    constructor (props) {
        super()
        this.state = {};
   }

    // 寫法1，這是ES6的類的方法寫法
    fn1() {
         console.log(this)
        // 輸出 undefined
    }
 
    // 寫法2，這是react的方法寫法
    fn2 = () => {
         console.log(this)
         // 輸出：Child {props: {…}, context: {…}, refs: {…}, …}
    }

   render () {
        return (
          <div>
               <button onClick={this.fn1}>fn1方法執行</button >
               <button onClick={this.fn2}>fn2方法執行</button >
          </div>
         );
   }
}    

可見兩種寫法，函數內的this指向時不同的。
不過以下三種情況是相同的：

情況1：函數內部用不到this的時候，兩者相等

 	// 寫法1，這是ES6的類的方法寫法
    fn1() {
        return 1 + 1
    }
 
    // 寫法2，這是react的方法寫法
    fn2 = () => {
         return 1 + 1
    }

情況2：兩者在render中直接執行的時候

	// 寫法1，這是ES6的類的方法寫法
    fn1() {
         console.log(this)
        // Child {props: {…}, context: {…}, refs: {…}, …}
    }
 
    // 寫法2，這是react的方法寫法
    fn2 = () => {
         console.log(this)
         // 輸出：Child {props: {…}, context: {…}, refs: {…}, …}
    }

   render () {
        return (
          <div>
               <button onClick={() => {
                        this.fn1();
                }}>fn1方法執行</button >

               <button onClick={() => {
                        this.fn2();
                }}>fn2方法執行</button >
          </div>
         );
   }    

情況3：給this.fn2.bind(this)，綁定this作用上下文

	// 寫法1，這是ES6的類的方法寫法
    fn1() {
         console.log(this)
        // Child {props: {…}, context: {…}, refs: {…}, …}
    }
 
    // 寫法2，這是react的方法寫法
    fn2 = () => {
         console.log(this)
         // 輸出：Child {props: {…}, context: {…}, refs: {…}, …}
    }

   render () {
        return (
          <div>
               <button onClick={this.fn1}>fn1方法執行</button >

               <button onClick={this.fn2.bind(this)}>fn2方法執行</button >
          </div>
         );
   }    

參考鏈接：
react中的一些細節知識點