小编Moh*_*mad的帖子

渲染道具与 HOC?

我正在尝试从头开始学习 React 并对概念有深入的了解!

今天我在搜索 HOC、Render Props 以及两者之间的差异。我已经检查了两者的渲染时间。我写了一个console.log('rendered')into 渲染来检查浏览器控制台中的渲染时间。

HOC:当我使用 HOC 编写一个可用的组件时,我会在每次更改道具后看到我为 HOC 和使用 HOC 的组件渲染。

渲染道具:在这种情况下,我改变了道具,但只有包装器组件已经渲染。因为使用渲染道具我们只加载一个组件并注入代码以使用该组件功能!

那么,使用 Render Props 而不是 HOC 组件有好处吗?或者 HOC 组件可用且功能强大吗?

谢谢

javascript reactjs higher-order-components react-hooks

8
推荐指数
1
解决办法
3173
查看次数

在这种情况下如何设置CSS nth-child?

我正在尝试使用纯CSS创建React徽标,但是在这种情况下,nth-child不能设置rotate:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
  body{
    background-color: #20232a;
    margin: 0px;
    padding: 0px;
  }
  main{
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .container{
    width: 500px;
    height: 500px;
    background: #fff;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .container .circle{
    width: 100px;
    height: 100px;
    background: #00d8ff;
    border-radius: 50%;
  }
  .container .ellipse{
    width: 480px;
    height: 150px;
    position: absolute;
    border: 20px solid #00d8ff;
    border-radius: 100%;
  } …
Run Code Online (Sandbox Code Playgroud)

html css css-selectors

1
推荐指数
1
解决办法
61
查看次数