三分鐘掌握 React render props
摘要：
上午review 程式碼的時候， 發現一些問題， 關於邏輯複用的一些小技巧。 然後就花點時間整理了下， 做了個例子， 聊一下 render props.
what is it ?
簡單點講, render props 就一種在元件間共享邏輯的技巧。 把一些渲染邏輯以pro...
上午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 => <DefaultFace date={date} />,
}
componentDidMount = () => (this.TICK = setInterval(this.update, 1000))
componentWillUnmount = () => clearInterval(this.TICK)
update = () => this.setState({ date: moment() })
render = () => (
<Strap>
<Bezel>
<Screen>
<Face>{this.props.face(this.state.date)}</Face>
</Screen>
</Bezel>
</Strap>
)
}
不用關注 Strap， Bezel， Screen 這些， 我們只看關鍵點： Face.
如果我們啥也不傳， 得到的將是一個空空如也的錶盤:
這時候可以給他加個 DefaultFace, 顯示 HH:mm
static defaultProps = {
face: date => <DefaultFace date={date} />,
}
很贊。
現在給他換個樣子， 騷黃色：
const SecondsFace = ({ date }) => {
const hours = date.format('HH')
const minutes = date.format('mm')
const seconds = date.format('ss')
return (
<>
<Value>{hours}</Value>
<Value>{minutes}</Value>
<Value>{seconds}</Value>
</>
)
}
SecondsFace.propTypes = watchfacePropTypes;
心滿意足。
這時候我們的render 是這樣的：
class App extends Component {
render() {
return (
<Watch />
<Watch face={date => <SecondsFace date={date} />} />
</div>
);
}
}
如此這般， 可以把其他款式的表都寫了：
舒服～
年會又又又又啥也沒中的心情放佛得到了安撫。
完整程式碼在這裡: 程式碼 ，喜歡的可以給個星星。
Live Demo : codeOpen
Tips
-
Dos :+1:
- 當有元件可以共享或者部分渲染邏輯重複的時候
-
Dont's :-1:
- 寧可不用也不要濫用
- 避免在使用PureComponents 的時候用render Props. 除非你的prop 是靜態定義的。
-
Notes :warning:
children
That's it.
:)
如有紕漏， 歡迎指正，謝謝。
更多參考：