三分钟掌握 React render props

mcterry 发布于2019-08-05 16:07 / 2875人阅读

摘要：上午代码的时候，发现一些问题，关于逻辑复用的一些小技巧。把一些渲染逻辑以的形式传递给把注意力集中在渲染逻辑上。我们可以把一个个部分独立出来，把有差异的部分当作传入就可以了。现在给他换个样子，骚黄色心满意足。

上午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

服务器托管私有云三分钟三分钟入门三分钟了解区块链 prop()

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/58975.html

三分钟掌握 React render props

摘要：上午代码的时候，发现一些问题，关于逻辑复用的一些小技巧。把一些渲染逻辑以的形式传递给把注意力集中在渲染逻辑上。我们可以把一个个部分独立出来，把有差异的部分当作传入就可以了。现在给他换个样子，骚黄色心满意足。 showImg(https://segmentfault.com/img/bVbnItj?w=938&h=445); 上午review 代码的时候，发现一些问题，关于逻辑复用的...

姘搁『 2019-08-23 14:56 评论0 收藏0
[译] 逐渐去掌握 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