亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

三分鐘掌握 React render props

姘擱『 / 2889人閱讀

摘要：上午代碼的時(shí)候，發(fā)現(xiàn)一些問題，關(guān)于邏輯復(fù)用的一些小技巧。把一些渲染邏輯以的形式傳遞給把注意力集中在渲染邏輯上。我們可以把一個(gè)個(gè)部分獨(dú)立出來，把有差異的部分當(dāng)作傳入就可以了。現(xiàn)在給他換個(gè)樣子，騷黃色心滿意足。

上午review 代碼的時(shí)候， 發(fā)現(xiàn)一些問題， 關(guān)于邏輯復(fù)用的一些小技巧。 然后就花點(diǎn)時(shí)間整理了下， 做了個(gè)例子， 聊一下 render props.

what is it ?

簡單點(diǎn)講, render props 就一種在組件間共享邏輯的技巧。 把一些渲染邏輯以prop 的形式傳遞給 Component, 把注意力集中在渲染邏輯上。

What do render props do?

處理組件的渲染邏輯。

When to use ?

當(dāng)你發(fā)現(xiàn)組件中有重復(fù)的邏輯或者模式的時(shí)候。比如：

重復(fù)的UI結(jié)構(gòu)

共享某個(gè)數(shù)據(jù)源

共享某個(gè)全局事件（比如scroll, resize, ...）

A live demo

光說不練假把式， 一起看個(gè)例子。

想了想， 寫個(gè)表吧, 會(huì)動(dòng)的那種（年會(huì)毛都沒中，給個(gè)手環(huán)也好啊..）。

一番操作之后， 我們花了一個(gè)表：

現(xiàn)在我們又想換個(gè)表帶， 改怎么做？ 重寫一個(gè)嗎？ 顯然不是。

這時(shí)候就輪到 render props 登場(chǎng)了。

我們可以把一個(gè)個(gè)部分獨(dú)立出來， 把有差異的部分當(dāng)作prop 傳入就可以了。

上代碼：

class Watch extends Component {
  state = {
    date: moment(),
  }
  
  static propTypes = {
    face: PropTypes.func,
  }
  
  static defaultProps = {
    face: date => ,
  }
  
  componentDidMount = () => (this.TICK = setInterval(this.update, 1000))
  
  componentWillUnmount = () => clearInterval(this.TICK)
  
  update = () => this.setState({ date: moment() })
  
  render = () => (
    
      
        
          {this.props.face(this.state.date)}
        
      
    
  )
}

不用關(guān)注 Strap， Bezel， Screen 這些， 我們只看關(guān)鍵點(diǎn)： Face.

如果我們啥也不傳， 得到的將是一個(gè)空空如也的表盤:

這時(shí)候可以給他加個(gè) DefaultFace, 顯示 HH:mm

  static defaultProps = {
    face: date => ,
  }

很贊。

現(xiàn)在給他換個(gè)樣子， 騷黃色：

const SecondsFace = ({ date }) => {
  const hours = date.format("HH")
  const minutes = date.format("mm")
  const seconds = date.format("ss")
  return (
    <>
      {hours}
      {minutes}
      {seconds}
    
  )
}
SecondsFace.propTypes = watchfacePropTypes;

心滿意足。

這時(shí)候我們的render 是這樣的：

class App extends Component {
  render() {
    return (
        
         } />
); } }

如此這般， 可以把其他款式的表都寫了：

舒服～

年會(huì)又又又又啥也沒中的心情放佛得到了安撫。

完整代碼在這里: 代碼 ，喜歡的可以給個(gè)星星。

Live Demo : codeOpen

Tips

Dos

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/101379.html

相關(guān)文章

  • [譯] 逐漸去掌握 React（作為一名 Angular 開發(fā)者）

    摘要：你是一個(gè)對(duì)感興趣的開發(fā)者嗎不用擔(dān)心，這真的不會(huì)讓你成為一個(gè)背叛者或其他什么，真的。事實(shí)上，這個(gè)想法并不是或獨(dú)創(chuàng)的它只是一種很棒的軟件開發(fā)實(shí)踐方式。把代碼分離到不同的文件里并不會(huì)自動(dòng)導(dǎo)致關(guān)注點(diǎn)分離。 原文鏈接 : Getting to Grips with React (as an Angular developer)原文作者 : DAVE CEDDIA譯者 : 李林璞（web前端領(lǐng)域）...

    channg 評(píng)論0 收藏0

  • React.js 小書 Lesson4 - 前端組件化（三）：抽象出公共組件類

    摘要：最后抽離出來了一個(gè)類，可以幫助我們更好的做組件化。一個(gè)組件有自己的顯示形態(tài)上面的結(jié)構(gòu)和內(nèi)容行為，組件的顯示形態(tài)和行為可以由數(shù)據(jù)狀態(tài)和配置參數(shù)共同決定。接下來我們開始正式進(jìn)入主題，開始正式介紹。下一節(jié)鏈接直達(dá)小書基本環(huán)境安裝 React.js 小書 Lesson4 - 前端組件化（三）：抽象出公共組件類 本文作者：胡子大哈本文原文：http://huziketang.com/books...

    jsbintask 評(píng)論0 收藏0

  • 掌握react，這一篇就夠了

    摘要：小明小明兒子，可以看到組件顯示了父組件的。小明受控組件和非受控組件受控組件和非受控組件這些都是指的表單組件，當(dāng)一個(gè)表單的值是通過改變的而不是通過是受控組件，否則就是非受控組件。 react眾所周知的前端3大主流框架之一，由于出色的性能，完善的周邊設(shè)施風(fēng)頭一時(shí)無兩。本文就帶大家一起掌握react。 jsx語法 前端MVVM主流框架都有一套自己的模板處理方法，react則使用它獨(dú)特的jsx...

    Enlightenment 評(píng)論0 收藏0

  • 30分鐘精通React今年最勁爆的新特性——React Hooks

    摘要：所以我們做的事情其實(shí)就是，聲明了一個(gè)狀態(tài)變量，把它的初始值設(shè)為，同時(shí)提供了一個(gè)可以更改的函數(shù)。 你還在為該使用無狀態(tài)組件（Function）還是有狀態(tài)組件（Class）而煩惱嗎？ ——擁有了hooks，你再也不需要寫Class了，你的所有組件都將是Function。 你還在為搞不清使用哪個(gè)生命周期鉤子函數(shù)而日夜難眠嗎？ ——擁有了Hooks，生命周期鉤子函數(shù)可以先丟一邊了。 你在還...

    icattlecoder 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<