三分鐘掌握 React render props

姘擱『發布于2019-08-23 14:56 / 2833人閱讀

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

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

what is it ?

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

What do render props do?

處理組件的渲染邏輯。

When to use ?

當你發現組件中有重復的邏輯或者模式的時候。比如：

重復的UI結構

共享某個數據源

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

A live demo

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

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

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

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

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

我們可以把一個個部分獨立出來，把有差異的部分當作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)}
        
      
    
  )
}

不用關注 Strap， Bezel， Screen 這些，我們只看關鍵點： Face.

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

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

  static defaultProps = {
    face: date => ,
  }

很贊。

現在給他換個樣子，騷黃色：

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

GPU云服務器云服務器三分鐘三分鐘入門三分鐘了解區塊鏈 prop()

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101379.html

[譯] 逐漸去掌握 React（作為一名 Angular 開發者）

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

channg 2019-08-21 14:07 評論0 收藏0
React.js 小書 Lesson4 - 前端組件化（三）：抽象出公共組件類

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

jsbintask 2019-08-21 17:32 評論0 收藏0
掌握react，這一篇就夠了

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

Enlightenment 2019-08-23 11:45 評論0 收藏0
30分鐘精通React今年最勁爆的新特性——React Hooks

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

icattlecoder 2019-08-23 12:56 評論0 收藏0