DaMeng

Render Props

发表于 更新于 分类于 ，

是什么

Render Props 就是函数类型的 Prop，它的作用是给组件传递渲染逻辑。

接收了 Render Prop 的组件，在内部会通过执行此函数参数来完成自己的渲染逻辑。

通过函数返回渲染组件 比 直接传递渲染组件 更能灵活的给 渲染组件传递属性。比如下面示例中，通过函数可以使渲染组件 h1 更灵活的接收到来自 DataProvider 的参数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//DataProvider 在内部会执行 render 函数来完成自己的渲染逻辑
// render 属性名可以是其他名字，并不必非得叫做 render
<DataProvider render={data => (       
  <h1>Hello {data.target}</h1>
)}/>

class DataProvider extends React.Component {
  render() {
    return (
        <div>
        	//给渲染组件传递参数 ‘world’
        	{this.props.render('World')}
        </div>
    );
  }
}

解决什么问题

可以解决横切关注点（即 组件间逻辑复用问题）。通过 Render Props 能够将组件封装的状态或行为共享给其他组件。

注意

Render Props 与 React.PureComponent 结合时，有可能使 React.PureCompnent 失去性能优势。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
class Mouse extends React.PureComponent {
  // 与上面相同的代码......
}

class MouseTracker extends React.Component {
  render() {
    return (
      <div>
        <h1>Move the mouse around!</h1>

        {/*
          这是不好的！
          每个渲染的 `render` prop的值将会是不同的。
          会使得 React.PureComponent 失去其性能优势
        */}
        <Mouse render={mouse => (
          <Cat mouse={mouse} />
        )}/>
      </div>
    );
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
class MouseTracker extends React.Component {
  // 定义为实例方法，
  //`this.renderTheCat` 当我们在渲染中使用它时,它始终指向相同的函数
  renderTheCat(mouse) {
    return <Cat mouse={mouse} />;
  }

  render() {
    return (
      <div>
        <h1>Move the mouse around!</h1>
        <Mouse render={this.renderTheCat} />
      </div>
    );
  }
}