通过实例了解Render Props回调地狱解决方案

作者: 后话_
来源: 51数据库
2021-08-02

简而言之，只要一个组件中某个属性的值是函数，那么就可以说该组件使用了 render props 这种技术。听起来好像就那么回事儿，那到底 render props 有哪些应用场景呢，咱们还是从简单的例子讲起，假如咱们要实现一个展示个人信息的组件，一开始可能会这么实现：

const personinfo = props => (
 <div>
  <h1>姓名：{props.name}</h1>
 </div>
);
// 调用
<personinfo name='web前端'/>

如果，想要在 personinfo 组件上还需要一个年龄呢，咱们会这么实现：

const personinfo = props => (
 <div>
  <h1>姓名：{props.name}</h1>
  <p>年龄：{props.age}</[>
 </div>
);

// 调用
<personinfo name='web前端' age='18'/>

然后如果还要加上链接呢，又要在 personinfo 组件的内部实现发送链接的逻辑，很明显这种方式违背了软件开发六大原则之一的开闭原则，即每次修改都要到组件内部需修改。

开闭原则：对修改关闭，对拓展开放。

那有什么方法可以避免这种方式的修改呢？

在原生 js 中，如果咱们调用函数后，还要做些骚操作，咱们一般使用回调函数来处理这种情况。

在 react 中咱们可以使用 render props，其实和回调一样：

const personinfo = props => {
return props.render(props);
}
// 使用

<personinfo 
 name='web前端' age = '18' link = 'link'
 render = {(props) => {
  <div>
   <h1>{props.name}</h1>
   <p>{props.age}</p>
   <a  rel="external nofollow" ></a>
  </div>
 }}
/>

值得一提的是，并不是只有在 render 属性中传入函数才能叫 render props，实际上任何属性只要它的值是函数，都可称之为 render props，比如上面这个例子把 render 属性名改成 children 的话使用上其实更为简便：

const personinfo = props => {
  return props.children(props);
};

<personinfo name='web前端' age = '18' link = 'link'>
{(props) => (
  <div>
    <h1>{props.name}</h1>
    <p>{props.age}</p>
    <a 
  </div>
)}
</personinfo

这样就可以直接在 personinfo 标签内写函数了，比起之前在 render 中更为直观。

所以，react 中的 render props 你可以把它理解成 js 中的回调函数。

react 组件的良好设计是可维护且易于更改代码的关键。

从这个意义上说，react 提供了许多设计技术，比如组合、hooks、高阶组件、render props等等。

render props 可以有效地以松散耦合的方式设计组件。它的本质在于使用一个特殊的prop(通常称为render)，将渲染逻辑委托给父组件。

import mouse from 'mouse';
function showmouseposition() {
 return (
  <mouse 
   render = {
    ({ x, y }) => <div>position: {x}px, {y}px</div> 
   }
  />
 )
}

使用此模式时，迟早会遇到在多个 render prop 回调中嵌套组件的问题: render props 回调地狱。

1. render props 的回调地狱

假设各位需要检测并显示网站访问者所在的城市。

首先，需要确定用户地理坐标的组件，像<asynccoords render={coords => ... } 这样的组件进行异步操作，使用 geolocation api，然后调用render prop 进行回调。。

然后用获取的坐标用来近似确定用户的城市:<asynccity lat={lat} long={long} render={city => ...} />，这个组件也叫render prop。

接着咱们将这些异步组件合并到<detectcity>组件中

function detectcity() {
 return (
  <asynccoords 
   render={({ lat, long }) => {
    return (
     <asynccity 
      lat={lat} 
      long={long} 
      render={city => {
       if (city == null) {
        return <div>unable to detect city.</div>;
       }
       return <div>you might be in {city}.</div>;
      }}
     />
    );
   }}
  />
 );
}
// 在某处使用
<detectcity />

可能已经发现了这个问题:render prop回调函数的嵌套。嵌套的回调函数越多，代码就越难理解。这是render prop回调地狱的问题。

咱们换中更好的组件设计，以排除回调的嵌套问题。

2. class 方法

为了将回调的嵌套转换为可读性更好的代码，咱们将回调重构为类的方法。

class detectcity extends react.component {
 render() {
  return <asynccoords render={this.rendercoords} />;
 }

 rendercoords = ({ lat, long }) => {
  return <asynccity lat={lat} long={long} render={this.rendercity}/>;
 }

 rendercity = city => {
  if (city == null) {
   return <div>unable to detect city.</div>;
  }
  return <div>you might be in {city}.</div>;
 }
}

// 在某处使用
<detectcity />

回调被提取到分开的方法rendercoords()和rendercity()中。这样的组件设计更容易理解，因为渲染逻辑封装在一个单独的方法中。

如果需要更多嵌套，类的方式是垂直增加(通过添加新方法)，而不是水平(通过相互嵌套函数)，回调地狱问题消失。

2.1 访问渲染方法内部的组件 props

方法rendercoors()和rendercity()是使用箭头函法定义的，这样可以将 this 绑定到组件实例，所以可以在<asynccoords>和<asynccity>组件中调用这些方法。

有了this作为组件实例，就可以通过 prop 获取所需要的内容：

class detectcitymessage extends react.component {
 render() {
  return <asynccoords render={this.rendercoords} />;
 }

 rendercoords = ({ lat, long }) => {
  return <asynccity lat={lat} long={long} render={this.rendercity}/>;
 }

 rendercity = city => {
  // 看这
  const { nocitymessage } = this.props;
  if (city == null) {
   return <div>{nocitymessage}</div>;
  }
  return <div>you might be in {city}.</div>;
 }
}
<detectcitymessage nocitymessage="unable to detect city." />

rendercity()中的this值指向<detectcitymessage>组件实例。现在就很容易从this.props获取 nocitymessage 的值。

3. 函数组合方法

如果咱们想要一个不涉及创建类的更轻松的方法，可以简单地使用函数组合。

使用函数组合重构 detectcity 组件：

function detectcity() {
 return <asynccoords render={rendercoords} />;
}

function rendercoords({ lat, long }) {
 return <asynccity lat={lat} long={long} render={rendercity}/>;
}

function rendercity(city) {
 if (city == null) {
  return <div>unable to detect city.</div>;
 }
 return <div>you might be in {city}.</div>;
}

// somewhere
<detectcity />

现在，常规函数rendercoors()和rendercity()封装了渲染逻辑，而不是用方法创建类。

如果需要更多嵌套，只需要再次添加新函数即可。代码垂直增长(通过添加新函数)，而不是水平增长(通过嵌套)，从而解决回调地狱问题。

这种方法的另一个好处是可以单独测试渲染函数:rendercoords()和rendercity()。

3.1 访问渲染函数内部组件的 prop

如果需要访问渲染函数中的 prop ，可以直接将渲染函数插入组件中

function detectcitymessage(props) {
 return (
  <asynccoords 
   render={rendercoords} 
  />
 );

 function rendercoords({ lat, long }) {
  return (
   <asynccity 
    lat={lat} 
    long={long} 
    render={rendercity}
   />
  );
 }

 function rendercity(city) {
  const { nocitymessage } = props;
  if (city == null) {
   return <div>{nocitymessage}</div>;
  }
  return <div>you might be in {city}.</div>;
 }
}

// somewhere
<detectcitymessage nocitymessage="unknown city." />

虽然这种结构有效，但我不太喜欢它，因为每次<detectcitymessage>重新渲染时，都会创建rendercoords()和rendercity()的新函数实例。

前面提到的类方法可能更适合使用。同时，这些方法不会在每次重新渲染时重新创建。

4. 实用的方法

如果想要在如何处理render props回调方面具有更大的灵活性，那么使用react-adopt是一个不错的选择。

使用 react-adopt 来重构 <detectcity> 组件：

import { adopt } from 'react-adopt';

const composed = adopt({
 coords: ({ render }) => <asynccoords render={render} />,
 city: ({ coords: { lat, long }, render }) => (
  <asynccity lat={lat} long={long} render={render} />
 )
});

function detectcity() {
 return (
  <composed>
   { city => {
    if (city == null) {
     return <div>unable to detect city.</div>;
    }
    return <div>you might be in {city}.</div>;
   }}
  </composed>
 );
}
<detectcity />

react-adopt需要一个特殊的映射器来描述异步操作的顺序。同时，库负责创建定制的渲染回调，以确保正确的异步执行顺序。

你可能会注意到的，上面使用react-adopt 的示例比使用类组件或函数组合的方法需要更多的代码。那么，为什么还要使用“react-adopt”呢?

不幸的是，如果需要聚合多个render props的结果，那么类组件和函数组合方法并不合适。

4.1 聚合多个渲染道具结果

想象一下，当咱们渲染3个render prop回调的结果时(asyncfetch1、asyncfetch2、asyncfetch3)

function multiplefetchresult() {
 return (
  <asyncfetch1 render={result1 => (
   <asyncfetch2 render={result2 => (
    <asyncfetch3 render={result3 => (
     <span>
      fetch result 1: {result1}
      fetch result 2: {result2}
      fetch result 3: {result3}
     </span>
    )} />
   )} />
  )} />
 );
}
<multiplefetchresult />

<multiplefetchresult>组件沉浸所有3个异步获取操作的结果，这是一个阔怕回调地狱的情况。

如果尝试使用类组件或函数的组合方法，它会很麻烦。回调地狱转变为参数绑定地狱：

class multiplefetchresult extends react.component {
 render() {
  return <asyncfetch1 render={this.renderresult1} />;
 }

 renderresult1(result1) {
  return (
   <asyncfetch2 
    render={this.renderresult2.bind(this, result1)} 
   />
  );
 }

 renderresult2(result1, result2) {
  return (
   <asyncfetch2 
    render={this.renderresult3.bind(this, result1, result2)}
   />
  );
 }

 renderresult3(result1, result2, result3) {
  return (
   <span>
    fetch result 1: {result1}
    fetch result 2: {result2}
    fetch result 3: {result3}
   </span>
  );
 }
}
// somewhere
<multiplefetchresult />

咱们必须手动绑定render prop回调的结果，直到它们最终到达renderresult3()方法。

如果不喜欢手工绑定，那么采用react-adopt可能会更好：

mport { adopt } from 'react-adopt';
const composed = adopt({
 result1: ({ render }) => <asyncfetch1 render={render} />,
 result2: ({ render }) => <asyncfetch2 render={render} />,
 result3: ({ render }) => <asyncfetch3 render={render} />
});
function multiplefetchresult() {
 return (
  <composed>
   {({ result1, result2, result3 }) => (
    <span>
     fetch result 1: {result1}
     fetch result 2: {result2}
     fetch result 3: {result3}
    </span>
   )}
  </composed>
 );
}

// somewhere
<multiplefetchresult />

在函数({result1, result2, result3}) =>{…}提供给<composed>。因此，咱们不必手动绑定参数或嵌套回调。

当然，react-adopt的代价是要学习额外的抽象，并略微增加应用程序的大小。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。