• 今天的码农女孩做了关于呼吸灯的练习、受控组件和高阶组件的简答题

    练习：用标签做一个圆形，做呼吸灯效果，动画是：改变透明度1-0 循环

    1.      <style>
    2.         .hxd {
    3.             width: 350px;
    4.             height: 350px;
    5.             background-color: pink;
    6.             border-radius: 50%;
    7.             margin: 50px auto;
    8.         }
    9.     </style>
    10. </head>
    11. <body>
    12.     <div id="app"></div>
    13.     <script type="text/babel">
    14.         class App extends React.Component{
    15.             constructor(props){
    16.                 super(props)
    17.                 this.fun=this.fun.bind(this)
    18.                 this.state={num:1}
    19.             }
    20.             fun(){
    21.                if(this.state.num<0){
    22.                 this.setState({num:1})
    23.                }
    24.                else{
    25.                 this.setState({num:this.state.num-0.1})
    26.                }
    27.             }
    28.             componentWillUnmount(){
    29.                 clearInterval(this.th)
    30.             }
    31.             componentWillMount(){
    32.                 this.th=setInterval(()=>{
    33.                     this.fun()
    34.                 },100)
    35.             }
    36.             render(){
    37.                 return (
    38.                     <div className="hxd" style={{opacity:this.state.num}}></div>
    39.                 )
    40.             }
    41.         }
    42.         ReactDOM.render(
    43.             (<div>
    44.                 <App />
    45.             </div>),
    46.             document.getElementById("app")
    47.         )
    48.     </script>
    49. </body>

    何为受控组件(controlled component)

    在 HTML 中，类似 <input>, <textarea> 和 <select> 这样的表单元素会维护自身的状态，并基于用户的输入来更新。当用户提交表单时，前面提到的元素的值将随表单一起被发送。但在 React 中会有些不同，包含表单元素的组件将会在 state 中追踪输入的值，并且每次调用回调函数时，如 onChange 会更新 state，重新渲染组件。一个输入表单元素，它的值通过 React 的这种方式来控制，这样的元素就被称为"受控元素"。

    何为高阶组件(higher order component)

    高阶组件是一个以组件为参数并返回一个新组件的函数。HOC 运行你重用代码、逻辑和引导抽象。最常见的可能是 Redux 的 connect 函数。除了简单分享工具库和简单的组合，HOC 最好的方式是共享 React 组件之间的行为。如果你发现你在不同的地方写了大量代码来做同一件事时，就应该考虑将代码重构为可重用的 HOC。

  • 相关阅读:
    第三章 关系数据库标准语言SQL
    时间复杂度
    密码技术 (3) - 单向散列函数
    黄金代理这么多，怎么选？
    评价指标（一）精确率，召回率，F1-score
    （初阶）指针
    根据token和url、参数判断时间内是否重复提交
    Nginx配置文件详解
    软件工程概述----- Scrum敏捷开发
    JAVA练习题35：多态综合训练
  • 原文地址：https://blog.csdn.net/m0_64444606/article/details/125596144