Render Props

render prop 是 React 中的一个术语，是指在 React 组件之间使用一个值为函数的 prop 共享代码的技术。说白了就是给组件的 prop 传入一个函数，来提供一个可以自定义的视图渲染逻辑。

例如下面这个组件使用示例。

<DataProvider render={data => <div>{data.msg}</div>} />;

Render Props 通常被用来解决横切关注点的问题。在组件开发的时候，偶尔会遇到需要将组件的封装状态或者行为共享给其他需要相同状态的组件的需求，这时就会面临一个问题：如何在另一个组件中复用这个行为？或者说将这个行为封装以后可以与其他的组件共享？

在上面这个简短的示例中，Render Props 就是一个用于通知组件渲染什么内容的函数 prop。以下是一个可以接受 Render Props 的组件示例。

function Mouse(props) {
  const [position, setPosition] = useState({ x: 0, y: 0 });
  const handleMouseMove = (event) => {
    setPosition({ x: event.clientX, y: event.clientY });
  };

  return <div onMouseMove={handleMouseMove}>{props.render(position)}</div>;
}

还可以基于这个示例创建一个高阶组件。

function withMouse(Component) {
  return () => {
    return <Mouse render={(mouse) => <Component {...props} mouse={mouse} />} />;
  };
}

如果在函数组件中返回一个函数，那么这个组件就不再是纯粹的了，因为其可能不会因为传入相同的参数产生相同的结果了，所以 Render Props 的使用，可能会在应用中埋入一些潜在的问题，在使用时需要多加留意。