成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

三分鐘掌握 React render props

姘擱『 / 2841人閱讀

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

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

what is it ?

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

What do render props do?

處理組件的渲染邏輯。

When to use ?

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

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

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

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

A live demo

光說不練假把式， 一起看個例子。

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

一番操作之后， 我們花了一個表：

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

這時候就輪到 render props 登場了。

我們可以把一個個部分獨立出來， 把有差異的部分當(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)鍵點： Face.

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

這時候可以給他加個 DefaultFace, 顯示 HH:mm

  static defaultProps = {
    face: date => ,
  }

很贊。

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

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;

心滿意足。

這時候我們的render 是這樣的：

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

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

舒服～

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

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

Live Demo : codeOpen

Tips

Dos

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/101379.html

相關(guān)文章

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

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

    channg 評論0 收藏0

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

    摘要：最后抽離出來了一個類，可以幫助我們更好的做組件化。一個組件有自己的顯示形態(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 評論0 收藏0

  • 掌握react，這一篇就夠了

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

    Enlightenment 評論0 收藏0

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

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

    icattlecoder 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<