React-组件-非受控组件 和 React-组件-高阶组件

简介: React-组件-非受控组件 和 React-组件-高阶组件

前言


  • 非受控组件也就是值,不受到 React 控制的表单元素就是非受控组件

废话不多说直接上代码:

import React from 'react';
class App extends React.PureComponent {
    constructor(props) {
        super(props);
        this.myRef = React.createRef();
    }
    render() {
        return (
            <form onSubmit={(event) => {
                this.submit(event)
            }}>
                <input type="text" ref={this.myRef}/>
                <input type="submit"/>
            </form>
        )
    }
    submit(event) {
        // 禁止默认行为
        event.preventDefault();
        console.log(this.myRef.current.value);
    }
}
export default App;



官方文档





高阶组件(Higher-Order Components,简称为 HOC)


  • 参数为组件,返回值为新组件的函数就可以称之为高阶组件
import React from 'react';
class Home extends React.PureComponent {
    render() {
        return (
            <div>Home</div>
        )
    }
}
function enhanceComponent(WrappedComponent) {
    class AdvComponent extends React.PureComponent {
        render() {
            return (
                <div>
                    <WrappedComponent/>
                </div>
            )
        }
    }
    return AdvComponent;
}
const AdvComponent = enhanceComponent(Home);
class App extends React.PureComponent {
    render() {
        return (
            <div>
                <AdvComponent/>
            </div>
        )
    }
}
export default App;



官方文档


最后

本期结束咱们下次再见👋~

🌊 关注我不迷路,如果本篇文章对你有所帮助,或者你有什么疑问,欢迎在评论区留言,我一般看到都会回复的。大家点赞支持一下哟~ 💗

相关文章
|
4月前
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
122 0
|
4月前
|
存储 前端开发 JavaScript
【第34期】一文学会React组件传值
【第34期】一文学会React组件传值
33 0
|
4月前
|
前端开发
【第31期】一文学会用React Hooks组件编写组件
【第31期】一文学会用React Hooks组件编写组件
35 0
|
4月前
|
存储 前端开发 JavaScript
【第29期】一文学会用React类组件编写组件
【第29期】一文学会用React类组件编写组件
37 0
|
4月前
|
前端开发 开发者
【第26期】一文读懂React组件编写方式
【第26期】一文读懂React组件编写方式
28 0
|
4月前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
43 0
|
16天前
|
设计模式 前端开发 API
React的高阶组件(HOC):使用与设计模式探讨
【4月更文挑战第25天】React的高阶组件(HOC)是一种复用和增强组件的高级模式,它接受组件并返回新组件。非侵入式增强使得HOC能在不修改原有组件代码的情况下添加功能。定义HOC后,将其应用于目标组件并渲染增强后的组件。常见设计模式包括属性代理、控制反转和装饰器。然而,使用时要注意避免滥用,保持命名清晰,关注性能优化。理解并恰当使用HOC能提升React应用的构建效率。
|
3月前
|
存储 前端开发 中间件
React组件间的通信
React组件间的通信
18 1
|
3月前
|
前端开发
react高阶成分(HOC)
react高阶成分(HOC)
18 1
|
3月前
|
前端开发 应用服务中间件 数据库
react服务端组件
react服务端组件
21 0