DevDino 🦖

React memo lazy

发表于 2021-09-09 本文字数： 820 阅读时长 ≈ 3 分钟

React.memo

react.memo 有第二个参数，可以通过第二个参数来自定义组件的渲染时机。

React Props Children 混合插槽

发表于 2021-09-09 本文字数： 75 阅读时长 ≈ 1 分钟

当多种 children 一起输入时

function Container(props) {
  const defaultProps = {
    name: "alen",
    msg: "hello",
  }

  return props.children.map((item) => {
    // 通过判断 clone 混入props
    if (React.isValidElement(item)) {
      return React.cloneElement(item, { ...defaultProps })
    } else if (typeof item === "function") {
      return item(defaultProps)
    } else {
      return null
    }
  })
}

function Child(props) {
  return <div>{props.name + props.msg} </div>
}

function App() {
  return (
    <Container>
      // 多种方式混入
      <Child />
      {(props) => <Child {...props} />}
    </Container>
  )
}

render(<App />, document.getElementById("root"))