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

最新推荐文章于 2024-09-21 18:46:25 发布

丁丁丁dingdingding

最新推荐文章于 2024-09-21 18:46:25 发布

阅读量168

点赞数

分类专栏：小练习简答题文章标签：前端 javascript 开发语言 react.js

本文链接：https://blog.csdn.net/m0_64444606/article/details/125596144

版权

小练习同时被 2 个专栏收录

47 篇文章 0 订阅

订阅专栏

简答题

20 篇文章 0 订阅

订阅专栏

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

     <style>
        .hxd {
            width: 350px;
            height: 350px;
            background-color: pink;
            border-radius: 50%;
            margin: 50px auto;
        }
    </style>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
        class App extends React.Component{
            constructor(props){
                super(props)
                this.fun=this.fun.bind(this)
                this.state={num:1}
            }
            fun(){
               if(this.state.num<0){
                this.setState({num:1})
               }
               else{
                this.setState({num:this.state.num-0.1})
               }
            }
            componentWillUnmount(){
                clearInterval(this.th)
            }
            componentWillMount(){
                this.th=setInterval(()=>{
                    this.fun()
                },100)
            }
            render(){
                return (
                    <div className="hxd" style={{opacity:this.state.num}}></div>
                )
            }
        }
        ReactDOM.render(
            (<div>
                <App />
            </div>),
            document.getElementById("app")
        )
    </script>
</body>

何为受控组件(controlled component)

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

何为高阶组件(higher order component)

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