首頁 > 文章 > web前端 > 你可能沒注意的一些react細節知識點！（總結）

你可能沒注意的一些react細節知識點！（總結）

青灯夜游轉載: 2021-02-11 08:55:532258瀏覽

react中這些細節你有註意過沒有？下面這篇文章為大家總結了一些你可能沒注意的react細節知識點。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

【相關教學推薦：React影片教學】

react中的一些細節知識點：

1、元件中get的使用（作為類別的getter）

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

Class Component {
     constructor() {
         super()
         this.name = &#39;&#39;
    }    
    
    // 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> 
}

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

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

Vue的computed有一個優點就是：

計算屬性對比函數執行：會有緩存，減少計算---> 計算屬性只有在它的相關依賴發生改變時才會重新求值。

這意味著只要 firstName和lastName還沒有改變，多次存取renderFullName計算屬性會立即傳回先前的計算結果，而不必再執行函數。

那麼是否react的getter也有快取這個優勢嗎？？？ 答案是：沒有，react中的getter並沒有做快取優化！

2、元件的attr及事件執行順序：

#　　A、父子元件：以props形式，父傳給子

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

依賴上述規則，那麼要使得 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.handle、cf方法以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>
         );
   }

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

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

4、清單渲染中的陣列

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

正常的jsx寫法是在render中寫類似HTML的語法，標籤巢狀標籤e388a4556c0f65e1904146cc1a846beeee638be535987cc982c635f11d15b58f94b3e26ee717c64999d7867364b1b4a3，有js，用{ 花括號}。 但不知道你注意過沒有，陣列可以嵌套在標籤內部

，正常渲染。

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

    // listItems是数组numbers通过map返回的，本质也是个数组。 
    const listItems = numbers.map((number) =>
        <li>{number}</li>
    );

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

如上所示，標籤內部的陣列是可以正確渲染的，那麼就有以下的寫法：

renderItem(name) {
    const A = <li key={&#39;a&#39;}>A</li>, 
             B = <li key={&#39;b&#39;}>B</li>, 
             C = <li key={&#39;c&#39;}>C</li>, 
             D = <li key={&#39;d&#39;}>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() 执行结果是数组
    return (
         <ul>{  this.renderItem() }</ul>
    )
}

更多编程相关知识，请访问：编程视频！！

以上是你可能沒注意的一些react細節知識點！（總結）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文轉載於：cnblogs.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：jquery怎麼判斷是否有某個屬性下一篇：jquery怎麼判斷是否有某個屬性

看更多

你可能沒注意的一些react細節知識點！ （總結）

react中的一些細節知識點：

相關文章

你可能沒注意的一些react細節知識點！（總結）