react中的一些細(xì)節(jié)知識點(diǎn)

這篇文章主要介紹react中的一些細(xì)節(jié)知識點(diǎn)，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

react中的一些細(xì)節(jié)知識點(diǎn)：

1、組件中g(shù)et的使用（作為類的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 () {
    // 常規(guī)寫法，在render中直接計算 
    var fullName = `${this.props.firstName} ${this.props.lastName}`;

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

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

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

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

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

如果你了解Vue的話，那么你知道其中的 computed: {}  計算屬性，它的底層也是使用了getter，只不過是對象的getter不是類的getter

// 計算屬性，計算renderFullName
computed: {
    renderFullName: () => {
         return `${this.firstName} ${this.lastName}`;
    }
}

Vue的computed有一個優(yōu)勢就是：

計算屬性對比函數(shù)執(zhí)行：會有緩存，減少計算 --->   計算屬性只有在它的相關(guān)依賴發(fā)生改變時才會重新求值。

這就意味著只要 firstName和lastName還沒有發(fā)生改變，多次訪問renderFullName計算屬性會立即返回之前的計算結(jié)果，而不必再次執(zhí)行函數(shù)。

那么是否react的getter也有緩存這個優(yōu)勢嗎？？？   答案是：沒有，react中的getter并沒有做緩存優(yōu)化！

2、組件的attr及事件執(zhí)行順序：

　　A、父子組件：以props形式，父傳遞給子

　　B、同一組件：后面覆蓋前面。

依靠上述規(guī)則，那么要使得 attr 的權(quán)重最高，應(yīng)該放到最底層的組件中，而且位置盡量的靠后。

<-- 父組件Parent | 調(diào)用子組件并傳遞onChange屬性 -->
<div>
    <Child  onChange={this.handleParentChange} />
</div>

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

此時，Child組件執(zhí)行的onChange只是執(zhí)行handleChildChange事件，handleParentChange事件并不會執(zhí)行.

• 1.如果只需要執(zhí)行handleParentChange怎么辦？？   input中  {...this.props} 與 onChange={this.handleChildChange} 換個位置。

• 2.如果兩個事件都需要執(zhí)行怎么辦？？                      在Child組件中  handleChildChange 中執(zhí)行 this.props.handleParentChange

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

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方法執(zhí)行</button >
               <button onClick={this.fn2}>fn2方法執(zhí)行</button >
          </div>
         );
   }
}

可見兩種寫法，函數(shù)內(nèi)的this指向時不同的。

那它們就沒有相同之處嗎？？，  以下三種情況是相同的：

情況1：函數(shù)內(nèi)部用不到this的時候，兩者相等。

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

情況2：兩者在render中直接執(zhí)行的時候。

// 寫法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方法執(zhí)行</button >

               <button onClick={() => {
                        this.fn2();
                }}>fn2方法執(zhí)行</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方法執(zhí)行</button >

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

注意，不要和ES6中對象的方法簡寫弄混了，以下是對象Obeject的方法簡寫：

阮一峰ES6： http://es6.ruanyifeng.com/#docs/object

4、列表渲染中的數(shù)組

參考：https://doc.react-china.org/docs/lists-and-keys.html

正常的jsx寫法是在render中寫類似于HTML的語法，標(biāo)簽嵌套標(biāo)簽<p><input /></p>，有js，用 { 花括號 }。

但是不知道你注意過沒有，數(shù)組可以嵌套在標(biāo)簽內(nèi)部，正常渲染。

function NumberList(props) {
    const numbers = [1,2,3,4,5];

    // listItems是數(shù)組numbers通過map返回的，本質(zhì)也是個數(shù)組。 
    const listItems = numbers.map((number) =>
        <li>{number}</li>
    );

    return (
        <ul>
             // 可以替換成 [ <li>1</li>,  <li>2</li>,  .....]
             {listItems}
        </ul>
    );
}

如上所示，標(biāo)簽內(nèi)部的數(shù)組是可以正確渲染的，那么就有以下的寫法：

renderItem(name) {
    const A = <li key={'a'}>A</li>, 
             B = <li key={'b'}>B</li>, 
             C = <li key={'c'}>C</li>, 
             D = <li key={'d'}>D</li>;
     let operationList;

     switch (name) {
        case 1:
            operationList = [A , B,  C]
           break;
        case 2:
            operationList = [B,  C, D]
            break;
        case 0:
           operationList = [A]
           break;
    }
    return operationList;
}

render() {
　　 // this.renderItem() 執(zhí)行結(jié)果是數(shù)組
    return (
         <ul>{  this.renderItem() }</ul>
    )
}

以上是“react中的一些細(xì)節(jié)知識點(diǎn)”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！