React 重温之Render Props
背景React 16+ 版本更新后，新增了许多有意思的功能，作为一个苦逼哈哈的前端，也只能与时俱进的继续学习学习了。 什么是 Render Props先看官方是怎么说的： The term “render prop” refers to a simple technique for sharing code between React components using a prop whose value is a function. 翻译成大白话就是：这个技术呢，很简单，就是给组件添加一个值为函数的属性，这个函数可以在组件渲染（render）的时候调用，那这个组件是干啥用的呢？就是为了给原有组件“注入”其它组件的代码。 为啥要有这个东西？看完官方的说法，想必是一头雾水，为啥要通过这么麻烦的方式给一个组件“注入”另一个组件的代码？React不是原本就支持组件嵌套和传值吗？ 人官方网站也说了，这个技术只是用来解决一些比较特殊的问题的，并不是让你没事就用的， 那么我们可能就要问了，什么时候要用呢？ 同样套用官方的说法： a render prop is a function prop that a component uses to know what to render. 翻译过来就是说，这个渲染属性就是让组件知道自己渲染什么东西。。。 这不废话嘛！别急，还有大白话翻译呢。 大白话翻译过来就是说啊：如果你一个组件不知道自己渲染什么东西，或者说你一个组件的基础功能是提供”可变数据源“，具体展示UI可以从外部注入，那么就可以用这个技术了。 是不是还是一脸懵？一头雾？没关系，看个官方例子好了。 官方教程解释可变数据源组件首先是一个Mouse组件，可以实时获取鼠标位置并展示出来，那么在这里，这个Mouse组件提供”可变数据源“，也就是跟随鼠标一直变化的鼠标位置。 那你在页面渲染个鼠标位置有什么用啊？谁没事儿盯着你页面看鼠标位置啊？但是我们可用鼠标位置做许多用意思的东西啊，比如说跟随鼠标移动的动画啊，拖动页面元素移动啊什么的。。。 在这里，我们说Mouse组件提供“可变数据源”，但是它并不知道自己要渲染什么，它只是一个基础数据的提供者。 class Mouse extends React.Component {
constructor(props) {
super(props);
this.handleMouseMove = this.handleMouseMove.bind(this);
this.state = { x: 0,y: 0 };
}
handleMouseMove(event) {
this.setState({
x: event.clientX,y: event.clientY
});
}
render() {
return (
<div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
{/* ...but how do we render something other than a <p>? */}
<p>The current mouse position is ({this.state.x},{this.state.y})</p>
{this.props.render(this.state)} // 这个比较关键
</div>
);
}
}
我们看到在组件的渲染方法（render）里，没什么有价值的东西，但有一行代码很关键 很简单，调用Mouse组件的props里的render函数（这个render就是我们前面说的 “一个值为函数的属性” ，叫啥名儿都行，叫render是凑巧了，谁让这个技术起码是Render Props呢）来往这里渲染UI，Mouse只负责把“可变数据源”作为参数给render函数（props里面的属性函数，可不是声明周期的render函数）就好了。至于渲染的内容是什么？那就不是Mouse组件能控制了。 被注入UI组件然后就是一个使用数据源的组件Cat了，让Cat图片跟随鼠标位置的变化而移动。怎么变？当然是使用Mouse组件提供的可变数据源了。 这个Cat组件就是我们希望渲染在页面的UI了。以后可能会有dog、pig之类的，都需要用到Mouse提供的基础数据，也就是“可变数据源”。但是Cat并不能获取Mouse的数据变动啊，怎么把这俩绑定（联系）在一起呢？ class Cat extends React.Component {
render() {
const mouse = this.props.mouse;
return (
<img src="/cat.jpg" style={{ position: 'absolute',left: mouse.x,top: mouse.y }} />
);
}
}
绑定？还是调用吧然后就是绑定的出场了，说绑定有点不太合适，说调用可能更符合实际情况一点，之前我们在Mouse的render函数（生命周期函数）里调用了组件Props上的render属性函数（自定义的，叫啥名儿都行），那么我们在用到Mouse组件的时候，给Mouse组件一个render属性函数，这个函数使用参数（鼠标位置，通过Mouse组件的state传过来）来初始化Cat组件，然后返回。那么这样一来Cat组件就内嵌在Mouse组件的render函数里了。 也即是说一直到这个时候，我们才知道要往Mouse组件里渲染什么UI。 class MouseTracker extends React.Component {
render() {
return (
<div>
<h1>Move the mouse around!</h1>
<Mouse render={mouse => (
<Cat mouse={mouse} />
)}/>
</div>
);
}
}
啥时候用放心，一般情况这个技术用是用不上的，这辈子都不可能用上。。。但还有不一般情况呢不是吗？ 简单来说，当两个平级组件之间需要单向依赖的时候，就可以用这个技术了。 那什么是平级依赖呢？ 很简单，就是连个同级组件A、B，A组件需要跟随B组件的内部状态来改变自己的内部状态，我们就说A依赖B。为什么是单向依赖呢？ 双向依赖怎么办？ 双向依赖就把状态维护交给父组件了，谁还那么麻烦啊！ 好难啊，能不能不用当然可以不用了，这技术就不鼓励使用，那有没有别的方式可以避免使用这个技术呢？ 当然可以了，单向依赖只是双向依赖的一种简单子集，把需要依赖的状态提到父组件管理就好了，只是麻烦一点而已。 one more thing如果使用render Props技术的组件（也就是有一个render函数属性的组件）是继承自React.PureComponent 的，那么在props的浅比较看来，新老props总是不一样的，那么就会每次都重新渲染，性能开销比较大。 所以推荐用法如下： class MouseTracker extends React.Component {
// Defined as an instance method,`this.renderTheCat` always
// refers to *same* function when we use it in render
renderTheCat(mouse) {
return <Cat mouse={mouse} />;
}
render() {
return (
<div>
<h1>Move the mouse around!</h1>
<Mouse render={this.renderTheCat} />
</div>
);
}
}
继承React.Component，并使用类函数 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |