render props

render props 重用的业务逻辑自己不产生任何 UI

• render props 就是把一个 render 函数作为属性传递给某个组件，由这个组件去执行这个函数从而 render 实际的内容
• 如果有 UI 展示的逻辑需要重用，我们还是必须借助于 render props 的逻辑，这就是必须要掌握 render props 设计模式

计数器案例

import { useState, useCallback } from "react";
function CounterRenderProps({ children }) {
  const [count, setCount] = useState(0);
  const increment = useCallback(() => {
    setCount(count + 1);
  }, [count]);
  const decrement = useCallback(() => {
    setCount(count - 1);
  }, [count]);
  return children({ count, increment, decrement });
}

把计数逻辑封装到一个自己不 render 任何 UI 的组件，使用 render props

function CounterRenderPropsExample() {
  return (
    <CounterRenderProps>
      {({ count, increment, decrement }) => {
        return (
          <div>
            <button onClick={decrement}>-</button>
            <span>{count}</span>
            <button onClick={increment}>+</button>
          </div>
        );
      }}
    </CounterRenderProps>
  );
}