React@16.x（16）Render Props

1，问题描述

当使用组件时，标签中的内容，会被当做 props.children 来渲染：

子组件：

import React, { PureComponent } from "react";

export default class MyComponent extends PureComponent {
    state = {
        x: 0,
        y: 0,
    };
    render() {
        return <div>{this.props.children}</div>;
    }
}

父组件使用：

import React from "react";
import MyComponent from "./MyComponent";

export default function index() {
    return (
        <div>
            <MyComponent>
                <h2>第1次使用</h2>
            </MyComponent>
            <MyComponent>
                <h2>第2次使用</h2>
            </MyComponent>
        </div>
    );
}

现在的需求：父组件中如何使用子组件的状态？

2，解决方式

2.1，Render Props

注意到在子组件中默认渲染的是 props.children，那如果像上下文 <ctx.Consumer></ctx.Consumer> 一样，通过函数参数来传递指定内容，就可以解决了。

所以，将 props.children 变成函数即可。

import React, { PureComponent } from "react";

export default class MyComponent extends PureComponent {
    state = {
        x: 1,
        y: 2,
    };
    render() {
        return <div>{this.props.children(this.state)}</div>;
    }
}

使用

import React from "react";
import MyComponent from "./MyComponent";

export default function index() {
    return (
        <div>
            <MyComponent>{(childrenState) => <h2>{childrenState.x}</h2>}</MyComponent>
            <MyComponent>{(childrenState) => <h2>{childrenState.y}</h2>}</MyComponent>
        </div>
    );
}

另外，一般这种情况不会用 props.children，而是使用约定俗成的 props.render 来表示。

// 子组件
<div>{this.props.render(this.state)}</div>;

// 父组件
<MyComponent render={(childrenState) => <h2>{childrenState.x}</h2>} />

注意，因为子组件 extends PureComponent，所以父组件应该将这个函数单独声明才行，否则每次都会重新渲染。（具体原因看这篇文章）

修改父组件如下：

import React from "react";
import MyComponent from "./MyComponent";

const renderA = (childrenState) => <h2>{childrenState.x}</h2>;

export default function index() {
    return (
        <div>
            <MyComponent render={renderA}></MyComponent>
        </div>
    );
}

2.2，HOC

高阶组件也能解决这个问题，但相比 Render props 有点繁琐。

import React, { PureComponent } from "react";

export default function withState(Comp) {
    return class MyComponent extends PureComponent {
        state = {
            x: 1,
            y: 2,
        };

        render() {
            return <Comp {...this.props} x={this.state.x} />;
        }
    };
}

父组件使用

import React from "react";
import withState from "./withState";

function ChildA(props) {
    return <h2>{props.x}</h2>;
}

const ChildStateA = withState(ChildA);

export default function index() {
    return (
        <div>
            <ChildStateA />
        </div>
    );
}

3，使用场景

可以看到，效果类似 vue中作用域插槽 。

所以大多的使用场景：某些组件的各个功能和处理逻辑相同，只是渲染的UI不同。

以上。