React中的Render Props-JXin的博客

温馨提示

该文章距离上次更新已经过去了 750 天，文章内容可能已经过时。

什么是 Render Props
如何使用 Render Props
Render Props 和高阶组件（HOC）的区别
- 使用选择

什么是 Render Props

Render Props 是 React 中的一种设计模式，它通过将一个函数作为组件的props传递到另一个组件中，来共享代码和数据。

如何使用 Render Props

Render Props 模式的实现方法是在组件中创建一个函数，这个函数通常称为 Render Prop 函数。这个 Render Prop 函数接受组件的状态和行为作为参数，然后返回一个 React 元素。这个函数所返回的 React 元素可以用于渲染组件中的UI。

然后，将这个 Render Prop 函数作为组件的 props 传递给另一个组件。这个接收 Render Prop 函数的组件将会调用这个函数，并且使用它所返回的React元素来渲染自己的UI。这个组件可以使用Render Prop函数中所传递的数据和行为。

例如：

import React from 'react';

class Mouse extends React.Component {
  state = { x: 0, y: 0 };

  handleMouseMove = (event) => {
    this.setState({
      x: event.clientX,
      y: event.clientY
    });
  }

  render() {
    return (
      <div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
        {this.props.render(this.state)}
      </div>
    );
  }
}

class App extends React.Component {
  render() {
    return (
      <div style={{ height: '100%' }}>
        <Mouse render={(mouse) => (
          <div>
            <h1>鼠标位置：({mouse.x}, {mouse.y})</h1>
          </div>
        )} />
      </div>
    );
  }
}

export default App

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

Render Props 和高阶组件（HOC）的区别

Render Props 模式使用一个函数作为组件的 props 来共享代码和数据，而 HOC 则是将一个组件包装在另一个函数中，并返回一个新的组件。换句话说，Render Props 模式通过 props 共享代码和数据，而 HOC 则是通过组件的包装来实现这一目的

其次，Render Props 模式更加灵活。因为 Render Prop 函数是作为 props 传递的，所以我们可以在不同的组件中使用相同的 Render Prop 函数，并传递不同的参数。这使得 Render Props 模式更加适合于动态场景，例如需要根据用户输入或其他因素动态生成UI的情况。相比之下，HOC 是静态的，因为它是在编译时创建的，并且不太适合动态生成UI的场景。

另外，Render Props 模式对于渲染性能有一些优势。因为 Render Prop 函数是作为 props 传递的，所以我们可以避免在每次组件更新时重新创建它。相比之下，HOC 在每次渲染时都会创建一个新的组件实例，这可能会对渲染性能产生一些影响。当然，这并不是说 HOC 在性能方面很差，实际上，它们通常可以提供非常好的性能。只是相比之下，Render Props 模式对于渲染性能更有优势。

最后，Render Props 模式更容易理解和调试。因为 Render Prop 函数是普通的函数，所以我们可以更容易地理解它们的工作原理，并进行调试。相比之下，HOC 可能会使代码更加难以理解和调试，因为它们涉及到更多的高阶概念，例如函数组合和闭包。

总之，Render Props 和 HOC 都是非常有用的 React 代码共享模式。它们各有优缺点，我们可以根据具体情况选择最合适的模式来实现我们的需求。

使用选择

Render Props 应用于组件之间功能逻辑完全相同，仅仅是渲染的视图不同时

HOC 一般是抽离部分公共逻辑，也就是组件之间有一部分逻辑相同，各自也有自己独有的逻辑，HOC 只是在原有的基础上做一个增强处理

React中的Render Props

什么是 Render Props

如何使用 Render Props

Render Props 和 高阶组件（HOC）的区别

使用选择

Render Props 和高阶组件（HOC）的区别